CODEWITHSUNDEEP
angularangular-materialnode-modules
Shivam Upadhyay
Shivam Upadhyay

Reputation: 35

Mat Dialog is not opening up as pop-up

I created separate HTML file for mat-dialog. Did material import but dialog is not opening up as pop-up instead its opening at bottom of page.

This is dialog box html having a button to close the dialog.

assignRMDialog.html

  <h2 mat-dialog-title>Assign RM</h2>
    <mat-dialog-content>
    <hr>
        <button class="btn-primary" (click)="onNoClick()" >Close</button>
      </mat-dialog-content>

This is html page having a button name "Assign RM" to open dialog pop-up.

walkin.component.html

    <button mat-button class="btn-primary" (click)="assignRM()">Assign RM</button>

This is the .ts file having functions and declaration of dialog and main page.

walkin.component.ts

    import { Component, OnInit, ViewChild,Inject,  } from '@angular/core';
    import { MatDialog ,MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';
    import { CommonService } from 'src/app/core/services/common.service';
    
    export interface NewAssignWalkinDialogData{
      rmOptionList:any;
    }
    @Component({
      selector: 'app-walkin',
      templateUrl: './walkin.component.html',
      styleUrls: ['./walkin.component.css']
    })
    export class WalkinComponent implements OnInit {
    
      constructor(private commonServices:CommonService,private dialog:MatDialog) {     
       }
      ngOnInit(): void {
      }
     
      assignRM():void{
        const dialogRef=this.dialog.open(AssignNewWalkinDialog,{
          width: '250px',
          height: '300px',
          data:{rmOptionList:''}
        });
      }
    }
    @Component({
      selector: 'assignRMDialogBox',
      templateUrl: 'assignRMDialogBox.html',
    })
    export class AssignNewWalkinDialog{
      constructor(
        public dialogRef: MatDialogRef<AssignNewWalkinDialog>,
        @Inject(MAT_DIALOG_DATA) public data: NewAssignWalkinDialogData,private walkinService:WalkinService) {
    }
    
    
    onNoClick(): void {
      this.dialogRef.close();
    }
    
    }

I also declared this dialog component in app.module.ts and also defined it as entry component. app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ModuleImport } from 'src/assets/moduleImport';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ToastrModule } from 'ngx-toastr';
import { NgxSpinnerModule } from "ngx-spinner";
import { FormsModule } from '@angular/forms'; 
import { HttpClientModule } from '@angular/common/http';
import { GtagModule } from 'angular-gtag';
import { CommonService } from './core/services/common.service';
import { RouterModule } from '@angular/router';
import { EnquiryComponent } from './dashboard/enquiry/enquiry.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WalkinComponent } from './dashboard/walkin/walkin.component';
import { AssignNewWalkinDialog } from './dashboard/walkin/walkin.component';

@NgModule({
  declarations: [
    AppComponent,
    WalkinComponent,
    AssignNewWalkinDialog
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModuleImport,
    ToastrModule.forRoot({
      positionClass:'toast-top-center'
    }),
    NgxSpinnerModule,
    FormsModule,
    HttpClientModule,
    GtagModule,
    RouterModule,
    BrowserAnimationsModule
  ],
  entryComponents:[AssignNewWalkinDialog],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { 
  
}

Upvotes: 1

Views: 1017

Answers (1)

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5640

First way: Try adding the following path in angular.json file if not added already:

./node_modules/@angular/material/prebuilt-themes/indigo-pink.css

Make sure to restart ng serve to reload the angular.json file.

Second way: Try importing the following path in style.css file if not imported already:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Upvotes: 1

Related Questions