IT’S ALIVE! DYNAMIC COMPONENTS IN ANGULAR Shmuela Jacobs

Shmuela Jacobs Front-end Consultant & Trainer, GDE shmool @ShmuelaJ

DEMO

STATIC COMPONENTS

STATIC COMPONENTS ➤ Used in template ➤ Known in development time ➤ Fixed location ➤ Hard-coded

STATIC COMPONENTS?

STATIC COMPONENTS

IMAGINE...

DYNAMIC COMPONENTS

DYNAMIC COMPONENTS ➤ Added in run time ➤ Load the configuration from the server ➤ Lazy loaded @ViewChild('vc', { read: ViewContainerRef }) vc; constructor(private cfr: ComponentFactoryResolver){} this.components.forEach(component => { this.vc.create(this.cfr.resolveComponentFactory(component)) });

DYNAMIC COMPONENTS ➤ Dashboards

DYNAMIC COMPONENTS ➤ Dashboards ➤ Data-driven forms

DYNAMIC COMPONENTS ➤ Dashboards ➤ Data-driven forms ➤ Popups & Modals

DYNAMIC COMPONENTS ➤ Dashboards ➤ Data-driven forms ➤ Popups & Modals ➤ Content Management Systems ➤ Example: Angular.io

DYNAMIC COMPONENTS ➤ Dashboards ➤ Data-driven forms ➤ Popups & Modals ➤ Content Management Systems ➤ Example: Angular.io ➤ Embedded into foreign components ➤ Example: JointJS (Backbone) Juri Strumpflohner
 Use Dynamic Components to render HTML for 3rd party libraries
 https://juristr.com/blog/2017/11/dynamic-angular-components-for-rendering-html

DYNAMIC COMPONENTS ➤ Dashboards ➤ Data-driven forms ➤ Popups & Modals ➤ Content Management Systems ➤ Example: Angular.io ➤ Embedded into foreign components ➤ Example: JointJS (Backbone) ➤ Plugins ➤ Example: Wizer.Me Maxim NgWizard Koretskyi Modules are not what you think they are

COMPONENT INSTANTIATION NgModule Declarations compile SomeComponent SomeComponent Factory create SomeComponent View DOM Node Component Instance render

COMPONENT INSTANTIATION NgModule Declarations Entry Components compile SomeComponent SomeComponent Factory create SomeComponent View DOM Node Component Instance render this.vc.create( this.cfr.resolveComponentFactory(component)) }); SomeComponent Host Factory

DYNAMIC COMPONENTS ➤ Where is the component inserted? ➤ How is it instantiated? @Component({ template: `` }) export class HomeComponent { @ViewChild('vc', { read: ViewContainerRef }) vc; constructor( private injector: Injector, private cfr: ComponentFactoryResolver) {} addDynamicComponent() { const cmpFactory = this.cfr.resolveComponentFactory(NoteComponent); const componentRef = cmpFactory.create(this.injector); this.vc.insert(componentRef.hostView); }

DYNAMIC COMPONENTS ➤ Where is the component inserted? ➤ How is it instantiated? constructor( private cfr: ComponentFactoryResolver) {} addDynamicComponent() { const cmpFactory = this.cfr.resolveComponentFactory(NoteComponent); // const componentRef = cmpFactory.create(this.injector); // this.vc.insert(componentRef.hostView); this.vc.createComponent(cmpFactory); } @Component({ template: `` }) export class HomeComponent { @ViewChild('vc', { read: ViewContainerRef }) vc;

DYNAMIC COMPONENTS ➤ How to pass inputs? ➤ How to bind to outputs? ➤ Notice: Change detection works, 
 but ngOnChanges will not be called (ngDoCheck will) componentRef.instance.data = this.getData(); componentRef.instance.event.subscribe(console.log)

DYNAMIC COMPONENTS ➤ It's still not 100% dynamic... const cmpFactory = this.cfr.resolveComponentFactory(NoteComponent);

DYNAMIC DYNAMIC COMPONENTS

PLUGIN COMPONENTS

PLUGIN COMPONENTS ➤ Unknown in compile time ➤ Lazy loaded modules constructor( private injector: Injector, private loader: NgModuleFactoryLoader) {} addPlugin() { this.loader.load('path/to/plugin/plugin.module#PluginModule') .then((factory) => { const module = factory.create(this.injector); const cfr = module.componentFactoryResolver; const cmpFactory = cfr.resolveComponentFactory(PluginComponent); this.vc.createComponent(cmpFactory); }); }

PLUGIN COMPONENTS ➤ Build a module separately with Angular CLI - angular.json "projects": { "ng-talks-demo": { ... "architect": { "build": { ... "options": { "lazyModules": [ "path/to/plugin/plugin.module" ], ...

PLUGIN COMPONENTS ➤ Unknown in compile time ➤ Lazy loaded modules constructor( private injector: Injector, private loader: NgModuleFactoryLoader) {} addPlugin() { this.loader.load('path/to/plugin/plugin.module#PluginModule') .then((factory) => { const module = factory.create(this.injector); const cfr = module.componentFactoryResolver; const cmpFactory = cfr.resolveComponentFactory(PluginComponent); this.vc.createComponent(cmpFactory); }); }

PLUGIN COMPONENTS ➤ Use providers! @NgModule({ declarations: [PluginComponent], entryComponents: [PluginComponent], providers: [ { provide: 'widgets', useValue: [ { name: 'plugin-cmp', component: PluginComponent } ], multi: true } ] }) export class PluginModule {}

PLUGIN COMPONENTS ➤ Unknown in compile time ➤ Lazy loaded modules constructor( private injector: Injector, private loader: NgModuleFactoryLoader) {} addPlugin() { this.loader.load('path/to/plugin/plugin.module#PluginModule') .then((factory) => { const module = factory.create(this.injector); const cfr = module.componentFactoryResolver; const widgets = module.injector.get('widgets'); const cmpFactory = cfr.resolveComponentFactory(widgets[0][0].component); this.vc.createComponent(cmpFactory); }); }

DYNAMIC PLUGIN COMPONENTS!

DYNAMIC COMPONENTS - MY RESOURCES ➤ Juri Strumpflohner
 Use Dynamic Components to render HTML for 3rd party libraries
 https://juristr.com/blog/2017/11/dynamic-angular-components-for-rendering-html ➤ Maxim NgWizard Koretskyi ➤ Modules are not what you think they are - UP NEXT! ➤ Here is what you need to know about dynamic components in Angular
 https://blog.angularindepth.com
 ➤ Manfred Steyer 
 Angular Elements Dashboard
 https://github.com/manfredsteyer/angular-elements-dashboard

Thank You! Shmuela Jacobs shmuela@ng-girls.org shmool @ShmuelaJ ng-girls.org