penambahan form edit dan view

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html

@@ -11,7 +11,15 @@
               (reloadFunction)="reloadProjectInfo($event)"
             >
               <ng-container mCardHeaderTitle>
-                Project Info (Reactive Forms Validation)
+                <h2>
+                  {{
+                    isEditMode()
+                      ? "Edit Device"
+                      : isViewMode()
+                      ? "View Device"
+                      : "Add New Device"
+                  }}
+                </h2>
               </ng-container>
               <ng-container mCardBody>
                 <form

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from "@angular/core";
 import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
-import { Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
 
 @Component({
@@ -12,6 +12,7 @@ export class AddEditDeviceComponent {
   @ViewChild("f", { read: true }) userProfileForm: NgForm;
 
   model: any = {};
+  mode: string;
 
   @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
   @BlockUI("userProfile") blockUIUserProfile: NgBlockUI;
@@ -49,9 +50,17 @@ export class AddEditDeviceComponent {
   priority = ["Low", "Medium", "High"];
   status = ["Not Started", "Started", "Fixed"];
 
-  constructor(private formBuilder: FormBuilder, private router: Router) {}
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
 
   ngOnInit() {
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+      console.log(this.mode);
+    });
     this.breadcrumb = {
       mainlabel: "Basic Forms",
       links: [
@@ -85,6 +94,18 @@ export class AddEditDeviceComponent {
     });
   }
 
+  isEditMode() {
+    return this.mode === "edit";
+  }
+
+  isViewMode() {
+    return this.mode === "view";
+  }
+
+  isAddMode() {
+    return this.mode === "add";
+  }
+
   get f() {
     return this.projectInfo.controls;
   }
@@ -122,9 +143,7 @@ export class AddEditDeviceComponent {
     }
   }
 
-  addData(){
-    
-  }
+  addData() {}
 
   cancel() {
     this.router.navigate(["/device"]); // Adjust the path as per your routing setup