Use of *ngIf directive to change the output conditionally
Example:
component.ts file:
- import { Component, OnInit } from '@angular/core';
-
- @Component({
- selector: 'app-server2',
- templateUrl: './server2.component.html',
- styleUrls: ['./server2.component.css']
- })
- export class Server2Component implements OnInit {
- allowNewServer = false;
- serverCreationStatus = 'No server is created.';
- serverName = 'TestServer';
- serverCreated = false;
-
- /*constructor() {
- setTimeout(() =>{
- this.allowNewServer = true;
- }, 5000);
- }*/
-
- ngOnInit() {
- }
- onCreateServer() {
- this.serverCreated = true;
- this.serverCreationStatus = 'Server is created. Name of the server is' + this.serverName;
- }
- OnUpdateServerName(event: Event) {
- this.serverName = (<HTMLInputElement>event.target).value;
- }
- }
component.html file:
- <p>
- Server2 is also working fine.
- </p>
-
- <label>Server Name</label>
- <!--<input type="text"
- class="form-control"
- (input)="OnUpdateServerName($event)">-->
- <input type="text"
- class="form-control"
- [(ngModel)]="serverName">
- <!--<p>{{serverName}}</p>-->
- <button
- class="btn btn-primary"
- [disabled]="allowNewServer"
- (click)="onCreateServer()">Add Server</button>
- <p *ngIf="serverCreated"> Server is created. Server name is {{serverName}}</p>
Output:
The output will look like this.
When we change the input value and click on "Add Server" button, you will see the following result: