How to create custom alert dialog box with angular material 15 dialog box

first I created custom dialog module then generate its component and then its service…

files
-custom-dialog
--custom-dialog.component.html
--custom-dialog.component.css
--custom-dialog.component.ts
--custom-dialog.module.ts
--custom-dialog.service.ts

First import mat dialog in module

custom-dialog.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomDialogComponent } from './custom-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';


@NgModule({
  declarations: [
    CustomDialogComponent
  ],
  imports: [
    CommonModule,
    MatDialogModule
  ],
  exports: [
    CustomDialogComponent
  ]
})
export class CustomDialogComponent { }

custom-dialog.service.ts

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CustomDialogComponent } from './custom-dialog.component';

@Injectable({
  providedIn: 'root'
})
export class CustomDialogService {

  constructor(
    private dialog: MatDialog
  ) { }

  alert() {
    this.dialog.open(DialogComponent);
  }
}

custom-dialog.component.ts

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

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

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

}

custom-dialog.component.html

<mat-dialog-content>
 alert
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button type="button" mat-button mat-dialog-close>close</button>
</mat-dialog-actions>

this is the code what I write for show alert.

to call this function first i import CustomDialogModule in where i have to call it and import CustomDialogService in component and call alert function which created in service but it shows error in console

Error: Uncaught (in promise): NullInjectorError: R3InjectorError(WebsiteSessionModule)[DialogService -> DialogService -> MatDialog -> MatDialog -> MatDialog]: 
  NullInjectorError: No provider for MatDialog!
NullInjectorError: R3InjectorError(WebsiteSessionModule)[DialogService -> DialogService -> MatDialog -> MatDialog -> MatDialog]: 
  NullInjectorError: No provider for MatDialog!

but when i import matdialogmodule in app.module.ts instead of custom-dialog.module.ts its works fine but i don’t want to call it in app module.