Sep 13, 2019 in Angular
Q: angular 7 ngif directive

1 Answer

0 votes
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

0 votes
Sep 13, 2019 in Angular
...