How to pass custom template to angular dialog

I'm new to angular, I wish to create a "generic" dialog with title, and message, and it takes in random "content". (I do not wish to pass raw Html and use innerHTML). It's easier to illustrate in React,

function Dialog(props){
return <div><h1>{props.title}</h1><p>{props.message}</p>
{props.children} <- this
</div>
}

....
ReactDOM.render(<Dialog ...>
<p class='custom'>This is custom content!</p> <-- passing custom template
</Dialog>, ...)


I know that there is < ng-content >. But how do I pass random templates (not raw html) in :

MatDialog.open(<Component>, <options>)


so that I can use it in dialog.component.html like:

<div>{{data.title}}</div>
<p>{{data.message}}</div>
** <ng-content></ng-content> **
...


Thanks!

Continue reading...