Cacher is the code snippet organizer for pro developers

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&nbsp;</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>