loanEdit component resides in app-component and

it popup as needed.

src/app/app.component.html

@@ -8,5 +8,6 @@
     </ng-template>
   </kendo-menu>
 </div>
+<app-loan-edit #loanEditComponent></app-loan-edit>
 <router-outlet></router-outlet>
 

src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { LoanEditComponent } from './loan-edit/loan-edit.component';
 
 import { mainMenuItems } from './main-menu-items';
 import { MenuService } from './service/menu.service';
@@ -12,18 +13,30 @@ export class AppComponent {
 
   title = 'broker';
   public items: any[] = mainMenuItems;
+  @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;
+
   
   constructor(private menuService: MenuService){
   }
 
+  //check menuItem has fontawesome
   public menuItemHasFontawesome (item: any) : boolean {
     return item.hasOwnProperty('fa');
   }
 
+  //menuItem clicked
   public onSelect({ item }): void {
     if (!item.items) {
       this.menuService.itemClicked.emit(item);
       //console.log("emit on select : " + item.text);
+      console.log(this.loanEdit);
+      if ( item.popup ==  "loanEdit"){
+        this.loanEdit.somedata = "changed";
+        this.loanEdit.open('dialog');
+      }
     }
   }  
+
+
+
 }

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { AuthComponent } from './auth/auth.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CanvasComponent } from './canvas/canvas.component';
 import { MenuService } from './service/menu.service';
+import { LoanEditComponent } from './loan-edit/loan-edit.component';
 
 
 
@@ -28,7 +29,8 @@ import { MenuService } from './service/menu.service';
     AppComponent,
     DashboardComponent,
     AuthComponent,
