angularangular-materialmat-dialog

Angular mat dialog not showing correctly

I am trying to create a dialog that shows up when a button is clicked. The problem now is that when the button is clicked, the dialog shows up as plain text in the left bottom corner of the screen. The background is also white and the web page is not visible anymore. I tried following the basic tutorial on this website, so the code is almost the same.

Here is my component where i call openDialog when the button is clicked

openDialog(index: number): void {
    let dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: { name: 'qwe', animal: 'qwewqe' }
    });
  
    dialogRef.afterClosed().subscribe(result => {
      user = result;
    });
  }

Here is the code that contains the button which runs openDialog when clicked

<div class="main-content">
        <table id="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Admin</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of users; let i = index">
                    <td>{{ user.id }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.isAdmin == 1 ? "True" : "False" }}</td>
                    <td>
                        <button (click)="openDialog(i)">
                            <svg style="color: white" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M48 0H0V48H48V0Z" fill="white" fill-opacity="0.01"></path><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="white" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path><path d="M33.5424 27C32.2681 31.0571 28.4778 34 24.0002 34C19.5226 34 15.7323 31.0571 14.458 27V33" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M33.5424 15V21C32.2681 16.9429 28.4778 14 24.0002 14C19.5226 14 15.7323 16.9429 14.458 21" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path></svg>                        </button>
                        <button (click)="deleteUser(i)">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-delete">
                                <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
                                <line x1="18" y1="9" x2="12" y2="15"></line>
                                <line x1="12" y1="9" x2="18" y2="15"></line>
                            </svg> 
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h1 id="data-table" style="text-align: center"></h1>
    </div>

Here is my dialog component ts file

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

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

  constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit(): void {
  }

  onCancel(): void {
    this.dialogRef.close();
  }

}

Here is my dialog component html

<h1 mat-dialog-title>Welcome user</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancel()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" 
             cdkFocusInitial>Ok</button>
</div>

Here is my dialog component module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatCommonModule } from '@angular/material/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DialogComponent } from './dialog.component';

@NgModule({
  declarations: [DialogComponent],
  imports: [
    CommonModule,
    MatDialogModule,
    MatInputModule,
    MatButtonModule,
    MatCommonModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    FormsModule
  ],
  entryComponents: [DialogComponent]
})
export class DialogModule { }

here is my app module file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { DialogComponent } from './dialog/dialog.component';
import { DialogModule } from './dialog/dialog.module';
import { MatCommonModule } from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent,
    AdminpanelComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    MatFormFieldModule,
    MatDialogModule,
    MatInputModule,
    BrowserAnimationsModule,
    DialogModule,
    CommonModule,
    MatButtonModule,
    MatCommonModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    DialogComponent
  ]
})
export class AppModule { }

Here are the package versions I am using enter image description here

This is how the modal looks on the webpage enter image description here

I would like to have something similar to this. enter image description here

Solution

  • You need to import styles for @angular/material you can find more information in the docs, link is for v14 since it's in your package.json.

    Basically what you need to do is to add this line in your styles.css or add the path in your angular.json styles array.

    @import '@angular/material/prebuilt-themes/indigo-pink.css'

    There are also more advanced theming options. You can check them here