Let's say an endpoint returns this HTML:

<div data-type="section">
    <div data-type="section-header">
        Section 1
    </div>
    <div data-type="section-body">
        Lorem ipsum
    </div>
</div>

Above template will be stored in component property sections. In an Angular app we will append this HTML to the page via <div class="sections-container" [innerHtml]="sections"></div>.

Before appending HTML template to innerHtml, is it possible to add component or directive to the HTML template received from the backend?

For example we have HighlightDirective, which will set background to yellow and we want to apply it to data-type="section-header" element, so that HTML template will look like this:

<div data-type="section">
    <div data-type="section-header" appHighlight>
        Section 1
    </div>
    <div data-type="section-body">
        Lorem ipsum
    </div>
</div>

Will Angular automatically recognize the appHighlight directive and add it to the component tree? Or it's necessary to hydrate this HTML template?