首页 > 代码库 > [Angular] Using ngTemplateOutlet to create dynamic template
[Angular] Using ngTemplateOutlet to create dynamic template
I can use <tamplete> syntax and a entry component as a container to create a dynamic component. Notice it will create a empty div as a placeholder in the DOM. If we don‘t wanner this empty div, we can actually using ng-conainer together with ngTemplateOutlet (for template ref) and ngTemplateOutletContext (the context).
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> <hr /> <ng-container [ngTemplateOutlet]="tmpl" [ngTemplateOutletContext]="ctx" ></ng-container> </div> `})export class AppComponent implements AfterContentInit { @ViewChild(‘entry‘, { read: ViewContainerRef }) entry: ViewContainerRef; @ViewChild(‘tmpl‘) tmpl: TemplateRef<any>; ctx = { $implicit: { name: ‘John‘, age: 34 }, location: ‘USA‘ } ngAfterContentInit() { this.entry.createEmbeddedView(this.tmpl, { $implicit: { name: ‘Zhentian‘, age: 27 }, location: ‘China‘ }) }}
And in the generated DOM we can see that there is no empty div created.
[Angular] Using ngTemplateOutlet to create dynamic template
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。