import { Component, OnInit } from '@angular/core';
import { RockBand } from './services/rock-bands.service';

@Component({
	selector: 'app-root',
	template: `
  <h2>List of Rock Bands that rocks!: </h2>
<ul>
  <li *ngFor="let rockBand of rockBands">
	  {{rockBand.id}} - {{rockBand.name}}
  </li>
</ul>
  `,
	styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
	rockBands: RockBand[];

	constructor(private rockBandService: RockBand) {}

	ngOnInit() {
		this.getRockBands();
	}

	getRockBands() {
		this.rockBandService.getRockBands()
		.subscribe((response) => {
			this.rockBands = response;
		});
	}
}