Angular 17 - Dialog component not styled

Question

First of all I'm new to Angular (1 week experience) Problem: I try to edit a ToDo from my ToDo-List via a dialog. I pass in the parameters of my listItem and in the dialog i want to change the title. The data binding works perfectly, but the styling of the dialog is completely awkward. Can you please help me to figure out my problem?

Stackblitz: https://stackblitz.com/edit/github-wgums5?file=README.md

todo-list.component.html

<div class="card shadow-lg mt-5 bg-light">
  <div class="card-header text-center border-0"></div>
  <div class="card-body p-4 bg-light">
    <ul class="list-group">
      <div *ngIf="todos.length === 0" class="text-center text-muted">Nothing to do, enjoy some free time my love!</div>      <li
        class="list-group-item mb-2 border py-3 rounded-3 p-4"
        *ngFor="let item of todos"
        [ngClass]="{
          'bg-success': item.priority == 1,
          'bg-warning': item.priority == 2,
          'bg-danger': item.priority == 3
        }"
      >
        <span>
          <i
            (click)="completeToDo(item.id, !item.isDone)"
            [ngClass]="
              item.isDone ? 'fa-solid fa-circle-check fa-xl' : 'fa-regular fa-circle fa-xl'
            "
          ></i>
          <i class="p-3"
            [ngStyle]="{
              'text-decoration': item.isDone ? 'line-through' : 'none'
            }"
            [ngClass]="{
              'text-white': item.priority != 2
            }"
          >
            {{ item.title }}
          </i>
          <span class="float-end text-dark" (click)="deleteToDo(item.id)">
            <i class="fa-solid fa-trash-can"></i>
          </span>
          <span class="float-end text-dark px-3" (click)="openDialog(item)">
            <i class="fa-solid fa-pen-to-square"></i>
          </span>
        </span>
      </li>
    </ul>
  </div>
</div>

todo-list.component.ts

import { Component } from '@angular/core';
import { TodoService } from '../../services/todo.service';
import { UpdateTodoDialogComponent } from '../update-todo-dialog/update-todo-dialog.component';
import {
  MatDialog,
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialogTitle,
  MatDialogContent,
  MatDialogActions,
  MatDialogClose,
} from '@angular/material/dialog';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrl: './todo-list.component.css'
})
export class TodoListComponent {

  todos: any[] = [];

  constructor(private todoService: TodoService, public dialog: MatDialog) {}

  ngOnInit(): void {
    this.todoService.firestoreCollection.valueChanges({idField:'id'}).subscribe((item) => {
      this.todos = item.sort((a:any, b:any) => {return b.priority - a.priority});
    });
  }

  completeToDo(id:string, newStatus:boolean): void {
    this.todoService.completeToDo(id, newStatus);
  }

  deleteToDo(id:string): void {
    this.todoService.deleteToDo(id);
  }

  updateToDo(id:string, newTitle:string): void {
    this.todoService.updateToDo(id, newTitle);
  }

  openDialog(item: any): void {

    const dialogRef = this.dialog.open(UpdateTodoDialogComponent, {
      width: '250px',
      data: {id: item.id, title: item.title}
    });

    dialogRef.afterClosed().subscribe(newTitle => {
      if (newTitle) {
        this.updateToDo(item.id, newTitle);
      }
    });
  }
}

update-todo-dialog.component.html

<div class="container justify-content-center">
    <h2 mat-dialog-title>Edit To Do</h2>
    <mat-dialog-content>
      <mat-form-field>
        <input matInput [(ngModel)]="data.title" />
      </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="onNoClick()">Cancel</button>
      <button mat-button [mat-dialog-close]="data.title" cdkFocusInitial>
        Done
      </button>
    </mat-dialog-actions>
</div>

update-todo-dialog.component.ts

import { Component, Inject } from '@angular/core';
import {
  MatDialog,
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialogTitle,
  MatDialogContent,
  MatDialogActions,
  MatDialogClose,
} from '@angular/material/dialog';


@Component({
  selector: 'app-update-todo-dialog',
  templateUrl: './update-todo-dialog.component.html',
  styleUrl: './update-todo-dialog.component.css'
})
export class UpdateTodoDialogComponent {

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

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

app.module.ts

import { AppComponent } from './app.component';
import { TodoListComponent } from './components/todo-list/todo-list.component';
import { TodoComponent } from './components/todo/todo.component';
import {MatRadioModule} from '@angular/material/radio';
import { FormsModule } from '@angular/forms';
import {MatDialogModule} from "@angular/material/dialog";
import { UpdateTodoDialogComponent } from './components/update-todo-dialog/update-todo-dialog.component';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [
    AppComponent,
    TodoListComponent,
    TodoComponent,
    UpdateTodoDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    MatRadioModule, 
    FormsModule,
    MatDialogModule, 
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <app-todo></app-todo>
      <app-todo-list></app-todo-list>
    </div>
  </div>
</div>

I expect it to look styled like in the documentation: enter image description here

But it looks like this: enter image description here

Answer 1

In your app.module.ts, make sure to add MatInputModule, MatButtonModule and BrowserAnimationsModule.

It also seems like you forgot to include a theme for your material components. You can add @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; (or any other pre-built theme) and it should look better afterwards.

See this Stackblitz (forked from yours)