manager.component.html

<div class="col-lg-12">
    <mat-card class="cardWithShadow">
        <mat-card-content class="p-24">
            <!-- Title section -->
            <mat-card-title class="title-flex-container">
                <div layout="row" layout-align="center center">
                    Managers
                </div>
                <div>
                    <!-- Filter input for searching columns -->
                    <mat-form-field appearance="outline">
                        <mat-label>Filter</mat-label>
                        <input matInput (keyup)="applyFilter($event)" placeholder="Search columns" #input>
                    </mat-form-field>
                    <!-- Create button for adding a new manager -->
                    <button mat-raised-button class="create-btn" color="primary"
                        (click)="openAddManager()">Create</button>
                </div>
            </mat-card-title>
            <!-- Table section -->
            <div class="table-responsive m-t-16">
                <table mat-table [dataSource]="dataSource" class="w-100">
                    <!-- Column for Manager's Name -->
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">
                            Name
                        </th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display Manager's name or "To Be Appointed" if not appointed -->
                            <ng-container *ngIf="element.isAppointed; else emptyValueBlock">
                                {{ element.managerName }}
                            </ng-container>
                            <ng-template #emptyValueBlock>
                                <strong>To Be Appointed</strong>
                            </ng-template>
                        </td>
                    </ng-container>

                    <!-- Column for Manager's Age -->
                    <ng-container matColumnDef="age">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">
                            Age
                        </th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display Manager's age or an empty value if not appointed -->
                            <ng-container *ngIf="element.isAppointed; else emptyValue">
                                {{ element.managerAge }}
                            </ng-container>
                        </td>
                    </ng-container>

                    <!-- Column for Manager's Salary -->
                    <ng-container matColumnDef="salary">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">
                            Salary
                        </th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display Manager's salary or an empty value if not appointed -->
                            <ng-container *ngIf="element.isAppointed; else emptyValue">
                                {{ element.managerSalary | currency: 'INR' }}
                            </ng-container>
                        </td>
                    </ng-container>

                    <!-- Column for Edit button -->
                    <ng-container matColumnDef="edit">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">Edit</th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display Edit button if the manager is appointed -->
                            <ng-container *ngIf="element.isAppointed; else emptyValue">
                                <button mat-icon-button color="primary" (click)="openEditManager(element)">
                                    <mat-icon>edit</mat-icon>
                                </button>
                            </ng-container>
                        </td>
                    </ng-container>

                    <!-- Column for Manager's Department -->
                    <ng-container matColumnDef="department">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">
                            Department
                        </th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display Manager's department name -->
                            {{ element.departmentName }}
                        </td>
                    </ng-container>

                    <!-- Column for Appoint button -->
                    <ng-container matColumnDef="assign">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">Appoint</th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display "Appointed" or Appoint button if the manager is not appointed -->
                            <ng-container *ngIf="element.isAppointed; else emptyValueBlock">
                                <strong>Appointed</strong>
                            </ng-container>
                            <ng-template #emptyValueBlock>
                                <button mat-icon-button color="primary" (click)="openAppointManager(element)">
                                    <mat-icon>add</mat-icon>
                                </button>
                            </ng-template>
                        </td>
                    </ng-container>

                    <!-- Column for Delete button -->
                    <ng-container matColumnDef="delete">
                        <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-14">Delete</th>
                        <td mat-cell *matCellDef="let element" class="mat-body-1">
                            <!-- Display Delete button if the manager is appointed -->
                            <ng-container *ngIf="element.isAppointed; else emptyValue">
                                <button mat-icon-button color="warn" (click)="deleteManager(element.managerId)">
                                    <mat-icon>delete</mat-icon>
                                </button>
                            </ng-container>
                        </td>
                    </ng-container>

                    <!-- Table rows -->
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
                </table>
            </div>
        </mat-card-content>
        <!-- Paginator section -->
        <mat-paginator [length]="totalItems" [pageSize]="pageSize" [pageSizeOptions]="[pageSize]"
            [pageIndex]="pageNumber - 1" (page)="onPageChange($event)">
        </mat-paginator>
    </mat-card>
</div>