Angular material design dialog

Question

I'm using the official Angular Material-Design-Components. But I'm getting into trouble when trying to use the dialog-component. It simply won't work, though there is an example. I suppose there must be something missing.

If you take a look at the following example right here and view the code, the ts-file contains two components. The first one refers to the html, which is shown in the example. But the html of the second component is not shown. I suppose that there is my problem. The second component has the following decorator:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: 'dialog-result-example-dialog.html',
})

So the dialog-result-example-dialog.html looks like this in my case (this is not part of the example there):

<h2 md-dialog-title>Delete all</h2>
<md-dialog-content>Are you sure?</md-dialog-content>
<md-dialog-actions>
  <button md-button md-dialog-close>No</button>
  <!-- Can optionally provide a result for the closing dialog. -->
  <button md-button [md-dialog-close]="true">Yes</button>
</md-dialog-actions>

The selector refers to dialog-result-example-dialog. But where should this be placed? The example seems somewhat incomplete... at least for me as I am a beginner to angular-material. Does anyone of you get the example running on his own machine? I'd like to know, what I'm missing...

thanks, sheldon

Answer 1

Here is an example.

Component #1.

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { SecondDialogComponent } from '../second-dialog/second-dialog.component';

export interface DialogData {
  animals: {};
  likes: {};
}

@Component({
  selector: 'app-first-dialog',
  templateUrl: './first-dialog.component.html',
  styleUrls: ['./first-dialog.component.css']
})
export class FirstDialogComponent implements OnInit {
  // animal: any;
  // like: any;
  // dialogRef: MatDialogRef<SecondDialogComponent>;

  constructor(public dialog: MatDialog) { }

  ngOnInit() { }

  openDialog() {
    this.dialog.open(SecondDialogComponent, {
      hasBackdrop: true,
      data: {
        animals: ['Panda', 'Unicorn', 'Lion'],
        likes: ['Yes', 'No']
      },
      panelClass: 'custom-dialog-container'
    });
  }
}

Component #2

import { Component, Inject, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DialogData } from '../first-dialog/first-dialog.component';

@Component({
  selector: 'app-second-dialog',
  templateUrl: './second-dialog.component.html',
  styleUrls: ['./second-dialog.component.css']
})
export class SecondDialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<SecondDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: DialogData) { }

  likesFormControl: FormControl = new FormControl();
  allAnimals: any = this.dialogData.animals;
  allLikes: any = this.dialogData.likes;
  selected: String = "Panda";
  likeSelected: String = 'Yes';
  inputVal: String = "Yes";
  // consolidated: [];
  animal: any;
  like: any;
  saved: boolean = false;

  ngOnInit() { }

  ngAfterViewInit() {
    this.dialogRef.beforeClosed().subscribe((result: { animal: any; like: any; }) => {
      this.animal = result.animal;
      this.like = result.like;
    });
  }

  save() {
      this.saved = true;
    }
  reset() {
    this.saved = false;
    // this.inputVal="yes";
    this.likeSelected = "Yes";
  }

  closeDialog() {
    // this.consolidated = this.allAnimals.slice(0, this.allAnimals.length);
    // this.consolidated = this.allLikes.slice(0, this.allLikes.length);
    this.dialogRef.close();
  }
}

Html for Component #1

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-4 mt-4 text-center">
            <h4>Click the button to select your favorite animal</h4>
            <button mat-button (click)="openDialog()">Open dialog</button>
        </div>
    </div>
</div>

Html for Component #2

<div class="row float-right">
  <mat-icon matSuffix style="cursor: pointer;" (click)="closeDialog()">close</mat-icon>
</div>
<div mat-dialog-title class="mt-4">
  <h1>Favorite Animal</h1>
  <h2>{{selected}}</h2>
</div>
<div mat-dialog-content>
  <div>
    <mat-label>Select an Animal</mat-label>
  </div>
  <mat-form-field appearance="outline">
    <mat-select [(ngModel)]="selected">
      <mat-option *ngFor="let animal of allAnimals" [value]="animal">{{animal}}</mat-option>
    </mat-select>
  </mat-form-field>
  <div>
    <mat-label>Do you like the: {{selected}}?</mat-label>
  </div>
  <mat-form-field appearance="outline">
    <mat-select [(ngModel)]="likeSelected">
      <mat-option *ngFor="let like of allLikes" [value]="like">{{like}}</mat-option>
    </mat-select>
    <!-- <input matInput type="text" [(ngModel)]="inputVal"> -->
  </mat-form-field>
  <div class="justify-content-center mb-4">
    <div *ngIf="likeSelected.toUpperCase() === 'YES'; else label2">{{likeSelected}} I like the {{selected}}</div>
    <ng-template #label2>{{likeSelected}} I don't like the {{selected}}</ng-template>
  </div>
</div>
<div mat-dialog-active>
  <button [disabled]="saved || likeSelected.toUpperCase() === 'NO'" (click)="save()" class="btn btn-primary ml-2"
    type="button">Save</button>
  <button class="btn btn-outline-danger ml-5" type="button" (click)="closeDialog()">Cancel</button>
  <button class="btn btn-outline-success ml-5" type="button" (click)="reset()">Reset</button>
</div>
<div class="justify-content-center mt-4">
  <div *ngIf="saved && likeSelected.toUpperCase() === 'YES'" class="text-success">SAVED</div>
</div>

CSS for Component #2

::ng-deep .mat-dialog-container {
    background-color: white !important;
    width: 30em;
    height: 35em;
    text-align: center;
}

::ng-deep .mat-dialog-content {
    font-weight: bold;
    /* color: black; */
}

::ng-deep .mat-dialog-title {
    text-align: center;
    margin-top: 10px;
}

/* ::ng-deep .mat-form-field-appearance-outline {
    background-color: black;
} */

/* ::ng-deep .mat-form-field-underline {
    display: none;
} */

Answer 2

I'm gonna do a mini tutorial:

This is the simplest MdDialog you can create:

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'MyCustomDialog',
  templateUrl: './MyCustomDialog.html',
  styleUrls: ['./MyCustomDialog.css']
})
export class MyCustomDialog{

  constructor(
    public dialogRef: MdDialogRef<MyCustomDialog>,
  ) { }
}

To instantiate it from any other component:

Step 1: Add your dialog component to the entryComponents array of your app.module.ts

@NgModule({
  entryComponents: [
    MyCustomDialog,
  ],
})

Step 2: In any component

constructor(private mdDialog: MdDialog){}

openDialog(){
  this.mdDialog.open(MyCustomDialog);
}

NB: As the component is created via the code and not with the template, you don't use its selector and that's also why you have to add the component to the entryComponents array.