DEV Community

Cover image for Angular material dialog example
Adrian Matei for Codever

Posted on • Edited on • Originally published at codever.dev

2 1

Angular material dialog example

Project: codever

The following example shows the elements required to implement an angular material dialog to ask the user to log in on Codever, when this is needed (like following tags).

First thing add the MatDialogModule in the Angular module where you intend to use the dialog, and the component holding the dialog body (LoginRequiredDialogComponent) to the entryComponents

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

Then in a component, where the dialog is launched, e.g TagComponent, inject a MatDialog service to open Material Design modal dialogs. Then configure the dialog with the help of MatDialogConfig and open it with the component holding the content of the dialog:

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);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Below is the component, LoginRequiredDialogComponent, holdingcontent (body) of the dialog. You can reference and access the provided the calling component using the MAT_DIALOG_DATA injectable:

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();
  }

}

Enter fullscreen mode Exit fullscreen mode

The login() and cancel() methods seen in the component before, are triggered from the angular html template:

<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>

Enter fullscreen mode Exit fullscreen mode


Reference -

https://material.angular.io/components/dialog/overview


Shared with ❤️ from Codever. Use 👉   copy to mine functionality to add it to your personal snippets collection.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay