title: Unable to close the Modal Dialog in Angular 2
body: <p>This is my modal HTML where it basically renders a post in a modal and has a button to close the post(modal). Below are the two typescript files that are used to call the open method to display the dialog - 
  home.post.component.html
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal" style="width:780px; height: 500px; padding-bottom:20px;"&gt;
    &lt;button type="button" class="btn btn-default" (click)="dialogRef.close()"&gt;Close&lt;/button&gt;
  
    &lt;div fxLayout="column"&gt;
      &lt;div class="text-larger border-bottom-light-gray" style="padding-bottom:8px" [innerHTML]="post.title.rendered | keepHtml"&gt;&lt;span style="font-size:0.500em;" class="pull-right"&gt;by Spoke Team&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div fxLayout="row"&gt;
      &lt;div fxFlex="75"&gt;
        &lt;div class="margin-top-30" style="margin-right: 24px;"&gt;
          &lt;div class="margin-top-10" style="overflow:auto; margin-bottom:20px"&gt;
            &lt;div id="post-content" [innerHTML]="post.content.rendered | keepHtml"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div fxFlex="25" class="border-left-light-gray"&gt;
        &lt;div class="margin-top-30" style="margin-left: 24px;"&gt;
          &lt;div class="margin-top-10" style="overflow:auto; margin-bottom:20px"&gt;
            &lt;div style="font-weight:600"&gt; Related Posts &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.component.html - Parent View
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div fxLayout="row" style="padding:0px; overflow: hidden;" class="bg-color-blue animated fadeIn" id="section1"&gt;
    &lt;div fxFlex="70" fxFlex.xs="100" style="margin: auto;"&gt;
      &lt;div fxLayout="row" fxLayout.lt-lg="column"  style="margin-top:20px; padding-right:8px; padding-left:5px; padding-bottom:15px"&gt;
        &lt;div fxLayout="column" fxFlex="55" style="width:100%; padding-right:8px; padding-left:8px;" *ngFor="let post of cover.highlight"&gt;
            &lt;div fxFlex="50" style="width:100%; margin-bottom: 0.5625rem;" *ngFor="let post of cover.highlight"&gt;
              &lt;md-card style="padding:0px !important;" (click)="openPost(post.id)" class="cursor-pointer animated fadeIn wow" data-wow-offset="2.0s"&gt;
                &lt;div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}"&gt; 
                  &lt;div class="stretchy-wrapper bx overlay-post"&gt; 
                    &lt;div [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt; 
              &lt;/md-card&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div fxLayout="column"fxFlex="45"&gt;
          &lt;div fxLayout="row" fxLayout.lt-sm="column"&gt;
            &lt;div fxFlex="50" style="width:100%; padding-right:8px; padding-left:8px; margin-bottom: 0.5625rem;" *ngFor="let post of cover.rowOne"&gt;
              &lt;md-card style="padding:0px !important;" (click)="openPost(post.id)" class="cursor-pointer animated fadeIn"&gt;
                &lt;div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}"&gt; 
                  &lt;div class="stretchy-wrapper bx overlay-post"&gt; 
                    &lt;div [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;       
              &lt;/md-card&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div fxLayout="row" fxLayout.lt-sm="column"&gt;
            &lt;div fxFlex="50" style="width:100%; padding-right:8px; padding-left:8px;" *ngFor="let post of cover.rowTwo"&gt;
              &lt;md-card style="padding:0px !important;" (click)="openPost(post.id)" class="cursor-pointer animated fadeIn"&gt;
                &lt;div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}"&gt; 
                  &lt;div class="stretchy-wrapper bx overlay-post"&gt; 
                    &lt;div [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt; 
              &lt;/md-card&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div fxLayout="row" style="padding:0px; overflow: hidden; margin-top:40px;" id="section2" class="animated fadeInTop"&gt;
    &lt;div fxFlex="70" fxFlex.xs="100" style="margin: auto;"&gt;
        &lt;div *ngFor="let array of data; let i = index" fxLayout="column" class="animated fadeIn"&gt;
          &lt;div *ngIf="i==2"&gt;
            &lt;h1&gt;SpokeOnline on YouTube&lt;/h1&gt;
          &lt;iframe  width="100%" height="600" src="https://www.youtube.com/embed/videoseries?list=PLGDMIYpr-Oq6L6dsHFxkHHs5-_AzBgSuX" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
  
          &lt;div style="margin-left: 40px" class="cat-title animated fadeIn" [id]="array.name"&gt;{{array.name}}&lt;/div&gt;
          &lt;div (mouseenter)='mouseEnter(array.name)' (mouseleave)='mouseLeave("")'  fxFlex="auto"&gt;
            &lt;div fxLayout="row"&gt;
              &lt;div style="width:100%; margin: auto;"&gt;
                &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap" fxLayoutGap="auto" fxLayoutGap.xs="0"&gt;
                  &lt;div fxFlex="2" class="post-item-arrow"&gt; 
                    &lt;div *ngIf="leftArrow &gt;0 &amp;&amp; arrow===array.name" class="post-item-arrow-navigate cursor-pointer " (click)="loadPrevious()"&gt;&lt;i class="material-icons" style="font-size: 36px"&gt;keyboard_arrow_left&lt;/i&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div fxFlex="auto" fxFlex.gt-xs="50%" [fxFlex.gt-md]="30" *ngFor="let post of array.posts"&gt;
  
                    &lt;md-card style="padding:0px !important; margin:15px;" (click)="openPost(post.id)" class="cursor-pointer animated fadeInRight wow" data-wow-delay="0.4s"&gt;
                      &lt;div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}"&gt; 
                        &lt;div class="stretchy-wrapper bx overlay-post"&gt; 
                          &lt;h3 [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"&gt;&lt;/h3&gt;
                        &lt;/div&gt;
                      &lt;/div&gt; 
                    &lt;/md-card&gt;
  
                  &lt;/div&gt;
                  &lt;div fxFlex="2" class="post-item-arrow"&gt; 
                    &lt;div *ngIf="arrow ===array.name"   class="post-item-arrow-navigate cursor-pointer " (click)="loadMore()"&gt;&lt;i class="material-icons" style="font-size: 36px"&gt;keyboard_arrow_right&lt;/i&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;div id="feed"&gt;
        &lt;h1&gt;SpokeOnline on Twitter&lt;/h1&gt;
        &lt;a class="twitter-timeline" data-height="600" href="https://twitter.com/SpokeOnline"&gt;Tweets by SpokeOnline&lt;/a&gt; &lt;script async src="//platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;!--&lt;div  style="padding:0px; margin-top: 40px;" class="animated fadeIn wow" data-wow-offset="2.0s"&gt;--&gt;
    &lt;!--&amp;lt;!&amp;ndash;&lt;div fxFlex="70" fxFlex.xs="100" style="margin: auto;"&gt;&amp;ndash;&amp;gt;--&gt;
      &lt;!--&amp;lt;!&amp;ndash;&lt;div fxFlex="34" style="margin-right:30px;"&gt;&amp;ndash;&amp;gt;--&gt;
        &lt;!--&amp;lt;!&amp;ndash;&lt;a class="twitter-timeline" href="https://twitter.com/SpokeOnline"&gt;Tweets by SpokeOnline&lt;/a&gt;&amp;ndash;&amp;gt;--&gt;
      &lt;!--&amp;lt;!&amp;ndash;&lt;/div&gt;&amp;ndash;&amp;gt;--&gt;
      &lt;!--&amp;lt;!&amp;ndash;&lt;div fxFlex="66"&gt;&amp;ndash;&amp;gt;--&gt;
        &lt;!--&amp;lt;!&amp;ndash;&lt;iframe width="100%" height="600" src="https://www.youtube.com/embed/videoseries?list=PLGDMIYpr-Oq6L6dsHFxkHHs5-_AzBgSuX" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&amp;ndash;&amp;gt;--&gt;
      &lt;!--&amp;lt;!&amp;ndash;&lt;/div&gt;&amp;ndash;&amp;gt;--&gt;
    &lt;!--&amp;lt;!&amp;ndash;&lt;/div&gt;&amp;ndash;&amp;gt;--&gt;
    &lt;!--&lt;div&gt;--&gt;
      &lt;!--&lt;h1&gt;SpokeOnline on Twitter&lt;/h1&gt;--&gt;
      &lt;!--&lt;a class="twitter-timeline" href="https://twitter.com/SpokeOnline"&gt;Tweets by SpokeOnline&lt;/a&gt;--&gt;
    &lt;!--&lt;/div&gt;--&gt;
  &lt;!--&lt;/div&gt;--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.component.ts 
  Here I am initializing and calling .open() on dialogRef. This is the parent view's typescript file. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit, ViewChild, HostBinding, HostListener } from '@angular/core';
  import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
  import { FormBuilder, FormGroup } from '@angular/forms';
  import { HomeService } from './home.service'
  import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
  import { fadeInOutAnimation } from '../_animations/index';
  import { HomePostComponent } from './home.post.component'
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
    providers: [HomeService],
    animations: [fadeInOutAnimation]
  })
  export class HomeComponent implements OnInit {
    public arrow ;
    public leftArrow = 0;
    @HostBinding('@fadeInOutAnimation') fadeInOutAnimation = true;
    category: any;
    // video: any = {id: 'wzrnuUOoFNM'};
    // baseUrl:string = 'https://www.youtube.com/embed/';
  
  
  
  
    
    load: any = { per_page: 3, offset: 0, more: 3 };
    cover = { highlight: [], rowOne: [], rowTwo: [] }; // Array which contains last published pots in the json form. // ** We still have to make it display the posts most viewed instead of the last posts published **
  
    posts = { sports: [], entertainment: [] }; 
    post: any; // Variable related to when a single post is to be displayed  
    private mediaContentUrl = "http://spoketest.wordpress.com/wp-content/uploads/"; // Base link to fetch media content  
    buttonCount = { sports: 0, entertainment: 0 }; // to count next/back loading of next or previous posts in different categories
  
    constructor(private service: HomeService, private sanitizer: DomSanitizer, public dialog: MdDialog) { 
          // this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.baseUrl + this.video.id);
  
    }
  
    getCover() {
        this.service.getCoverHighlight().subscribe(data =&gt; this.cover.highlight = data);
        this.service.getCoverRowOne().subscribe(data =&gt; this.cover.rowOne = data);
        this.service.getCoverRowTwo().subscribe(data =&gt; this.cover.rowTwo = data);
    }
  
    openPost(id) {
      this.service.getPostId(id);
      this.service.getPost().subscribe(data =&gt; this.post = data);
      this.openDialog(id);
    }
  
    openDialog(id) {
      let config = new MdDialogConfig();
      let dialogRef:MdDialogRef&lt;HomePostComponent&gt; = this.dialog.open(HomePostComponent, config);
      dialogRef.componentInstance.id = id;
    }
  
    getPostId(id) {
      this.service.getPostId(id);
    }
  
    getPost(){
      this.service.getPost().subscribe(data =&gt; this.post = data);
    }
  
    data: any[]; // empty array to store initial data from all categories
    getData(){
      this.service.getCategories(this.load.per_page).subscribe(data =&gt; { 
        this.data = data;
        this.category = this.data[1];
      });
    }
  
    // getBackgroundImage() {
    //   const backgroundImage = "./conestoga.jpg";
    //   const style = `background-image: url(${backgroundImage})`;
    //   return this.sanitizer.bypassSecurityTrustHtml(style);
    // }
  
    loadMore() {
      this.leftArrow = this.leftArrow + 1;
      console.log(this.leftArrow);
      // this.service.getData(this.category.id, this.category.offset, this.load.more).subscribe(data =&gt; {
      //   this.category.posts.push(data);
      //   this.category.offset += this.load.more;
      // });
    }
  
    loadPrevious() {
      this.leftArrow = this.leftArrow - 1;
      console.log(this.leftArrow);
      // this.service.getData(this.category.id, this.category.offset, this.load.more).subscribe(data =&gt; {
      //   this.category.posts.push(data);
      //   this.category.offset += this.load.more;
      // });
    }
  
    ngOnInit() {
      this.getCover();
      this.getData();
    }
    mouseEnter(name) {
      this.arrow = name;
      console.log(this.arrow);
    }
    mouseLeave(name) {
  
      this.arrow = name;
  
      console.log(this.arrow);
  
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.post.component.ts 
  This is the modal typescript file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import {Component, EventEmitter, Input, NgModule, OnInit, Output, ViewChild} from '@angular/core';
  import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
  import { HomeService } from './home.service';
  import { Observable } from 'rxjs/Rx';
  
  
  
  @Component({
    moduleId: module.id,
    selector: 'home-post-component',
    providers: [HomeService],
    templateUrl: 'home.post.component.html'
  })
  export class HomePostComponent implements OnInit {
    loading: boolean = true;
    post;
    id;
  
    constructor( private service: HomeService, public dialogRef: MdDialogRef&lt;HomePostComponent&gt; ) { }
  
    openPost(id) {
      this.id = this.service.getPostId(id);
      this.service.getPost().subscribe(resData =&gt; this.post = resData);
    }
  
    ngOnInit() {
       this.openPost(this.id);
    }
  
  }</code></pre>
  </div>
  </div>
  </p>