CODEWITHSUNDEEP
angular
jonpfl
jonpfl

Reputation: 105

Angular dialog not opening up as a modal window

I am new to angular and just trying to get a an dialog window to pop up and it is showing up BUT not as a modal window.

Here is some of my code

Inside 'app.module.ts'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { MatDialogModule } from "@angular/material/dialog";
import { MatCardModule } from "@angular/material";
import { MatButtonModule } from "@angular/material";

@NgModule({
  declarations: [
    QuadMergeSearchFormComponent,
    QuadMergeSearchResultsDialogComponent
  ],
  entryComponents: [
    QuadMergeSearchResultsDialogComponent
  ],
  imports: [
    BrowserModule,
    MembersideRoutingModule,
    FormsModule,
    HttpClientModule,
    MatDialogModule,
    MatCardModule,
    MatButtonModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Inside 'quad-merge-search-form.component'

constructor(private dialog: MatDialog) { }

onSubmit(): void {
    let dialogRef = this.dialog.open(QuadMergeSearchResultsDialogComponent, 
    {
        width: '600px',
        height: '400px'
    });
}

Do I need to add anything to quad-merge-search-form.component.html?

Inside 'quad-merge-search-results-dialog.component'

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-quad-merge-search-results-dialog',
  templateUrl: './quad-merge-search-results-dialog.component.html',
  styleUrls: ['./quad-merge-search-results-dialog.component.scss']
})
export class QuadMergeSearchResultsDialogComponent implements OnInit {

constructor() { }

ngOnInit() {
}

and

<p>
  quad-merge-search-results-dialog works!
</p>

Inside 'app.component.html' (does anything need to go in here?)

<site-header></site-header>
<div class="site-content">
    <router-outlet></router-outlet>
</div>
<site-footer></site-footer>

When I run page and click on button, the dialog shows up BUT below '<site-footer>' tag.

Thx jonpfl

Upvotes: 2

Views: 2404

Answers (1)

Banu Priya
Banu Priya

Reputation: 31

add this line

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

to angular.json file in your app.

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

Upvotes: 3

Related Questions