Skip to content

Instantly share code, notes, and snippets.

View KaranPato's full-sized avatar
🏠
Working from home

Karan Patokar KaranPato

🏠
Working from home
View GitHub Profile
@KaranPato
KaranPato / recepi-list.component.html
Created August 23, 2019 04:51
HTML for Recipe list.
<div class="container-fluid">
<div>
<button *ngIf="!isAdd" mat-raised-button color="primary" class="btn-right mt-2" [routerLink]="['/add-update-recepi', 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
KaranPato / app.component.ts
Created August 24, 2019 07:09
Main component .ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularMaterialDemo';
}
@KaranPato
KaranPato / app.module.ts
Created August 24, 2019 07:12
Main module file.
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';
@KaranPato
KaranPato / add-update-recipe.component.ts
Created August 24, 2019 07:16
AddUpdateRecipeComponent .ts file.
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
KaranPato / add-update-recipe.component.html
Created August 24, 2019 07:20
AddUpdateRecipeComponent HTML file.
<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
KaranPato / add-update-recipe.component.css
Created August 24, 2019 07:22
AddUpdateRecipeComponent CSS file.
<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
KaranPato / recipe-list.component.ts
Created August 24, 2019 07:24
RecipeListComponent TS file.
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
KaranPato / recipe-list.component.html
Created August 24, 2019 07:26
RecipeListComponent HTML file.
<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
KaranPato / recipe-list.component.css
Created August 24, 2019 07:28
RecipeListComponent CSS file.
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}
.btn-right{
float: right;
@KaranPato
KaranPato / app-routing.module.ts
Created August 24, 2019 07:32
AppRoutingModule file.
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 }