How do I pass html to a template dialog component using Material with Angular 2/4

Viewed 19757

I want to pass custom html from a specific page to a template component for dialog created using Material (MdDialog). Untill now I can pass simple data to the template like so:

    import { Component, OnInit, Input, TemplateRef } from '@angular/core';
    import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';
    import { DialogComponent } from './dialog.component';


    @Component({
      selector: 'app-commoncontent',
      template: '
       <div class="row  pull-right">
         <button md-raised-button (click)="open()" >{{"addButton" | translate}}
         </button>
       </div>',
      styleUrls: ['./commoncontent.component.css']
    })
    export class CommoncontentComponent implements OnInit {
      constructor(public dialog : MdDialog) { }

      ngOnInit() {
      }

      open() {
          let config = new MdDialogConfig()
          let dialogRef:MdDialogRef<DialogComponent> = 
          this.dialog.open(DialogComponent, config);
          dialogRef.componentInstance.content = "Hello Angular"

      }
    }

    import { Component, OnInit, Input, TemplateRef } from '@angular/core';
    import { MdDialogRef } from '@angular/material'
    import { CommoncontentComponent } from './commoncontent.component'

    @Component({
       selector: 'dialog-common',
       template: '
         <md-dialog-content class="accent-color">
             <form class="form-horizontal" name="dialogForm">
                {{content}} 
             </form>
         </md-dialog-content>',
       styleUrls: ['./dialog.component.css']
    })
    export class DialogComponent {
      //@Input() templateDialog: TemplateRef<any>
      content:string;
      constructor(public dialogRef: MdDialogRef<DialogComponent>) {}
    }

but I am unable to pass html. I know I can use ng-content for that but I couldn't manage to make it work.

1 Answers
Related