CODEWITHSUNDEEP
angularangular-material
VIBHOR GOYAL
VIBHOR GOYAL

Reputation: 503

Can't resolve all parameters for MatDialogRef in angular 7

I am trying to implement dialog popup in angular. I am getting same error again and again. Can't resolve all parameters for MatDialogRef: (?, ?, ?, ?)

What I want to do is open the login as a dialog window from the icon on my header.

My code is as below:

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
    
import {AppComponent} from './app.component';
import {HeaderComponent} from './modules/main/header/header.component';
import {LoginComponent} from './modules/login/login.component';
import {AppRoutingModule} from './app-routing.module';
import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule, MatDialogRef} from '@angular/material';
import {HttpClientModule} from '@angular/common/http';
    
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatDialogModule
  ],
  entryComponents: [
    LoginComponent
  ],
  providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}, MatDialogRef],
  bootstrap: [AppComponent]
})
export class AppModule {}

header.component.ts

import {Component, OnInit} from '@angular/core';
import {LoginComponent} from '../../login/login.component';
import {MatDialog} from '@angular/material';
    
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
    
  logoOriginal = 'assets/logo/logo.png';
  logoHovered = 'assets/logo/logo-hovered.png';
  logo: string;
    
  constructor(public dialog: MatDialog) {}
    
  ngOnInit() {
    this.logo = this.logoOriginal;
  }
    
  onMouseEnter() {
    this.logo = this.logoHovered;
  }
    
  onMouseLeave() {
    this.logo = this.logoOriginal;
  }
    
  openDialog(): void {
    const dialogRef = this.dialog.open(LoginComponent, {
      width: '250px',
    });
    
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

login.component.ts

import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
    
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {

  constructor(
    public dialogRef: MatDialogRef<LoginComponent>) {}

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

Please help me resolving this. I have referred to all answers available but none solved my issue.

Upvotes: 0

Views: 4704

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9344

MatDialogRef is not a provider but a reference. Remove it from the list of providers which you have in app.module.ts:

providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}, MatDialogRef],

Upvotes: 1

Related Questions