[angular] template projection on angular(ng-content vs ng-container)

@Component({
selector: 'zoo-app',
template: `
<h1>Kelly's zoo</h1>
<zoo-content></zoo-content>
<zoo-container></zoo-container>
`,
})
export class ZooAppComponent implements AfterViewInit {
showTheGuest = false;
}// zoo content
@Component({
selector: 'zoo-content',
template: `
<dl>
<dt>zoo content</dt>
<dd>
<ng-content select="[guest]"></ng-content>
</dd>
</dl>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZooContentComponent {
}
// zoo container
@Component({
selector: 'zoo-container',
template: `
<dl>
<dt>zoo container</dt>
<dd>
<ng-container *ngTemplateOutlet="guest"></ng-container>
</dd>
</dl>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZooContainerComponent implements AfterViewInit {
@ContentChild('guest') guest: TemplateRef<any>;
}
@Component({
selector: 'zoo-app',
template: `
<h1>Kelly's zoo</h1>
<zoo-content>
<zoo-ryan guest [show]="showTheGuest"></zoo-ryan>
</zoo-content>
<zoo-container>
<ng-template #guest>
<zoo-ryan [show]="showTheGuest"></zoo-ryan>
</ng-template>
</zoo-container>
`,
})
export class ZooAppComponent implements AfterViewInit {
showTheGuest = false;
}
// zoo-app component
ngAfterViewInit(){
setTimeout(()=> this.showTheGuest = true, 5000);
}
constructor(private cdr: ChangeDetectorRef) {}ngAfterViewInit(){
this.cdr.detach();
}
// zoo content
@Component({
selector: 'zoo-content',
template: `
<dl>
<dt>zoo content</dt>
<dd>
<ng-content select="[guest]"></ng-content>
</dd>
<dd>
<ng-content select="[guest]"></ng-content>
</dd>
<dd>
<ng-content select="[guest]"></ng-content>
</dd>
</dl>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZooContentComponent {
}
// zoo container
@Component({
selector: 'zoo-container',
template: `
<dl>
<dt>zoo container</dt>
<dd>
<ng-container *ngTemplateOutlet="guest"></ng-container>
</dd>
<dd>
<ng-container *ngTemplateOutlet="guest"></ng-container>
</dd>
<dd>
<ng-container *ngTemplateOutlet="guest"></ng-container>
</dd>
</dl>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZooContainerComponent implements AfterViewInit {
@ContentChild('guest') guest: TemplateRef<any>;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store