Categories

1 Answer

Sep 13, 2019

Use of *ngIf directive to change the output conditionally

Example:

component.ts file:

  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-server2',  
  5.   templateUrl: './server2.component.html',  
  6.   styleUrls: ['./server2.component.css']  
  7. })  
  8. export class Server2Component implements OnInit {  
  9.  allowNewServer = false;  
  10.  serverCreationStatus = 'No server is created.';  
  11.   serverName = 'TestServer';  
  12.   serverCreated = false;  
  13.   
  14.   /*constructor() {  
  15.     setTimeout(() =>{  
  16.       this.allowNewServer = true;  
  17.     }, 5000);  
  18.   }*/  
  19.   
  20.   ngOnInit() {  
  21.   }  
  22.   onCreateServer() {  
  23.     this.serverCreated = true;  
  24.     this.serverCreationStatus = 'Server is created. Name of the server is' + this.serverName;  
  25.   }  
  26.   OnUpdateServerName(event: Event) {  
  27.     this.serverName = (<HTMLInputElement>event.target).value;  
  28.   }  
  29. }  

component.html file:

  1. <p>  
  2.   Server2 is also working fine.  
  3. </p>  
  4.   
  5. <label>Server Name</label>  
  6. <!--<input type="text"  
  7.        class="form-control"  
  8.        (input)="OnUpdateServerName($event)">-->  
  9. <input type="text"  
  10.        class="form-control"  
  11. [(ngModel)]="serverName">  
  12. <!--<p>{{serverName}}</p>-->  
  13. <button  
  14.   class="btn btn-primary"  
  15.   [disabled]="allowNewServer"  
  16.   (click)="onCreateServer()">Add Server</button>  
  17. <p *ngIf="serverCreated"> Server is created. Server name is {{serverName}}</p>  

Output:

The output will look like this.

Use of *ngIf directive to change the output conditionally

When we change the input value and click on "Add Server" button, you will see the following result:

Use of *ngIf directive to change the output conditionally

Click here to read more about Angular JS
Click here to read more about Insurance

Related questions

Madanswer
Sep 13, 2019 in Angular
Sep 13, 2019 in Angular
Sep 13, 2019 in Angular
...