KaranPato

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

var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });

@Injectable({
  providedIn: 'root'
})
export class MainService {
  //Add your API path here.

KaranPato

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatButtonModule, MatCardModule, MatDialogModule, MatInputModule, MatTableModule, MatProgressBarModule,
  MatToolbarModule, MatMenuModule, MatIconModule, MatProgressSpinnerModule, MatFormFieldModule, MatGridListModule
} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,

KaranPato

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { AddUpdateRecipeComponent } from './components/add-update-recipe/add-update-recipe.component';
import { RecipeListComponent } from './components/recipe-list/recipe-list.component';

const routes: Routes = [
  { path: 'recipe-list', component: RecipeListComponent },
  { path: '', redirectTo: 'recipe-list', pathMatch: 'full' },
  { path: 'add-update-recipe/:id', component: AddUpdateRecipeComponent }

KaranPato

.example-container {
    display: flex;
    flex-direction: column;
  }
  
  .example-container > * {
    width: 100%;
  }
  .btn-right{
      float: right;

KaranPato

<div class="container-fluid">
  <div>
    <button *ngIf="!isAdd" mat-raised-button color="primary" class="btn-right mt-2" [routerLink]="['/add-update-recipe', 0]" >Add Recipe</button>
  </div>
  <div class="container">
    <mat-grid-list cols="3" rowHeight="500px">
      <mat-grid-tile *ngFor="let data of dataSource">
        <div class="container">
          <mat-card class="example-card">
            <mat-card-header>

KaranPato

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']
})

KaranPato

<div>
  <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading">
  </mat-progress-bar>

  <div class="container text-center">
    <form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
      <mat-card class="example-card">
        <mat-card-header>
          <h3>{{isAdd == true ? 'Add Recepi' : 'Update Recepi'}}</h3>
        </mat-card-header>

KaranPato

<div>
  <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading">
  </mat-progress-bar>

  <div class="container text-center">
    <form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
      <mat-card class="example-card">
        <mat-card-header>
          <h3>{{isAdd == true ? 'Add Recepi' : 'Update Recepi'}}</h3>
        </mat-card-header>

KaranPato

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { MainService } from 'src/app/common/services/main.service';
import { HttpErrorResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-add-update-recipe',
  templateUrl: './add-update-recipe.component.html',
  styleUrls: ['./add-update-recipe.component.css']

KaranPato

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CustomMaterialModuleModule } from './common/custom-material-module/custom-material-module.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { RecipeListComponent } from './components/recipe-list/recipe-list.component';