Angular material dialog example

@NgModule({  imports:      [    //...    MatDialogModule,    RouterModule  ],  declarations: [   //....    LoginRequiredDialogComponent  ],  exports: [],  entryComponents: [    //....    LoginRequiredDialogComponent,  ]})export class SharedModule { }

export class TagComponent implements OnInit {  constructor(private tagService: TagService,              //....              private loginDialog: MatDialog) {  }  watchTag() {    if (!this.userIsLoggedIn) {      const dialogConfig = new MatDialogConfig();      dialogConfig.disableClose = true;      dialogConfig.autoFocus = true;      dialogConfig.data = {        message: 'You need to be logged in to follow tags'      };      this.loginDialog.open(LoginRequiredDialogComponent, dialogConfig);    } else {      this.userDataWatchedTagsStore.watchTag(this.tag);    }  }}

import { Component, Inject, OnInit } from '@angular/core';import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';import { KeycloakService } from 'keycloak-angular';import { Router } from '@angular/router';import { KeycloakServiceWrapper } from '../../core/keycloak-service-wrapper.service';@Component({  selector: 'app-delete-bookmark-dialog',  templateUrl: './login-required-dialog.component.html',  styleUrls: ['./login-required-dialog.component.scss']})export class LoginRequiredDialogComponent implements OnInit {  message: string;  constructor(    private keycloakService: KeycloakService,    private keycloakServiceWrapper: KeycloakServiceWrapper,    private dialogRef: MatDialogRef<LoginRequiredDialogComponent>,    private router: Router,    @Inject(MAT_DIALOG_DATA) data  ) {    this.message = data.message || 'You need to be logged in to be able execute this action';  }  ngOnInit() {  }  login() {    this.dialogRef.close('LOGIN_CONFIRMED');    this.keycloakServiceWrapper.login();  }  cancel() {    this.dialogRef.close();  }}

<h2 mat-dialog-title>Login required</h2><hr><mat-dialog-content>  <p>{{message}}</p></mat-dialog-content><hr><mat-dialog-actions class="app-dialog-actions">  <button type="button" class="btn btn-primary btn-sm mr-2" (click)="login()"><i class="fas fa-unlock"></i> Login / Register  </button>  <button type="button" class="btn btn-secondary btn-sm" (click)="cancel()">Cancel</button></mat-dialog-actions>