Блог

 import { Component, OnInit } from '@angular/core';
import { CoursesService } from '../shared/services/courses.service';


@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})


export class CoursesComponent implements OnInit {
  
  constructor(private coursesService: CoursesService) { }

  ngOnInit(): void {

    this.resetCurrentCourse();
    this.coursesService.all().subscribe(courses=> this.courses=courses);
    
  }
  currentCourse=null;
  courses=null;

  resetCurrentCourse(){
    const emptyCourse={
      id: null,
      title: '',
      description: '',
      percentComplete: 0,
      favourite: false
    }

    this.currentCourse= emptyCourse;
    
  }

  courseselecter(course){
      console.log("event fired" course.title);
      this.currentCourse=course;

  }

  loadCourses(){
    this.coursesService.all().subscribe(courses => this.courses = courses);
  }

  cancel(){
    this.resetCurrentCourse();
  }

  saveCourse(course){
    if(course.id){
      this.coursesService.update(course);
    }else{
      this.coursesService.create(course).subscribe(result=> this.loadCourses());
    }
  }

  deleteCourse(course){
    console.log("delete action fired");
    // this.currentCourse
  }

}  

 import { HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';



const BASE_URL='http://localhost:3000/';

@Injectable({
  providedIn: 'root'
})
export class CoursesService {

  private model='courses';

  constructor(private http: HttpClient) { }

  courses=[
    {
      id:1,
      title:'Angular 9 Fundamentals',
      description: 'Learn the Fundamentals of Angualar',
      percentComplete:26,
      favourite: true
    },

    {
      id:2,
      title:'javascript really hard parts',
      description: 'learn the javascript',
      percentComplete: 50,
      favourite: true
    }
  ];
  
  
  all(){
    return this.http.get(`${BASE_URL}${this.model}`);
  }

  create(course){
    return this.http.post(this.geturl(),course);
  }

  update(course){
    console.log("Update course:",course);
  }

  private geturl(){
    return `${BASE_URL}${this.model}`;
  }

}