Невозможно отобразить содержимое в диалоговом окне в angular 10

Question

Я хочу показать содержимое login.component. html в диалоговом окне при нажатии на логин из header.comp onet. html. Мой код приведен ниже. Я могу открыть диалоговое окно, но он не отображается с нужным мне содержимым (Login.component. html). И теперь он отображается на одном краю окна. Я хочу, чтобы он был выровнен по центру.

app.module.ts

import { LoginComponent } from './login/login.component';
import { MatDialogModule } from '@angular/material/dialog';


// ....

@NgModule({
  declarations: [
    // ....
    LoginComponent
    // ....
  ],

imports: [
// ...
MatDialogModule
  ],

entryComponents: [LoginComponent]

и header.component.ts

openLoginForm(): void {
    const dialogRef = this.dialog.open(LoginComponent, {
      width: '300px',
      data: {}
    });

также я вызвал openLoginForm при нажатии кнопки в Html Part.

Кто-нибудь, пожалуйста, помогите мне исправить проблему в этом коде.