Angular Material Dialog

By Dillon Smart · · · 0 Comments

Angular

Angular is an awesome framework, yet it does have a steep learning curve for many developers. This post is aimed at those with experience using Angular 2/4/5 who want to use the Angular Material Dialog.

This post will assume you have already installed the @angular/material library. If you have I would refer you to take a look at the following: https://material.angular.io/guide/getting-started.

Below you can find the example code used to create the Angular Material Dialog. All the code below will be the same file.

Angular Material Dialog

import {Component, Inject, Input} from '@angular/core'; 
import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from "@angular/material";

@Component({
    moduleId: module.id,
    selector: 'base-component',
    template: `
       <h1>This is the base template</h1>
       <button (click)="openDialog()">Click Me!</button>
    `,
})

export class BaseComponent {
    openDialog(): void {
        let dialogRef = this.dialog.open(FavoriteAnimalComponent, <MatDialogConfig>{
            width: '450px',
            height: '500px'
        });

        dialogRef.afterClosed().subscribe(result => {
            alert('You said your favorite animal is: ' + result);
        });
    }
}

/**
 * The Dialog Component 
 */
@Component({
    moduleId: module.id,
    selector: 'favorite-animal',
    template: `
        <h1>Whats your favorite animal?</h1>
        <input type="text" [(ngModel)]="animal">
        <button [mat-dialog-close]="animal" cdkFocusInitial>Choose</button>
 `;
})

export class FavoriteAnimalComponent {

   public animal: string;

}

Whats next

After you have created your components, you will need to add the FavoriteAnimalComponent to your modules entryComponents array, as this should solve any ZoneAware errors that may occur.

 

AngularJavaScript

0 Comment

Was this helpful? Leave a comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

What is a front-end application?

Updated 16th August 2022

What is a front-end application? If you’re new to Web Development, there may be many terms you hear that you’re unsure what they mean. Don’t worry, this is all part of the learning experience and you will pick these terms up as you progress in your journey to becoming a web developer. In this post,

Angular: Call a Parent method in Child Component using @Output

Updated 16th August 2022

In JavaScript frameworks, such as Angular, it’s common for components to communicate with each other and send data back and forth. In this post, I will show you how to call a parent method from a child component in Angular with the @Output decorator using EventEmitters. In all JavaScript frameworks, it’s common for child components

Vue 3 Popup Modal Component – Create a Modal

Updated 23rd August 2022

In this post, I’m going to show you how to create a Popup Modal Component in Vue 3. This Popup Modal will use the built-in transition component. The Modal we will create looks a lot like the Modal Dialogs used by Apple in iOS. We will use Tailwind CSS for styling. What is Vue?  Vue