CODEWITHSUNDEEP
angularangular-material
Hazu
Hazu

Reputation: 105

Angular material dialog isn't shown properly

The dialog is shown on the bottom of my page with a strange look and behaviour! Angular Material Here are the versions am working with:

@angular/material": "^2.0.0-beta.8, @angular/core": "^4.2.6"

I'm using bootstrap v3.7.x ( i was trying to use ng-bootstrap modal and turns out it doesn't work with bootstrap 3 any longer)

my.component.html

 <button md-button type="button" class="btn btn-primary" (click)="openMyModal()">OPEN</button>

my.component.ts:

import {MdDialog} from '@angular/material';
import {MyModal} from "./myModal.component"
@Component({
  templateUrl: "./my.component.html"
})
    export class My {
      constructor(public dialog: MdDialog) {}

    openMyModal():void {
        const modalInstance = this.dialog.open(MyModal);
      }
    }

myModal.component.ts:

import { Component } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

        @Component({
          template: `<div class="modal-body">
                          Modal content Here
                          </div>`
        })
        export class MyModal {
          constructor(

    public dialogRef: MdDialogRef<MyModal>) {}
    }

How the html of the modal is displayed on botton of my page

Upvotes: 0

Views: 3183

Answers (2)

Hazu
Hazu

Reputation: 105

I managed to fix this theme by importing this in my main styles.scss

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Upvotes: 5

RKG
RKG

Reputation: 612

You need to import Angular core themes. Without that some material components act weird. I have a custom theme for my app and I import in my css file.

@import '../../../node_modules/@angular/material/theming';

Upvotes: 0

Related Questions