CompleteProject

src/app/admin/admin-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AppointmentComponent } from '../components/appointment/appointment.component';
+import { CheckAppointmentComponent } from '../components/check-appoitment/check-appointment.component';
+import { HomeComponent } from '../components/home/home.component';
+import { LabTestsComponent } from '../components/lab-tests/lab-tests.component';
+import { LoginComponent } from '../components/login/login.component';
+import { SignupComponent } from '../components/signup/signup.component';
+import { AuthGuard } from '../guard/auth.guard';
+
+const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'signup', component: SignupComponent },
+  { path: 'login', component: LoginComponent },
+
+  { path: 'labtests', component: LabTestsComponent, canActivate: [AuthGuard] },
+  {
+    path: 'appointment-check',
+    component: CheckAppointmentComponent,
+    canActivate: [AuthGuard],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AdminRoutingModule {}

src/app/admin/admin.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { AgGridModule } from 'ag-grid-angular';
+
+import { AdminRoutingModule } from './admin-routing.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    AgGridModule,
+  ],
+})
+export class AdminModule {}

src/app/app-routing.module.ts

@@ -1,28 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { AppointmentComponent } from './components/appointment/appointment.component';
-import { CheckAppointmentComponent } from './components/check-appoitment/check-appointment.component';
-import { HomeComponent } from './components/home/home.component';
-import { LabTestsComponent } from './components/lab-tests/lab-tests.component';
-import { LoginComponent } from './components/login/login.component';
-import { SignupComponent } from './components/signup/signup.component';
-import { AuthGuard } from './guard/auth.guard';
-
 const routes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'signup', component: SignupComponent },
-  { path: 'login', component: LoginComponent },
   {
-    path: 'appointment',
-    component: AppointmentComponent,
-    canActivate: [AuthGuard],
+    path: '',
+    loadChildren: () =>
+      import('./admin/admin.module').then((mod) => mod.AdminModule),
   },
-  { path: 'labtests', component: LabTestsComponent }, // to protect these pages from not authorized user
+
   {
-    path: 'appointment-check',
-    component: CheckAppointmentComponent,
-    canActivate: [AuthGuard],
+    path: '',
+    loadChildren: () =>
+      import('./components/appointment/appointment.module').then(
+        (m) => m.AppointmentModule
+      ),
   },
 ];
 

