Md-Dialog issue

[SmartForger]

Hi. I am a fan of Angular Material. Recently I encountered a problem that I cannot solve with Md-Dialog. So I need your help. Please see my electron application here: https://www.dropbox.com/s/w127soblfauxha4/toefl_practice_test-win32-ia32.rar?dl=0

Bug, feature request, or proposal:

I have a problem with md-dialog.

What is the expected behavior?

The "Application Overview" should render properly after user navigates from Test Screen to Home Screen.

What is the current behavior?

The "Application Overview" doses not render properly after user navigates from Test Screen to Home Screen.

What are the steps to reproduce?

In the application First click "Application Overview". The dialog shows up as expected. Click Test Sections > Reading. Then you are in Test Screen. Now press Quit button. And then click "Application Overview". You will see the issue.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material 2.0.0-beta.3. OS: Linux/Windows/OS X. Typescript 2.1.6 The app uses Chromium engine.

Is there anything else we should know?

Here's the modal component:

// confirm-dialog.component.html
<div class="confirm-dialog">
  <h3 md-dialog-title id="hdg">{{ title }}</h3>
  <md-dialog-content>
    <div id="msg" [innerHTML]="content" tabindex="0"></div>
  </md-dialog-content>
  <md-dialog-actions fxLayout="row" fxLayoutAlign="center start">
    <button md-raised-button class="mat-primary"
            (click)="dialogRef.close(btn.value)" #button
            *ngFor="let btn of buttons">{{ btn.title }}</button>
  </md-dialog-actions>
</div>

// confirm-dialog.component.ts

import { AfterViewInit, Component, Input, Renderer, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss']
})

export class ConfirmDialogComponent implements OnInit, AfterViewInit {
  @Input() title: string;
  @Input() content: string;
  @Input() buttons: Array<any> = [
    {
      title: 'Yes',
      class: 'mat-primary',
      value: 'yes'
    }, {
      title: 'No',
      class: '',
      value: 'no'
    }
  ];
  @ViewChildren('button') elbuttons: QueryList<ElementRef>;

  constructor(private dialogRef: MdDialogRef<ConfirmDialogComponent>, private renderer: Renderer, private element: ElementRef) { }

  ngOnInit() {
    setTimeout(() => {
      this.renderer.invokeElementMethod(this.elbuttons.toArray()[0], 'focus');
    });
  }

  ngAfterViewInit() {
    this.renderer.setElementAttribute(this.element.nativeElement.parentElement, 'aria-labelledby', 'hdg');
    this.renderer.setElementAttribute(this.element.nativeElement.parentElement, 'aria-describedby', 'msg');
  }
}

When I inspect html elements, I see the confirm-dialog.component.html is rendered as it is. I don't know why this is happening.

Please help me! Thanks.

[jelbourn]

@fullstackdevs14 this seems like more of a support request than a bug report.

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc. If you have a specific bug to report, feel free to open a new issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}