How can I pass an html string to my child component?

Question

I need to pass an html string to a component in angular 4, but I can't find a way to mark the passed string as safe.

I'm creating the passed html in parent component, it's not something I get from user or retrieve from server, it's also dynamic (created depending on the situation / alert type)

My code looks like this:

<app-alert
  message = "Please complete your <span class=u>Profile</span>"
  alertType = "alert-info"
  icon = "glyphicon glyphicon-info-sign"
  closeBtn = "true">
</app-alert>

I searched a lot, but I couldn't find something suitable, the closest I could find is this question, but it only deals with "normal" strings, not strings that contains html in it

How can I pass an html string to my child component?

Answer 1

you could pass the html string as a component input. then within your child component's html use the innerHTML directive (https://www.dev6.com/Angular-2-HTML-binding)

<span [innerHTML]="componentInput"></span>