app.component.ts

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

import {Cluster, ClusterService} from "./cluster.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .delete { background-color: darkred; color: #fff}
    .detail { background-color: coral; color: #fff}
    .add { background-color: greenyellow; color: #fff;}
    .update { background-color: deeppink; color: #fff;}
  `]
})
export class AppComponent implements OnInit {
  clusters: Cluster[];

  constructor(
    private clusterService: ClusterService
  ) {}

  ngOnInit() {
    this.allClusters();
  }

  allClusters(): void {
    this.clusterService.getClusters()
      .subscribe(clusters => {
        this.clusters = clusters;
      });
  }

  delete(cluster: Cluster): void {
    this.clusters = this.clusters.filter(h => h !== cluster);
    this.clusterService.deleteCluster(cluster).subscribe();
  }

  detail(cluster: Cluster): void {
    this.clusterService.getClusterNo404(cluster.id).subscribe(data => {
      
    });
  }

  add(): void {
    let cluster: Cluster = {
      id: 100,
      ext_id: 200,
      name: 'nuevo cluster'
    };
    this.clusterService.addCluster(cluster).subscribe(response => {
      this.clusters.push(cluster);
    })
  }

  update(cluster: Cluster): void {
    cluster.name = 'random';
    this.clusterService.updateCluster(cluster).subscribe(response => {
      
    })
  }
}