typescript - Angular Material's Dialog won't display correctly

Question

So I'm using Angular Material 2 to build my website and when I try to open a Dialog it opens at the end of the page and not in the centre of the page as it should do, somewhat like it doesn't respect the overlay rules.

My AppComponent, where i declare my dialog components, looks like this:

 import { Component, OnInit } from '@angular/core';
   import { Title } from '@angular/platform-browser';
   import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';

   import { StaffService } from './staff.service';
   import { EventiService } from './eventi.service';

   @Component({
        moduleId: module.id,
        selector: 'magie-dinverno',
        templateUrl: 'app.component.html',
        providers: [
           StaffService,
           EventiService
        ]
   })
   export class AppComponent implements OnInit {
       public constructor(private titleService: Title, public dialog: MdDialog) { }
       dialogRef: MdDialogRef<NewsDialog>;
       email: string;

       public setTitle (newTitle: string) {
          this.titleService.setTitle( newTitle );
       }

       ngOnInit(){ }

       openNews() {
          this.dialogRef = this.dialog.open(NewsDialog, {
              height: '200px',
              width: '400px'
       });

        this.dialogRef.afterClosed().subscribe(result => {
          this.email = result;
          console.log(this.email);
          this.dialogRef = null;
          });
        }
   }

    @Component({
        selector: 'news-dialog',
        template: `
            <div class="dialog">
                <div class="container">
                    <!-- <img /> Immagine figa -->
                   <div class="dialog-title">
                    <h4>Rimani sempre aggiornato</h4>
                </div>
                <div class="dialog-content">
                    <p>Per rimanere sempre aggiornato iscriviti alla nostra newsletter: </p>
                    <p><label>Email: <input #email></label></p>
                </div>
                <div class="center-align dialog-actions">
                    <button md-button (click)="dialogRef.close(email.value)">Invia</button>
                </div>
            </div>
        </div>
       `
    })
    export class NewsDialog { 
        constructor(public dialogRef: MdDialogRef<NewsDialog>) { } 
    }

Meanwhile my AppModule is this:

import { NgModule }      from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent, NewsDialog }  from './app.component';
import { OrariComponent } from './orari.component';
import { IndexComponent } from './index.component';
import { EventiComponent } from './eventi.component';
import { ServiziComponent } from './servizi.component';
import { ContattiComponent } from './contatti.component';
import { GalleriaComponent } from './galleria.component';
import { AdminComponent} from './admin.component';

import { AggiungiEventoComponent } from './aggiungi-evento.component';

@NgModule({
  imports: [
        BrowserModule,
        AppRoutingModule,
      HttpModule,
      MaterialModule.forRoot()
    ],
  declarations: [
    AppComponent,
    IndexComponent,
    OrariComponent,
    EventiComponent,
    ServiziComponent,
    ContattiComponent,
    GalleriaComponent,
    AdminComponent,
    AggiungiEventoComponent,
    NewsDialog
  ],
  entryComponents: [
    NewsDialog
  ],
  providers: [
    Title
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 1

did you include angular-material css? something like

<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">