-    CanvasComponent 
+    CanvasComponent,
+    LoanEditComponent 
   ],
   imports: [
     BrowserModule,

src/app/canvas/canvas.component.html

@@ -44,67 +44,6 @@
 </kendo-grid>
 
 <hr>
-<div class="example-wrapper" style="opacity:1;">
-    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('dialog')">Open dialog</button>
-    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('window')">Open window</button>
-    
-    <kendo-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
-        <p style="margin: 30px; text-align: center;">Are you sure you want to
-        continue?</p>
-        
 
-        <div class="example-wrapper">
-            <div class="row">
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorGradient</p>
-                    <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
-                </div>
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorPalette</p>
-                    <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
-                </div>
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorPicker</p>
-                    <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
-                </div>
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>MaskedTextBox</p>
-                    <kendo-maskedtextbox
-                        [mask]="'9-000'"
-                    ></kendo-maskedtextbox>
-                </div>
-            </div>
-         </div>
- 
-
-        <kendo-menu>
-            <kendo-menu-item text="My Web Site" icon="folder">
-                <kendo-menu-item text="images" icon="folder">
-                    <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
-                    <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
-                    <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
-                </kendo-menu-item>
-                <kendo-menu-item text="resources" icon="folder">
-                    <kendo-menu-item text="pdf" icon="folder">
-                        <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
-                        <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
-                    </kendo-menu-item>
-                    <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
-                </kendo-menu-item>
-                <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
-                <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
-                <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
-                <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
-            </kendo-menu-item>
-          </kendo-menu>
-
-        <kendo-dialog-actions>
-            <button kendoButton (click)="action('no')">No</button>
-            <button kendoButton (click)="action('yes')" primary="true">Yes</button>
-        </kendo-dialog-actions>
-    </kendo-dialog>
-
-    <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
-      <p style="text-align: center;">Additional info</p>
-     </kendo-window>
-  </div>
+  <hr> 
+  <div class="col-xs-6">some text</div><div class="col-xs-6">some other text</div>

src/app/canvas/canvas.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { sampleProducts } from '../models/sample_product';
 import { MenuService } from '../service/menu.service';
 
@@ -10,32 +11,23 @@ import { MenuService } from '../service/menu.service';
 
 export class CanvasComponent implements OnInit, OnDestroy {
   public gridData: any[] = sampleProducts;
-  public dialogOpened = false;
-  public windowOpened = false;
+
+  private menutItemSub: Subscription;
+
+  
 
   constructor(private menuService: MenuService) { }
 
   ngOnInit(): void {
-    this.menuService.itemClicked.subscribe(
+    this.menutItemSub = this.menuService.itemClicked.subscribe(
        (item:any) =>{
          console.log(item);
        }
     );
   }
   ngOnDestroy(): void{
-    this.menuService.itemClicked.unsubscribe(); 
-  }
-
-  public close(component) {
-    this[component + 'Opened'] = false;
+    this.menutItemSub.unsubscribe(); 
   }
 
-  public open(component) {
-    this[component + 'Opened'] = true;
-  }
 
-  public action(status) {
-    console.log(`Dialog result: ${status}`);
-    this.dialogOpened = false;
-  }
 }

src/app/canvas/dist/canvas.component.js

@@ -13,26 +13,14 @@ var CanvasComponent = /** @class */ (function () {
     function CanvasComponent(menuService) {
         this.menuService = menuService;
         this.gridData = sample_product_1.sampleProducts;
-        this.dialogOpened = false;
-        this.windowOpened = false;
     }
     CanvasComponent.prototype.ngOnInit = function () {
-        this.menuService.itemClicked.subscribe(function (item) {
+        this.menutItemSub = this.menuService.itemClicked.subscribe(function (item) {
             console.log(item);
         });
     };
     CanvasComponent.prototype.ngOnDestroy = function () {
-        this.menuService.itemClicked.unsubscribe();
-    };
-    CanvasComponent.prototype.close = function (component) {
-        this[component + 'Opened'] = false;
-    };
-    CanvasComponent.prototype.open = function (component) {
-        this[component + 'Opened'] = true;
-    };
-    CanvasComponent.prototype.action = function (status) {
-        console.log("Dialog result: " + status);
-        this.dialogOpened = false;
+        this.menutItemSub.unsubscribe();
     };
     CanvasComponent = __decorate([
         core_1.Component({

src/app/loan-edit/dist/loan-edit.component.js

@@ -0,0 +1,45 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.LoanEditComponent = void 0;
+var core_1 = require("@angular/core");
+var LoanEditComponent = /** @class */ (function () {
+    function LoanEditComponent() {
+        //popup 
+        this.dialogOpened = false;
+        this.windowOpened = false;
+        //test
+        this.somedata = "opened";
+    }
+    LoanEditComponent.prototype.ngOnInit = function () {
+    };
+    LoanEditComponent.prototype.close = function (component) {
+        this.somedata = "" + Math.random();
+        this[component + 'Opened'] = false;
+    };
+    LoanEditComponent.prototype.open = function (component) {
+        //this.somedata = "" + Math.random();
+        this[component + 'Opened'] = true;
+    };
+    LoanEditComponent.prototype.action = function (status) {
+        var _this = this;
+        console.log("Dialog result: " + status);
+        setTimeout(function () {
+            _this.dialogOpened = false;
+        }, 2000);
+    };
+    LoanEditComponent = __decorate([
+        core_1.Component({
+            selector: 'app-loan-edit',
+            templateUrl: './loan-edit.component.html',
+            styleUrls: ['./loan-edit.component.scss']
+        })
+    ], LoanEditComponent);
+    return LoanEditComponent;
+}());
+exports.LoanEditComponent = LoanEditComponent;

src/app/loan-edit/loan-edit.component.html

@@ -0,0 +1,22 @@
+<div class="example-wrapper" style="opacity:1;">
+    <kendo-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
+
+        <div class="example-wrapper">
+            <div class="row">
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorGradient</p>
+                    <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
+                </div>
+            </div>
+         </div>
+ 
+        <kendo-dialog-actions>
+            <button kendoButton (click)="action('no')">No</button>
+            <button kendoButton (click)="action('yes')" primary="true">Yes</button>
+        </kendo-dialog-actions>
+    </kendo-dialog>
+
+    <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
+      <p style="text-align: center;">Additional info</p>
+     </kendo-window>
+  </div>

src/app/loan-edit/loan-edit.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanEditComponent } from './loan-edit.component';
+
+describe('LoanEditComponent', () => {
+  let component: LoanEditComponent;
+  let fixture: ComponentFixture<LoanEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoanEditComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoanEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loan-edit/loan-edit.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loan-edit',
+  templateUrl: './loan-edit.component.html',
+  styleUrls: ['./loan-edit.component.scss']
+})
+export class LoanEditComponent implements OnInit {
+  //popup 
+  public dialogOpened = false;
+  public windowOpened = false;
+
+  //test
+  public somedata : string = "opened";
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  public close(component) {
+    this.somedata = "" + Math.random();
+    this[component + 'Opened'] = false;
+  }
+
+  public open(component) {
+    //this.somedata = "" + Math.random();
+    this[component + 'Opened'] = true;
+  }
+
+  public action(status) {
+    console.log(`Dialog result: ${status}`);
+    setTimeout(()=>{
+      this.dialogOpened = false;
+    },2000);
+    
+  }
+}

src/app/main-menu-items.ts

@@ -18,8 +18,8 @@ export const mainMenuItems: any[] = [
         text: 'Loans',
         icon: 'dollar',
         items: [
-            { text: 'Add', icon: 'plus', url: 'https://google.com.au' }, 
-            { text: 'List All', icon: 'table' ,url: 'https://google.com.au' }, 
+            { text: 'Add', icon: 'plus', popup: "loanEdit" }, 
+            { text: 'List All', icon: 'table' ,url: '#' }, 
             { text: '--', separator: "true"  }, 
             { text: 'Export All Loans' , icon: "excel"}, 
             { text: '--', separator: "true"  }, 
@@ -30,7 +30,7 @@ export const mainMenuItems: any[] = [
         text: 'Trails',
         icon: 'percent',
         items: [
-            { text: 'List All', icon: 'table', url: 'https://google.com.au' }, 
+            { text: 'List All', icon: 'table', url: '#' }, 
             { text: '--', separator: "true"  }, 
             { text: 'Import From ...', icon : 'upload'}
         ]
@@ -39,7 +39,7 @@ export const mainMenuItems: any[] = [
         text: 'Clients',
         icon: 'user',
         items: [
-            { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, 
+            { text: 'Add ', icon: 'plus', url: '#' }, 
             { text: 'List All', fa: faIdCard }, 
             { text: '--', separator: "true"  }, 
             { text: 'Search' ,icon: 'search'},
@@ -52,7 +52,7 @@ export const mainMenuItems: any[] = [
         text: 'Brokers',
         fa: faUserCircle,
         items: [
-            { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, 
+            { text: 'Add ', icon: 'plus', url: '#' }, 
             { text: 'List All', fa: faIdCardAlt}, 
             { text: '--', separator: "true"  }, 
             { text: 'Search' , icon: 'search'},