Untitled

//manage-category.compo.html

<mat-card>
    <b><span>Manage Category</span></b>
    <button mat-flat-button color="primary" class="float-right" (click)="handleAddAction()">Add Category</button>
</mat-card>
<hr>
<mat-card>
    <mat-form-field  appearance="fill">
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" #input>
    </mat-form-field>
</mat-card>
<hr>
<div class="responsive_table">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name</th>
            <td mat-cell *matCellDef="let element">{{element.name}}</td>
        </ng-container>

        <ng-container matColumnDef="edit">
            <th mat-header-cell *matHeaderCellDef> Action</th>
            <td mat-cell *matCellDef="let element" class="action-link">
                <button mat-icon-button color="primary" matTooltip="Edit" (click)="handleEditAction(element)">
                    <mat-icon>edit</mat-icon>
                </button>
            </td>
        </ng-container>

        <tr mat-header-row  *matHeaderRowDef="displayedColumns; sticky:true"></tr>
        <tr mat-row *matRowDef="let row;columns:displayedColumns"></tr>
    </table>
</div>



//manage-category.compo.scss


import { Component, OnInit } from '@angular/core';
import { NgxUiLoaderService } from 'ngx-ui-loader';
import { CategoryService } from 'src/app/services/category.service';
import { GlobalConstants } from 'src/app/shared/global-constants';
import { SnackbarService } from 'src/app/services/snackbar.service';
import { Router } from '@angular/router';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { CategoryComponent } from '../dialog/category/category.component';
@Component({
  selector: 'app-manage-category',
  templateUrl: './manage-category.component.html',
  styleUrls: ['./manage-category.component.scss']
})
export class ManageCategoryComponent implements OnInit {
  displayedColumns:string[] = ['name','edit'];
  dataSource:any;
  responseMessage:any;
  constructor(private categoryService:CategoryService,
    private ngxService:NgxUiLoaderService,
    private dialog:MatDialog,
    private snackbarService:SnackbarService,
    private router:Router) {}
 
  ngOnInit(): void {
    this.ngxService.start();
    this.tableData();
  }

  tableData(){
    this.categoryService.getCategorys().subscribe((response:any)=>{
      this.ngxService.stop();
      this.dataSource=new MatTableDataSource(response);
    },(error:any)=>{
      this.ngxService.stop();
      if(error.error?.message){
        this.responseMessage= error.error?.message;
      }
      else{
        this.responseMessage = GlobalConstants.genericError;
      }
      this.snackbarService.openSnackBar(this.responseMessage,GlobalConstants.error);
    })
  }

  applyFilter(event:Event){
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  handleAddAction(){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = {
      action :'Add'
    }
    dialogConfig.width = "850px";
    const dialogRef= this.dialog.open(CategoryComponent,dialogConfig);
    this.router.events.subscribe(()=>{
      dialogRef.close();
    });
    const sub = dialogRef.componentInstance.onAddCategory.subscribe(
      (response)=>{
        this.tableData();
      } )
  }

  handleEditAction(values:any){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = {
      action :'Edit',
      data:values
    }
    dialogConfig.width = "850px";
    const dialogRef= this.dialog.open(CategoryComponent,dialogConfig);
    this.router.events.subscribe(()=>{
      dialogRef.close();
    });
    const sub = dialogRef.componentInstance.onEditCategory.subscribe(
      (response)=>{
        this.tableData();
      } )
  }

}


//category.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class CategoryService {
  url = environment.apiUrl;

  constructor(private httpClient:HttpClient) {   }

  add(data:any){
    return this.httpClient.post(this.url +  "/category/add/",data,{
      headers: new HttpHeaders().set('Content-Type',"application/json")
    })
  }

  update(data:any){
    return this.httpClient.patch(this.url +  "/category/update/",data,{
      headers: new HttpHeaders().set('Content-Type',"application/json")
    })
  }

  getCategorys(){
    return this.httpClient.get(this.url+"/category/get/");
  }
}



//change-password.component.html

<mat-toolbar color="primary">
    <mat-toolbar-row fxLayout="row">
        <span class="title-center">Change Password</span>
    </mat-toolbar-row>
</mat-toolbar>


<mat-dialog-content>
    <form [formGroup]="changePasswordForm">
        <div fxFlex fxLayout="column">

            <mat-form-field appearance="fill" fxFlex>
                <mat-label>Old Password</mat-label>
                <input matInput formControlName="oldPasssword" type="password" required>
                <mat-error *ngIf="changePasswordForm.controls.oldPassword.touched && changePasswordForm.controls.oldPassword.invalid">
                    <span *ngIf="changePasswordForm.controls.oldPassword.errors.required">This field is mandatory.</span>
                </mat-error>
            </mat-form-field>


            <mat-form-field appearance="fill" fxFlex>
                <mat-label>New Password</mat-label>
                <input matInput formControlName="newPasssword" type="password" required>
                <mat-error *ngIf="changePasswordForm.controls.newPassword.touched && changePasswordForm.controls.newPassword.invalid">
                    <span *ngIf="changePasswordForm.controls.newPassword.errors.required">This field is mandatory.</span>
                </mat-error>
            </mat-form-field>

            <mat-form-field appearance="fill" fxFlex>
                <mat-label>Confirm Password</mat-label>
                <input matInput formControlName="confirmPasssword" type="password" required>
                <mat-error *ngIf="changePasswordForm.controls.confirmPassword.touched && changePasswordForm.controls.confirmPasssword.invalid">
                    <span *ngIf="changePasswordForm.controls.confirmPassword.errors.required">This field is mandatory.</span>
                </mat-error>
                <mat-hint *ngIf="validateSubmit()  && !(changePasswordForm.controls.confirmPasssword.invalid)">
                    <span> New Password & Confirm Password does not match.</span>
                </mat-hint>
            </mat-form-field>

        </div>
    </form>
</mat-dialog-content>
<mat-dialog-actions  align="center">
    <button mat-raised-button color="primary" type="submit" (click)="handleChangePasswordSubmit()" [disabled]="validateSubmit() ||  !(changePasswordForm.valid  && changePasswordForm.dirty)">Update</button>
    <button mat-raised-button color="primary" mat-dialog-close>Close</button>
</mat-dialog-actions>




//manage-category.compo.scss

.float-right{
    float:right;
}

mat-card{
    padding: 20px;
}

table{
    width: 100%;
}