[Angular] Configurable Angular Components - Content Projection and Input Templates
We are going to have a modal component:
<au-modal > </au-modal>
And we can pass default modal body by content projection:
<au-modal > <modal-body></modaö-body> </au-modal>
So 'modal-body' will be shown by default.
Now we want to modal body can be configurable. We can choose to pass in a new template thought @Input, if template was passed in then use template instead of 'modal-body':
<ng-template #newModalBody> <!-- template goes here--> </ng-template> <au-modal [body]="newModalBody"> <au-modal-body></au-modal-body> </au-modal>
To do that, we defined a 'ng-template' and mark it as 'newModalBody' templateRef. It contians ours new template. And we can pass the template thought @Input.
So in the au-modal, it defines:
import {Component, Input, OnInit, TemplateRef} from '@angular/core'; @Component({ selector: 'au-modal', templateUrl: './au-modal.component.html', styleUrls: ['./au-modal.component.scss'] }) export class AuModalComponent implements OnInit { @Input() body: TemplateRef<any>; constructor() { } ngOnInit() { } }
In the component html, we need to check whether we pass in the template or not, if new template is present then we use it, otherwise, we fallback to default content projection:
<div class="modal-overlay"> <div class="modal-body"> <ng-container *ngIf="body else projectionBody"> <ng-container *ngTemplateOutlet="body"></ng-container> </ng-container> <ng-template #projectionBody> <ng-content></ng-content> </ng-template> </div> </div>
The reason here we use two ng-container is because, for one ng-container can only have one structure directive (*ngIf or *ngTeplateOutlet).
相关文章
- [ngx-formly] Use 3rd party Form Controls with Angular Formly / Custom type
- [Angular] N things you might don't know about Angular Route
- [Angular] Reactive Store and AngularFire Observables
- [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe
- [Angular] Testing @Input and @Output bindings
- [Angular] Zones and NgZone
- [Angular] Create custom validators for formControl and formGroup
- [Angular] Dynamic component's instance and sorting
- [Angular] @ContentChild and ngAfterContentInit
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
- [Angular 2] ng-model and ng-for with Select and Option elements
- [Angular] Directive. 1
- [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional
- [Angular] New async 'as' syntax and ngIf.. else
- [Angular] Configurable Angular Components - Content Projection and Input Templates
- [Angular] Dynamic component's instance and sorting
- [Angular] @ViewChild and template #refs to get Element Ref
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular2 Form] Create and Submit an Angular 2 Form using ngForm
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 2] Handling Clicks and Intervals Together with Merge
- [Angular 2] Get start with Firebase
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- [Angular 2] Pipes with Multiple Parameters
- Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
- Angular Ngrx Store Effect 和 Action 的交互流程
- SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
- Angular应用的angular.json文件字段一览
- Angular和jQuery的ajax请求的差别