CODEWITHSUNDEEP
angulartypescriptmodal-dialogpopup
Nikita
Nikita

Reputation: 211

Angular modal popup not working

I'm trying to create a simple modal popup in Angular. I've imported everything in app.module.ts and I can't seem to find errors in my code. All I see is a blank screen on localhost.

Below is my app.component.html file :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <h1>Popup!</h1>
  <button (click) = "openDialog()" mat-raised-button class="btn btn-default">Click me!</button>
</div>
<app-choose-emoji-dialog></app-choose-emoji-dialog>

Below is my modal component file :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h1 mat-dialog-title class="text-primary">This is dialog title!</h1>
<mat-dialog-content>This is the content of dialog!</mat-dialog-content>
<mat-dialog-actions>
  <button md-raised-button class="btn btn-primary" mat-dialog-close>Close Button!</button>
</mat-dialog-actions>

Below is app.component.ts file:

import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MatDialog } from '@angular/material';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {
  }
  openDialog () {
    this.dialog.open(ChooseEmojiDialogComponent);
  }
}

app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
import {MatDialogModule, MatButtonModule, MatCardModule, MatMenuModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    ChooseEmojiDialogComponent
  ],
  imports: [
    BrowserModule, MatButtonModule, BrowserAnimationsModule, MatCardModule, MatMenuModule, MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Views: 8786

Answers (3)

Shikha Ahuja
Shikha Ahuja

Reputation: 3

Changes need to be done in above code

  1. In 'app.component.html' remove selector for ChooseEmojiDialogComponent 
<div>
  <h1>Popup!</h1>
  <button (click) = "openDialog()" mat-raised-button class="btn btn-default">Click me!</button>
</div>
  1. Add ChooseEmojiDialogComponent in entryComponents in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MatDialogModule, MatButtonModule, MatCardModule, MatMenuModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    ChooseEmojiDialogComponent
  ],
  imports: [
    BrowserModule, MatButtonModule, BrowserAnimationsModule, MatCardModule, MatMenuModule, MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ChooseEmojiDialogComponent]
})
export class AppModule { }

Upvotes: 1

Mukesh Kumar
Mukesh Kumar

Reputation: 661

Add your ChooseEmojiDialogComponent in entryComponents array in app.module.ts file

@NgModule({
  declarations: [
    AppComponent,
    ChooseEmojiDialogComponent
  ],
  imports: [
    BrowserModule, MatButtonModule, BrowserAnimationsModule, MatCardModule, MatMenuModule, MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ChooseEmojiDialogComponent]
})
export class AppModule { }

If you don't add your component to entryComponents then you will get following error in browser console:

ERROR Error: No component factory found for ChooseEmojiDialogComponent. Did you add it to @NgModule.entryComponents?

Upvotes: 4

Clystian
Clystian

Reputation: 165

Try define a width

export class AppComponent {
  constructor(public dialog: MatDialog) {    
  }
  openDialog () {
    this.dialog.open(ChooseEmojiDialogComponent, { width: '300px' });
  }
}

Upvotes: 1

Related Questions