This post briefly demonstrates how to create an if-else statement in HTML using Angular ngIf-else with ng-template.
Stuff Used
We are going to use the following items for this post.
- Angular 9
- Nodejs 12.16.3
- WebStorm – Optional
Create an Angular Project
Since this is just a brief post, here are the quick commands to create an Angular project and components before we can implement the if-else statement with ng-template. This post assumes that we already installed node and Angular CLI. On the command-line prompt window, run the following command that creates an Angular project.
1 | ng new angular-demo |
The command generates the following output, and we need to choose some options along the way.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | C:\Users\karldev\Desktop\dev\blogs\angular>ng new angular-demo ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS CREATE angular-demo/angular.json (3614 bytes) CREATE angular-demo/package.json (1245 bytes) CREATE angular-demo/README.md (1028 bytes) CREATE angular-demo/tsconfig.json (489 bytes) CREATE angular-demo/tslint.json (3125 bytes) CREATE angular-demo/.editorconfig (274 bytes) CREATE angular-demo/.gitignore (631 bytes) CREATE angular-demo/browserslist (429 bytes) CREATE angular-demo/karma.conf.js (1024 bytes) CREATE angular-demo/tsconfig.app.json (210 bytes) CREATE angular-demo/tsconfig.spec.json (270 bytes) ... CREATE angular-demo/e2e/protractor.conf.js (808 bytes) CREATE angular-demo/e2e/tsconfig.json (214 bytes) CREATE angular-demo/e2e/src/app.e2e-spec.ts (645 bytes) CREATE angular-demo/e2e/src/app.po.ts (301 bytes) √ Packages installed successfully. |
Then, we change the current directory to the angular-demo folder and run the npm install command.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | C:\Users\karldev\Desktop\dev\blogs\angular>cd angular-demo C:\Users\karldev\Desktop\dev\blogs\angular\angular-demo>npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) audited 1448 packages in 9.007s 57 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
At this point, we are almost ready to code. Finally, let us create a component using the following command.
1 | ng generate component Servers |
The command will generate the following output.
1 2 3 4 5 6 | C:\Users\karldev\Desktop\dev\blogs\angular\angular-demo>ng generate component Servers CREATE src/app/servers/servers.component.html (22 bytes) CREATE src/app/servers/servers.component.spec.ts (635 bytes) CREATE src/app/servers/servers.component.ts (279 bytes) CREATE src/app/servers/servers.component.css (0 bytes) UPDATE src/app/app.module.ts (579 bytes) |
Angular Component Codes
Initially, we set serverName to an empty string and use $event to get the value from the user as he types in some texts.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-servers', templateUrl: './servers.component.html', styleUrls: ['./servers.component.css'] }) export class ServersComponent implements OnInit { serverName = ''; constructor() { } ngOnInit(): void { } onUpdateServerName(event: Event) { this.serverName = (<HTMLInputElement>event.target).value; } } |
Moreover, we have the function onUpdateServerName, which is triggered by an event in the HTML.
HTML Codes Using ngIf-else With ng-template
Now, let us look at the HTML file servers.component.html that we generated together with our component. We use the (input) event with onUpdateServerName($event) . The if-else statement is on line 3, but with the display for else refers to an ng-template element with a unique identifier of noServer. Therefore, the else statement on line 3 will trigger the ng-template to display.
1 2 3 4 5 6 7 8 9 | <input type="text" class="form-control" (input)="onUpdateServerName($event)"> <div *ngIf="serverName!=''; else noServer"> <p>{{serverName}}</p> </div> <ng-template #noServer> <p>Please type in server name</p> </ng-template> |
Lastly, we need to use the component’s selector in the app.component.html to test the Angular ngIf-else with ng-template. So, let us replace its content with the following codes.
1 | <app-servers></app-servers> |
Demo ngIf-else With ng-template
Finally, we start up the Angular application using the following command.
1 | ng serve |
The command generates the following output.
1 2 3 4 5 6 7 8 9 | Compiling @angular/core : es2015 as esm2015 Compiling @angular/animations : es2015 as esm2015 Compiling @angular/compiler/testing : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015 ... chunk {main} main.js, main.js.map (main) 64.2 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered] Time: 2642ms : Compiled successfully. |
Then, head to http://localhost:4200.
At this point, we successfully used Angular ngIf-else with ng-template.
This is now part of the Easy Angular Tutorial.