首页 > 代码库 > [Angular] Learn How To Use ng-template Inputs
[Angular] Learn How To Use ng-template Inputs
For example, we have a modal component, it can config that using ng-template as a configurable template.
<ng-template #auModalBody></ng-template><au-modal [body]="auModalBody" ></au-modal>
Now what we want to do is to pass in inputs to ng-templates so that template can change dynamiclly according to the inputs.
For example:
<ng-template #auModalBody let-title="title" <!-- define a title prop --> let-tabActivated=loginTabActivated <!-- define a tabActivated prop -->> <!-- we can use ‘title‘ & ‘tabActivated‘ props here --> <h2>{{title}}</h2> <tab [selected]="tabActivated" #login /> <tab [selected]="!tabActivated" #signUp /></ng-template><au-modal [body]="auModalBody" [context]="{ title: ‘Login or Sign up‘, tabActivated: loginTabActivated <!-- based on those variables we passed in-->}"></au-modal>
To do that, we need to add an @Input to au-modal component:
@Input() context: any; <ng-container *ngIf="body; else projectionBody"> <ng-container *ngTemplateOutlet="body; context:context" ></ng-container> </ng-container>
See the commit: Github
[Angular] Learn How To Use ng-template Inputs
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。