add profile dialog to other component

src/app/dashboard/fulltable/fulltable.component.html

@@ -75,7 +75,7 @@
 
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
-  <button mat-menu-item>Profile</button>
+  <button mat-menu-item (click)="openDialog()">Profile</button>
   <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 

src/app/dashboard/fulltable/fulltable.component.ts

 import {Component, OnInit, Inject, ViewContainerRef,Input, DoCheck,ViewChild,OnDestroy,ChangeDetectorRef,AfterViewInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
-import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
+import {MatPaginator, MatTableDataSource,MatSort,MatDialog} from '@angular/material';
 import {MediaMatcher} from '@angular/cdk/layout';
 
 import {Site} from '../../model/site';
@@ -12,6 +12,7 @@ import {ServiceComponentRow} from '../../model/service-component-row';
 import {HostName} from '../../model/hostname';
 import {ServiceComponent} from '../../model/service-component';
 import { AuthService } from 'src/app/auth.service';
+import {ProfileDialogComponent} from '../profile-dialog/profile-dialog.component';
 
 
 
@@ -46,7 +47,8 @@ export class FulltableComponent implements OnInit , DoCheck, AfterViewInit{
     public router: Router,
     public route: ActivatedRoute,
     public servCompService: ServiceComponentService,
-    public authService: AuthService
+    public authService: AuthService,
+    public dialog: MatDialog
  
   ) { 
     console.log('fulltable constructor');
@@ -398,4 +400,21 @@ getPageSizeOptions(): number[] {
   
   return options;
 }
+
+
+openDialog(): void {
+  console.log("opening the dialog");
+  const dialogRef = this.dialog.open(ProfileDialogComponent, {
+    width: '500px'
+  });
+
+
+
+  dialogRef.afterClosed().subscribe(result => {
+    console.log('The dialog was closed');
+
+  });
+}
+
+
 }

src/app/dashboard/hostname/hostname.component.html

@@ -72,8 +72,8 @@
 
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
-  <button mat-menu-item>Profile</button>
-  <button mat-menu-item>Logout</button>
+  <button mat-menu-item (click)="openDialog()">Profile</button>
+  <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 
 </mat-toolbar>

src/app/dashboard/hostname/hostname.component.ts

@@ -7,6 +7,8 @@ import {PreparedServiceComponentShort} from '../../model/prepared-service-compon
 
 import {Site} from '../../model/site';
 import { AuthService } from 'src/app/auth.service';
+import { MatDialog } from '@angular/material';
+import {ProfileDialogComponent} from '../profile-dialog/profile-dialog.component';
 
 @Component({
   selector: 'app-hostname',
@@ -28,7 +30,8 @@ export class HostnameComponent implements OnInit, OnDestroy {
   username: string;
 
   constructor(private siteService: SiteShortService, public router: Router,
-    public route: ActivatedRoute, public authService: AuthService) {
+    public route: ActivatedRoute, public authService: AuthService,
+    public dialog: MatDialog) {
    // this.siteName = '';
     // this.hostList = [];
     this.siteName = this.siteService.currentSite;
@@ -217,4 +220,18 @@ onLogout(){
   this.authService.logout();
 }
 
+openDialog(): void {
+  console.log("opening the dialog");
+  const dialogRef = this.dialog.open(ProfileDialogComponent, {
+    width: '500px'
+  });
+
+
+
+  dialogRef.afterClosed().subscribe(result => {
+    console.log('The dialog was closed');
+
+  });
+}
+
 }
\ No newline at end of file

src/app/dashboard/service-component-history/service-component-history.component.html

@@ -72,8 +72,8 @@
 
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
-  <button mat-menu-item>Profile</button>
-  <button mat-menu-item (click)="onLogout">Logout</button>
+  <button mat-menu-item (click)="openDialog()">Profile</button>
+  <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 
 </mat-toolbar>

src/app/dashboard/service-component-history/service-component-history.component.ts

@@ -5,6 +5,8 @@ import {ServiceComponent} from '../../model/service-component';
 import {ServiceComponentService} from '../../service-component.service'
 import { SiteService } from 'src/app/site.service';
 import { AuthService } from 'src/app/auth.service';
+import { MatDialog } from '@angular/material';
+import { ProfileDialogComponent} from '../profile-dialog/profile-dialog.component';
 
 
 @Component({
@@ -25,7 +27,8 @@ export class ServiceComponentHistoryComponent implements OnInit, OnDestroy {
     private siteService: SiteService,
     public router: Router,
     public route: ActivatedRoute,
-    public authService: AuthService) {
+    public authService: AuthService,
+    public dialog: MatDialog) {
     this.username = sessionStorage.getItem("currentUser");
     const sessionData = sessionStorage.getItem('currentServComp');
     if (sessionData !== null) {
@@ -116,5 +119,18 @@ export class ServiceComponentHistoryComponent implements OnInit, OnDestroy {
     this.authService.logout();
   }
   
+  openDialog(): void {
+    console.log("opening the dialog");
+    const dialogRef = this.dialog.open(ProfileDialogComponent, {
+      width: '500px'
+    });
+  
+  
+  
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+  
+    });
+  }
 
 }
\ No newline at end of file

src/app/dashboard/site/site.component.html

@@ -71,7 +71,7 @@
 
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
-  <button mat-menu-item>Profile</button>
+  <button mat-menu-item (click)="openDialog()">Profile</button>
   <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 

src/app/dashboard/site/site.component.ts

@@ -7,6 +7,8 @@ import { AuthService } from 'src/app/auth.service';
 
 import { MatIconRegistry } from "@angular/material/icon";
 import { DomSanitizer } from "@angular/platform-browser";
+import { MatDialog } from '@angular/material';
+import {ProfileDialogComponent} from '../profile-dialog/profile-dialog.component';
 
 @Component({
   selector: 'app-site',
@@ -32,7 +34,8 @@ export class SiteComponent implements OnInit, OnDestroy {
     public route: ActivatedRoute,
     public authService: AuthService,
     private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer
+    private domSanitizer: DomSanitizer,
+    public dialog: MatDialog
     ) {
     console.log('in site view constructor');
     this.username = sessionStorage.getItem("currentUser");
@@ -200,4 +203,17 @@ export class SiteComponent implements OnInit, OnDestroy {
   }
   
 
+  openDialog(): void {
+    console.log("opening the dialog");
+    const dialogRef = this.dialog.open(ProfileDialogComponent, {
+      width: '500px'
+    });
+  
+  
+  
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+  
+    });
+  }
 }
\ No newline at end of file