[Angular] Create dynamic content with <tempalte>

To create a dynamic template, we need to a entry component as a placeholder. Then we can use entry component to create a new Tamplete into it.

import { Component, TemplateRef, ComponentRef, ViewContainerRef, ViewChild, AfterContentInit, ComponentFactoryResolver } from '@angular/core';

import { AuthFormComponent } from './auth-form/auth-form.component';

import { User } from './auth-form/auth-form.interface';

@Component({

  selector: 'app-root',

  template: `

    <div>

      <div #entry></div>

      <template #tmpl let-obj let-location="location">

          <details>

            <summary>{{obj.name}}</summary>

            <p> - Age: {{obj.age}}</p>

            <p> - Address :{{location}}</p>

          </details>

      </template>

    </div>

  `

})

export class AppComponent implements AfterContentInit {

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

  @ViewChild('tmpl') tmpl: TemplateRef<any>

  ngAfterContentInit() {

    this.entry.createEmbeddedView(this.tmpl, {

      $implicit: {

        name: 'Zhentian',

        age: 27

      },

      location: 'China'

    })

  }

}

As we can see, we defined:

let-obj let-location="location"

let-obj: because nothing is assigned to 'let-obj', it means it will show all the $implicit value we defined in when we 'createEmbeddedView' as a second arguement.

If we open dev tools, we can see there is a '<div></div>' placeholder was created and the template we created is actually not inject into the placeholder div block, it is below placeholder.

巴特西

[Angular] Create dynamic content with <tempalte>

最新文章

热门文章