src/app/components/appointment/appointment-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AppointmentComponent } from './appointment.component';
+import { AuthGuard } from 'src/app/guard/auth.guard';
+
+const routes: Routes = [
+  {
+    path: 'appointment',
+    component: AppointmentComponent,
+    canActivate: [AuthGuard],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppointmentRoutingModule {}

src/app/components/appointment/appointment.component.html

@@ -1,101 +1,107 @@
 <section class="vh-100" style="background-color: #eee;">
-    <div class="container h-100">
-      <div class="row d-flex justify-content-center align-items-center h-100">
-        <div class="col-lg-12 col-xl-11">
-          <div class="card text-black" style="border-radius: 25px;">
-            <div class="card-body p-md-5">
-              <div class="row justify-content-center">
-                <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
-
-                  <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Schedule Your Appointment</p>
-                  <form [formGroup]="appointmentForm" (ngSubmit)="onSubmitAppointment()">
-                    <div class="d-flex flex-row align-items-center mb-4">
-                      <i class="fas fa-user fa-lg me-3 fa-fw"></i>
-                      <div class="form-outline flex-fill mb-0">
-                        <label class="form-label" >Name</label>
-                        <input type="text" class="form-control"  formControlName="name"  name="name"/>
-                      </div>
+  <div class="container h-100">
+    <div class="row d-flex justify-content-center align-items-center h-100">
+      <div class="col-lg-12 col-xl-11">
+        <div class="card text-black" style="border-radius: 25px;">
+          <div class="card-body p-md-5">
+            <div class="row justify-content-center">
+              <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
+
+                <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Schedule Your Appointment</p>
+                <form [formGroup]="appointmentForm" (ngSubmit)="onSubmitAppointment()">
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label class="form-label">Name</label>
+                      <input type="text" class="form-control" formControlName="name" name="name" />
                     </div>
-  <!-- For Date of Birth -->
-                    <div class="d-flex flex-row align-items-center mb-4">
-                      <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
-                      <div class="form-outline flex-fill mb-0">
-                        <label class="form-label" for="dob">DOB:</label>
-                            <input type="date" id="dob" class="form-control" formControlName="dob" name="dob">
-                      </div>
+                  </div>
+                  <!-- For Date of Birth -->
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label class="form-label" for="dob">DOB:</label>
+                      <input type="date" id="dob" class="form-control" formControlName="dob" name="dob">
                     </div>
-  <!-- For Gender (Radio Buttons) -->
-                    <div class="d-flex flex-row align-items-center mb-4">
-                      <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
-                      <div class="form-outline flex-fill mb-0">
-                        <label class="form-label" >Gender</label><br>
-                        <div class="form-check form-check-inline">
-                            <input class="form-check-input" type="radio" formControlName="gender" name="gender" id="inlineRadio1" value="MALE">
-                            <label class="form-check-label" for="inlineRadio1">Male</label>
-                        </div>
-                          <div class="form-check form-check-inline">
-                            <input class="form-check-input" type="radio" formControlName="gender" name="gender" id="inlineRadio2" value="FEMALE">
-                            <label class="form-check-label" for="inlineRadio2">Female</label>
-                          </div>
+                  </div>
+                  <!-- For Gender (Radio Buttons) -->
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label class="form-label">Gender</label><br>
+                      <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" formControlName="gender" name="gender"
+                          id="inlineRadio1" value="MALE">
+                        <label class="form-check-label" for="inlineRadio1">Male</label>
                       </div>
-                    </div>
- <!-- For Email -->
-                      <div class="d-flex flex-row align-items-center mb-4">
-                        <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
-                        <div class="form-outline flex-fill mb-0">
-                          <label class="form-check-label" >Email </label>
-                          <input type="email"  class="form-control" formControlName="email" name="email" />
-                        </div>
+                      <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" formControlName="gender" name="gender"
+                          id="inlineRadio2" value="FEMALE">
+                        <label class="form-check-label" for="inlineRadio2">Female</label>
                       </div>
+                    </div>
+                  </div>
+                  <!-- For Email -->
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label class="form-check-label">Email </label>
+                      <input type="email" class="form-control" formControlName="email" name="email" />
+                    </div>
+                  </div>
 
-<!-- For Department Dropdown -->
-                    <div class="d-flex flex-row align-items-center mb-4">
-                        <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
-                        <div class="form-outline flex-fill mb-0">
-                            <label for="dept" class="form-label">Department:</label><br>
-                             <select select class="custom-select mb-3" (change)="changeDept($event)" name="dept" class="form-control" id="dept" formControlName="dept" name="dept">
-                              <option *ngFor = "let dept of department" value="{{dept.id}}" >{{dept.dept_name}}</option>
-                            </select>
-                          </div>
-                        </div>
+                  <!-- For Department Dropdown -->
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label for="dept" class="form-label">Department:</label><br>
+                      <select select class="custom-select mb-3" (change)="changeDept($event)" name="dept"
+                        class="form-control" id="dept" formControlName="dept" name="dept">
+                        <option *ngFor="let dept of department" value="{{dept.id}}">{{dept.dept_name}}</option>
+                      </select>
+                    </div>
+                  </div>
 
-<!-- !-- For Doctor Dropdown --> 
-                    <div class="d-flex flex-row align-items-center mb-4">
-                        <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
-                        <div class="form-outline flex-fill mb-0">
-                            <label for="doc" class="form-label">Doctor:</label><br>
-                             <select class="custom-select mb-3"  placeHolderName="Doctors" name="doc" class="form-control" id="doc" formControlName="doc" name="doc">
-                              <option>Choose Doctor</option>
-                              <option *ngFor ="let doc of doctors">{{doc.doc_name}}</option>
-                            </select>
-                          </div>
-                        </div>
+                  <!-- !-- For Doctor Dropdown -->
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label for="doc" class="form-label">Doctor:</label><br>
+                      <select class="custom-select mb-3" placeHolderName="Doctors" name="doc" class="form-control"
+                        id="doc" formControlName="doc" name="doc">
+                        <option>Choose Doctor</option>
+                        <option *ngFor="let doc of doctors">{{doc.doc_name}}</option>
+                      </select>
+                    </div>
+                  </div>
 
-  <!-- For APpointment datetime picker -->
-                    <div class="d-flex flex-row align-items-center mb-4">
-                      <i class="fas fa-key fa-lg me-3 fa-fw"></i>
-                      <div class="form-outline flex-fill mb-0">
-                        <label class="form-label" >Date for Appointment</label>
-                        <input type="datetime-local" id="doa" class="form-control" formControlName="doa" ngModel name="doa">
-                      </div>
+                  <!-- For APpointment datetime picker -->
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-key fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <label class="form-label">Date for Appointment</label>
+                      <input type="datetime-local" id="doa" class="form-control" formControlName="doa" ngModel
+                        name="doa">
                     </div>
-
-  <!--For Submit button -->
-                    <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
-                      <button type="submit" class="btn btn-primary btn-lg"  >Book</button>
-                   </div>
-                  </form>
-
-                </div>
-        <!-- Image -->
-                <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
-                  <img src="https://st.depositphotos.com/1598598/2023/i/450/depositphotos_20236679-stock-photo-yellow-paper-note-with-text.jpg"
-                    class="img-fluid" alt="Sample image">
-                </div>
+                  </div>
+
+                  <!--For Submit button -->
+                  <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
+                    <button type="submit" class="btn btn-primary btn-lg">Book</button>
+                  </div>
+                </form>
+
+              </div>
+              <!-- Image -->
+              <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
+                <img
+                  src="https://st.depositphotos.com/1598598/2023/i/450/depositphotos_20236679-stock-photo-yellow-paper-note-with-text.jpg"
+                  class="img-fluid" alt="Sample image">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </section>
+  </div>
+</section>

src/app/components/appointment/appointment.component.ts

@@ -78,7 +78,7 @@ export class AppointmentComponent implements OnInit {
   }
 
   //on the click of department change event click and through department id doctors will show in dependent dropdown
-  changeDept(event: any) {
+  changeDept(event) {
     let deptId = event.target.value;
     this.userService
       .showDoc(+deptId)

src/app/components/appointment/appointment.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AppointmentRoutingModule } from './appointment-routing.module';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AgGridModule } from 'ag-grid-angular';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    AppointmentRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    AgGridModule,
+  ],
+})
+export class AppointmentModule {}

src/app/components/check-appoitment/check-appointment.component.html

@@ -1,17 +1,8 @@
-
-
 <div ag-grid="gridOptions" class="ag-theme-bootstrap" ng-controller="ParentCtrl">
-  <div class="container-fluid"> 
-    <ag-grid-angular 
-    style="width: 100%; height: 400px" 
-    class="ag-theme-alpine"
-    [columnDefs]="columns"
-    [defaultColDef]="defaultColDef"
-    [rowData]="rowData"
-    (gridReady)="onGridReady($event)"
-    [rowSelection]="rowSelection" 
-    (selectionChanged)="onSelectionChanged()"
-     ></ag-grid-angular>
+  <div class="container-fluid">
+    <ag-grid-angular style="width: 100%; height: 400px" class="ag-theme-alpine" [columnDefs]="columns"
+      [defaultColDef]="defaultColDef" [rowData]="rowData" (gridReady)="onGridReady($event)"
+      [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged()"></ag-grid-angular>
   </div>
 </div>