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.