Skip to content

Instantly share code, notes, and snippets.

@pietmichal

pietmichal/ContentProjection.ts

Last active March 30, 2017 22:03
Show Gist options
  • Save pietmichal/d0567a4341d4e77cf9c5e32f3a98ab02 to your computer and use it in GitHub Desktop.
Save pietmichal/d0567a4341d4e77cf9c5e32f3a98ab02 to your computer and use it in GitHub Desktop.
Download ZIP
Angular 2.x - Template Outlet vs Content Projection
Raw
ContentProjection.ts
@Component({
selector: 'app',
template: `
<h1>Angular's content projection and lifecycle example</h1>
<app-content>
<app-nested-component></app-nested-component>
</app-content>
`,
})
export class App {}
@Component({
selector: 'app-content',
template: `
<button (click)="display = !display">Toggle content</button>
<ng-content *ngIf="display"></ng-content>
`,
})
export class Content {
display = false;
}
@Component({
selector: 'app-nested-component',
template: `<b>Hello World!</b>`,
})
export class NestedComponent implements OnDestroy, OnInit {
ngOnInit() {
alert('app-nested-component initialised!');
}
ngOnDestroy() {
alert('app-nested-component destroyed!');
}
}
Raw
TemplateOutlet.ts
@Component({
selector: 'app',
template: `
<h1>Angular's template outlet and lifecycle example</h1>
<app-content [templateRef]="nestedComponentRef"></app-content>
<template #nestedComponentRef>
<app-nested-component></app-nested-component>
</template>
`,
})
export class App {}
@Component({
selector: 'app-content',
template: `
<button (click)="display = !display">Toggle content</button>
<template
*ngIf="display"
[ngTemplateOutlet]="templateRef">
</template>
`,
})
export class Content {
display = false;
@Input() templateRef: TemplateRef;
}
@Component({
selector: 'app-nested-component',
template: `
<b>Hello World!</b>
`,
})
export class NestedComponent implements OnDestroy, OnInit {
ngOnInit() {
alert('app-nested-component initialized!');
}
ngOnDestroy() {
alert('app-nested-component destroyed!');
}
}
Raw
TemplateOutletExample.html
<template [ngTemplateOutlet]="exampleTemplateRef"></template>
<template #exampleTemplateRef>
<b>Example template<b>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment