Cacher is the code snippet organizer for pro developers

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  // template: `<app-server></app-server>`,
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  allowNewServer = false;
  serverCreationStatus = 'no server created';
  serverName = 'blankServer';
  serverCreated = false;
  servers = ['test1', 'test2'];

  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 2000);
  }

  ngOnInit(): void {
  }

  onCreateServer() {
    this.serverCreationStatus = 'server created: ' + this.serverName;
    this.servers.push(this.serverName);
    this.serverCreated = true;
  }

  onUpdateServerName(event: any) {
    console.log(event);
    this.serverName = event.target.value;
  }

}

<p>app-servers works!</p>
<!-- <input type='text' class='form-control' (input)='onUpdateServerName($event)'> -->
<input type='text' class='form-control' [(ngModel)]='serverName'>
<button 
    class='btn btn-primary' 
    [disabled]='!allowNewServer' 
    (click)='onCreateServer()'>add server</button>
<!-- <p>{{ serverCreationStatus }}</p> -->
<p *ngIf='serverCreated; else noServer'>server created: {{ serverName }}</p>
<ng-template #noServer>
    <p>no server created</p>
</ng-template>
<!-- <p>{{ serverName }}</p> -->
<!-- <app-server></app-server>
<app-server></app-server> -->
<app-server *ngFor='let x of servers'></app-server>

import { Component } from '@angular/core';

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    styles: [`
        .online {
            color: white;
        }
    `]
})

export class ServerComponent {
    serverId = 69;
    serverStatus = 'offline';

    constructor() {
        this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';
    }

    getServerStatus() {
        return this.serverStatus;
    }

    getColor() {
        return this.serverStatus === 'online' ? 'green' : 'red';
    }
}

<p [ngStyle]="{'background-color': getColor()}" [ngClass]="{online: serverStatus === 'online'}">server component: {{ serverId }} is {{ serverStatus }}</p>

<div class='container'>
  <div class='row'>
    <div class='col-xs-12'>
      <h3>AppComponent Main page</h3>
      <hr>
      <!-- <input type='text' [(ngModel)]='name'>
      <p>{{ name }}</p> -->
      <app-servers></app-servers>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'faggot name';
}