Category: Software Development

The ng-template Directive Like the name specify, the ng-template directive describes an Angular template. This means that the content of this tag will carry part of a template, that can then be controlled together with other templates to form the final component template.The Angular framework is already using ng-template under the hood in many of the structural directives that we use many times in angular project:  ngIf, ngFor and ngSwitch. Now, we started learning ng-template with an example. And here we are defining two tab buttons login and signup: @Component({ selector: 'app-root', template: ` <ng-template> <button class="tab-button" (click)="login()">{{loginMsg}}</button> <button class="tab-button" (click)="signUp()">{{signUpMsg}}</button> </ng-template> `}) export class AppComponent { loginMsg = 'Login Page'; signUpMsg = 'Sign Up Page'; lesson = ['Lesson 1', 'Lessons 2']; login() { console.log('Login Page'); } signUp() { console.log('Sign Up Page'); }…