NeelBhatt

<div class="grid-container">  
  <h1 class="mat-h1">Dashboard</h1>  
  <mat-grid-list cols="2" rowHeight="350px">  
    <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">  
      <mat-card class="dashboard-card">  
        <mat-card-header>  
          <mat-card-title>  
            {{card.title}}  
            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">  
              <mat-icon>more_vert</mat-icon>  

NeelBhatt

<mat-grid-list> // Main grid container  
  
  // divides structure in small chunks  
  <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">  
  
    // Every chunks acts as card component  
    <mat-card class="dashboard-card">  
       
      // Card Header  
      <mat-card-header>  

NeelBhatt

employee-Add.component.ts

import { Component, OnInit,Input, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Employee } from 'src/Models/Employee';
import { Router } from '@angular/router';
import {EmployeeDataService} from '../DataService/EmployeeDataService'
@Component({
selector: 'app-employee-add',
templateUrl: './employee-add.component.html',

NeelBhatt

import { Component, OnInit, ViewChild, Input, EventEmitter, Output, ElementRef } from '@angular/core';
import { EmployeeDataService } from '../DataService/EmployeeDataService';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { Employee } from 'src/Models/Employee';
@Component({
selector: 'app-employeeupdate',
templateUrl: './employeeupdate.component.html',
styleUrls: ['./employeeupdate.component.sass']
})

NeelBhatt

<div class="container" style="border:thin">  
<form #empadd='ngForm' (ngSubmit)="Register(empadd)" class="form-horizontal" style="width:50%"  >    
<div class="form-group" >  
            <label class="control-label col-sm-2" for="fname" >First Name:</label>  
            <div class="col-sm-10">  
              <input  style="width:50%"    type="text" class="form-control"  
               width="50%" id="fname" placeholder="Enter first name"  
               name="firstname" firstname required [(ngModel)]='objemp.firstname'  #firstname="ngModel">  
           <span class="help-bpx" *ngIf="firstname.touched && !firstname.valid ">Required</span>  
            </div>  

NeelBhatt

<div class="container" style="border:thin">  
  <form #EditForm='ngForm' name="editform" (ngSubmit)="EditEmployee(EditForm)" class="form-horizontal" style="width:50%">  
    <div class="form-group">  
      <label class="control-label col-sm-2" for="fname">First Name:</label>  
      <div class="col-sm-10">  
        <input style="width:50%" type="text" class="form-control" width="50%" id="fname" placeholder="Enter first name"  
          name="firstname" firstname required [(ngModel)]='objemp.firstname' #firstname="ngModel">  
        <span class="help-bpx" *ngIf="firstname.touched && !firstname.valid ">Required</span>  
      </div>  
    </div>  

NeelBhatt

import { Component, OnInit, ViewChild } from '@angular/core';  
import { EmployeeAddComponent } from '../employee-add/employee-add.component';  
import { EmployeeDataService } from '../DataService/EmployeeDataService'  
import { Employee } from 'src/Models/Employee'  
import { Router } from '@angular/router';  
import { EmployeeupdateComponent } from '../employeeupdate/employeeupdate.component';  
@Component({  
  selector: 'app-angular-crud',  
  templateUrl: './angular-crud.component.html',  
  styleUrls: ['./angular-crud.component.sass']  

NeelBhatt

<div class="container">  
  <input type="button" class="btn btn-primary" (click)="loadAddnew()" data-toggle="modal" data-target="#myModal" value="Create New">  
  <hr>  
  <div *ngIf="!dataavailbale">  
  
    <h4> No Employee Data is present Click Add new to add Data.</h4>  
  </div>  
  
  <table class="table" *ngIf="dataavailbale">  
    <thead>  

NeelBhatt

export class  Employee{  
   firstname:string;  
   lastname:string ;  
   email:string;  
   gender:number;  
   id:string  
  
}  

NeelBhatt

 <div id="myModal" class="modal fade" role="dialog">  
    <div class="modal-dialog">  
      <div class="modal-content">  
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal">×</button>  
          <h4 class="modal-primary">Employee Add</h4>  
        </div>  
        <div class="modal-body">  
<app-employee-add #empadd (nameEvent)="RefreshData($event)"></app-employee-add>  
        </div>