docs(cb-dynamic-component-loading): add dynamic component loading cookbook (#2896)

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

Author: thelgevold

public/docs/_examples/cb-dynamic-component-loader/e2e-spec.ts

@@ -0,0 +1,21 @@
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('Dynamic Component Loader', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should load ad banner', function () {
+    let headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
+    let name = element(by.xpath("//h3[text()='Bombasto']"));
+    let bio = element(by.xpath("//p[text()='Brave as they come']"));
+
+    expect(name).toBeDefined();
+    expect(headline).toBeDefined();
+    expect(bio).toBeDefined();
+  });
+});

public/docs/_examples/cb-dynamic-component-loader/ts/app/ad-banner.component.ts

@@ -0,0 +1,55 @@
+// #docregion
+import { Component, Input, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
+
+import { AdDirective } from './ad.directive';
+import { AdItem }      from './ad-item';
+import { AdComponent } from './ad.component';
+
+@Component({
+  selector: 'add-banner',
+  // #docregion ad-host
+  template: `
+              <div class="ad-banner">
+                <h3>Advertisements</h3>
+                <template ad-host></template>
+              </div>
+            `
+  // #enddocregion ad-host          
+})
+export class AdBannerComponent implements AfterViewInit, OnDestroy {
+  @Input() ads: AdItem[];
+  currentAddIndex: number = -1;
+  @ViewChild(AdDirective) adHost: AdDirective;
+  subscription: any;
+  interval: any;
+
+  constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngAfterViewInit() {
+    this.loadComponent();
+    this.getAds();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  loadComponent() {
+    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
+    let adItem = this.ads[this.currentAddIndex];
+
+    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
+
+    let viewContainerRef = this.adHost.viewContainerRef;
+    viewContainerRef.clear();
+
+    let componentRef = viewContainerRef.createComponent(componentFactory);
+    (<AdComponent>componentRef.instance).data = adItem.data;
+  }
+
+  getAds() {
+    this.interval = setInterval(() => {
+      this.loadComponent();
+    }, 3000);
+  }
+}

public/docs/_examples/cb-dynamic-component-loader/ts/app/ad-item.ts

@@ -0,0 +1,6 @@
+// #docregion
+import { Type } from '@angular/core';
+
+export class AdItem {
+  constructor(public component: Type<any>, public data: any) {}
+}

public/docs/_examples/cb-dynamic-component-loader/ts/app/ad.component.ts

@@ -0,0 +1,4 @@
+// #docregion
+export interface AdComponent {
+  data: any;
+}

public/docs/_examples/cb-dynamic-component-loader/ts/app/ad.directive.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[ad-host]',
+})
+export class AdDirective {
+  constructor(public viewContainerRef: ViewContainerRef) { }
+}
+

public/docs/_examples/cb-dynamic-component-loader/ts/app/ad.service.ts

@@ -0,0 +1,23 @@
+// #docregion
+import { Injectable }           from '@angular/core';
+
+import { HeroJobAdComponent }   from './hero-job-ad.component';
+import { HeroProfileComponent } from './hero-profile.component';
+import { AdItem }               from './ad-item';
+
+@Injectable()
+export class AdService {
+  getAds() {
+    return [
+      new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
+
+      new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
+
+      new AdItem(HeroJobAdComponent,   {headline: 'Hiring for several positions',
+                                        body: 'Submit your resume today!'}),
+
+      new AdItem(HeroJobAdComponent,   {headline: 'Openings in all departments',
+                                        body: 'Apply today'}),
+    ];
+  }
+}

public/docs/_examples/cb-dynamic-component-loader/ts/app/app.component.ts

@@ -0,0 +1,24 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { AdService }         from './ad.service';
+import { AdItem }            from './ad-item';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div>
+      <add-banner [ads]="ads"></add-banner>
+    </div>
+  `
+})
+export class AppComponent implements OnInit {
+  ads: AdItem[];
+
+  constructor(private adService: AdService) {}
+
+  ngOnInit() {
+    this.ads = this.adService.getAds();
+  }
+}
+

public/docs/_examples/cb-dynamic-component-loader/ts/app/app.module.ts

@@ -0,0 +1,27 @@
+// #docregion
+import { BrowserModule }        from '@angular/platform-browser';
+import { NgModule }             from '@angular/core';
+import { AppComponent }         from './app.component';
+import { HeroJobAdComponent }   from './hero-job-ad.component';
+import { AdBannerComponent }    from './ad-banner.component';
+import { HeroProfileComponent } from './hero-profile.component';
+import { AdDirective }          from './ad.directive';
+import { AdService }            from './ad.service';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [AdService],
+  declarations: [ AppComponent,
+                  AdBannerComponent,
+                  HeroJobAdComponent,
+                  HeroProfileComponent,
+                  AdDirective ],
+  // #docregion entry-components
+  entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
+  // #enddocregion entry-components
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+  constructor() {}
+}
+

public/docs/_examples/cb-dynamic-component-loader/ts/app/hero-job-ad.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { AdComponent }      from './ad.component';
+
+@Component({
+  template: `
+    <div class="job-ad">
+      <h4>{{data.headline}}</h4> 
+      
+      {{data.body}}
+    </div>
+  `
+})
+export class HeroJobAdComponent implements AdComponent {
+  @Input() data: any;
+
+}
+

public/docs/_examples/cb-dynamic-component-loader/ts/app/hero-profile.component.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Component, Input }  from '@angular/core';
+
+import { AdComponent }       from './ad.component';
+
+@Component({
+  template: `
+    <div class="hero-profile">
+      <h3>Featured Hero Profile</h3>
+      <h4>{{data.name}}</h4>
+      
+      <p>{{data.bio}}</p>
+
+      <strong>Hire this hero today!</strong>
+    </div>
+  `
+})
+export class HeroProfileComponent implements AdComponent {
+  @Input() data: any;
+}
+
+