import { Component } from '@angular/core'

@Component({
	selector: 'app-root',
  	templateUrl: './app.component.html'
})

export class AppComponent {

  courses = [
    {id:1, name:'Course 1'},
    {id:2, name:'Course 2'},
    {id:3, name:'Course 3'}
  ]

  viewMode = 'map';

  canSave = true;

  onAdd() {
  	this.courses.push({id:4, name:'Courses 4'});
  }

  onRemove(course) {
  	let index = this.courses.indexOf(course);
    this.courses.splice(index, 1);
  }

  loadCourses () {
  	this.courses.push({id:4, name:'Course 4'});
  }

  // for better performace
  trackCourses(index, course) {
  	return course ? course.id : undefined;
  }
}