*ngIf Directive
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class ServersComponent implements OnInit {
serverCreationStatus = 'No server created!';
serverName = '';
serverCreated = false;
constructor() {
}
ngOnInit() {
}
onCreateServer() {
this.serverCreated = true;
this.serverCreationStatus = 'Server was created with the name of ' + this.serverName;
}
}
<br>
<div class="form-inline">
<label>Server Name </label>
<input
type="text"
class="form-control"
[(ngModel)]="serverName">
<button class="btn btn-primary"
(click)="onCreateServer()">Add Server</button>
</div>
<hr>
<div *ngIf="serverCreated" class="alert alert-success">
<p> {{ serverCreationStatus }} </p>
</div>
<div *ngIf="!serverCreated" class="alert alert-warning">
<p> No server created. </p>
</div>