RecipeListComponent TS file.

recipe-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MainService } from '../../common/services/main.service';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {

  dataSource: any;
  isAdd: boolean = false;
  isEdit: boolean = false;
  submitted: boolean = false;
  model: any;
  isLoading: boolean = false;

  constructor(private mainService: MainService) { }

  ngOnInit() {
    this.GetRecipes();
  }

  GetRecipes() {

    this.mainService.GetRecipes().subscribe((data: any) => {
      this.dataSource = data.content;
      console.log(this.dataSource);
    },
      (err: HttpErrorResponse) => {
        console.log(err);
      });
  }

  DeleteRecepi(Id: number) {
    if (Id > 0) {
      this.mainService.DeleteRecepi(Id).subscribe((data: any) => {
        if (data.isSuccess) {
          this.GetRecipes();
          alert(data.message);
          console.log(data.message);
        }
        else {
          alert(data.message);
          console.log(data.message);
        }
      }, (err: HttpErrorResponse) => {
        console.log(err);
      });
    }
  }

}