Skip to content

Instantly share code, notes, and snippets.

@jhades
Last active July 22, 2022 13:48
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save jhades/0f1abb3c55cf772043ed26d9c6a50a8a to your computer and use it in GitHub Desktop.
Save jhades/0f1abb3c55cf772043ed26d9c6a50a8a to your computer and use it in GitHub Desktop.
ng-template, ng-container and ngTemplateOutlet examples
@Component({
selector: 'app-root',
template: `
<ng-template>
<button class="tab-button"
(click)="login()">{{loginText}}</button>
<button class="tab-button"
(click)="signUp()">{{signUpText}}</button>
</ng-template>
`})
export class AppComponent {
loginText = 'Login';
signUpText = 'Sign Up';
lessons = ['Lesson 1', 'Lessons 2'];
login() {
console.log('Login');
}
signUp() {
console.log('Sign Up');
}
}
<div class="lessons-list" *ngIf="lessons else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>
<ng-template [ngIf]="lessons" [ngIfElse]="loading">
<div class="lessons-list">
...
</div>
</ng-template>
<ng-template #loading>
<div>Loading...</div>
</ng-template>
<div class="lesson" *ngIf="lessons"
*ngFor="let lesson of lessons">
<div class="lesson-detail">
{{lesson | json}}
</div>
</div>
<div *ngIf="lessons">
<div class="lesson" *ngFor="let lesson of lessons">
<div class="lesson-detail">
{{lesson | json}}
</div>
</div>
</div>
<ng-container *ngIf="lessons">
<div class="lesson" *ngFor="let lesson of lessons">
<div class="lesson-detail">
{{lesson | json}}
</div>
</div>
</ng-container>
<ng-container *ngTemplateOutlet="loading"></ng-container>
@Component({
selector: 'app-root',
template: `
<ng-template #estimateTemplate let-lessonsCounter="estimate">
<div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container
*ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>
`})
export class AppComponent {
totalEstimate = 10;
ctx = {estimate: this.totalEstimate};
}
@Component({
selector: 'app-root',
template: `
<ng-template #defaultTabButtons>
<button class="tab-button" (click)="login()">
{{loginText}}
</button>
<button class="tab-button" (click)="signUp()">
{{signUpText}}
</button>
</ng-template>
`})
export class AppComponent implements OnInit {
@ViewChild('defaultTabButtons')
private defaultTabButtonsTpl: TemplateRef<any>;
ngOnInit() {
console.log(this.defaultTabButtonsTpl);
}
}
@Component({
selector: 'app-root',
template: `
<ng-template #customTabButtons>
<div class="custom-class">
<button class="tab-button" (click)="login()">
{{loginText}}
</button>
<button class="tab-button" (click)="signUp()">
{{signUpText}}
</button>
</div>
</ng-template>
<tab-container [headerTemplate]="customTabButtons"></tab-container>
`})
export class AppComponent implements OnInit {
}
@Component({
selector: 'tab-container',
template: `
<ng-template #defaultTabButtons>
<div class="default-tab-buttons">
...
</div>
</ng-template>
<ng-container
*ngTemplateOutlet="headerTemplate ? headerTemplate: defaultTabButtons">
</ng-container>
... rest of tab container component ...
`})
export class TabContainerComponent {
@Input()
headerTemplate: TemplateRef<any>;
}
@fetis
Copy link

fetis commented Mar 25, 2019

there's a semicolon missed in 2.ts, it should be
<div class="lessons-list" *ngIf="lessons; else loading">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment