I try to build "Employee Management System or Angular CRUD" but I come across the problem. My Modal is not allowed me to type into the tables.
*My Github : https://github.com/FlameDickyHead/Electric-Device-Borrowing-Website/tree/master *
It is allowed me to type only when I put the selector in my app.component.html
<app-employee></app-employee>
<router-outlet></router-outlet>
but I don't want that happens because It will be all over every pages of my app. like this picture below.
I want my "Employee Management System" stay inside my Main content which is the middle of page.
This is my employee.component.html
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" >Employee Management System</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addEmployee" type="button">Add Employee</button>
</div>
</div>
</nav>
<div class="box2" >
<div class="card p-3 shadow">
<h5 class="text-center">Employee List</h5>
<div class="card-body">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Employee ID</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Department</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employeesList">
<td >{{employee.employee_id}}</td>
<td >{{employee.first_name}}</td>
<td>{{employee.last_name}}</td>
<td>{{employee.email}}</td>
<td>{{employee.phone_number}}</td>
<td>{{employee.department}}</td>
<td>
<button class="btn btn-outline-danger" (click)="deleteEmployee(employee)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Add Employee Modal -->
<div class="modal fade" id="addEmployee" tabindex="-1" aria-labelledby="addEmployee" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Add Employee</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="Employee_Id" name="Employee_Id" [(ngModel)]="employee_id">
<label for="Employee_Id">Employee ID</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="firstName" name="firstname" [(ngModel)]="first_name">
<label for="firstname">First name</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="lastName" name="lastName" [(ngModel)]="last_name">
<label for="lastName">Last name</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" name="email" [(ngModel)]="email">
<label for="email">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="tel" class="form-control" id="phone" name="phone" [(ngModel)]="phone_number">
<label for="phone">Phone Number</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="department" name="department" [(ngModel)]="department">
<label for="department">Department</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="addEmployee()">Save changes</button>
</div>
</div>
</div>
</div>
Updated ! This is my main content area (dashboard.component.html)
<mat-toolbar>
<button mat-icon-button *ngIf="sidenav.mode =='over'" (click)="sidenav.toggle()">
<mat-icon *ngIf="!sidenav.opened">menu</mat-icon>
<mat-icon *ngIf="sidenav.opened">close</mat-icon>
</button>
<div class="header" style="cursor: pointer;" routerLink="/dashboard/home">
Electric Devices Borrowing Website
</div>
<button mat-button (click)="logout()">
<mat-icon>logout</mat-icon>
Logout
</button>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav="matSidenav">
<img width="100" height="100" class="avatar mat-elevation-z8" src="assets/image/logoproject.png" >
<h4 class="name">EDBW Company</h4>
<mat-divider></mat-divider>
<button mat-button class="menu-button" routerLink="/dashboard/home">
<mat-icon>home</mat-icon>
<span>Home</span>
</button>
<button mat-button class="menu-button" routerLink="/dashboard/employee">
<mat-icon>person</mat-icon>
<span>Employees</span>
</button>
<button mat-button class="menu-button" routerLink="/dashboard/electric">
<mat-icon>devices</mat-icon>
<span>Electric Devices</span>
</button>
<button mat-button class="menu-button" routerLink="/dashboard/borrow-device">
<mat-icon>add_shopping_cart</mat-icon>
<span>Borrowing Devices</span>
</button>
<button mat-button class="menu-button" routerLink="/dashboard/return-device">
<mat-icon>backspace</mat-icon>
<span>Returning Devices</span>
</button>
<button mat-button class="menu-button" routerLink="/dashboard/status-table">
<mat-icon>list_alt</mat-icon>
<span>Stock Status</span>
</button>
<br /><br /><br />
<mat-divider></mat-divider>
<button mat-button class="menu-button" routerLink="/dashboard/about-us">
<mat-icon>info</mat-icon>
<span>About us</span>
</button>
<button mat-button class="menu-button" routerLink="/dashboard/help">
<mat-icon>help</mat-icon>
<span>Help</span>
</button>
</mat-sidenav>
<mat-sidenav-content>
<div class="content mat-elevation-z4">
//main content area
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
