Learning TypeScript 2.x - Second Edition

Working with the component's host

In this section, we are going to demonstrate how we can use the host setting in our components to control how the component host is rendered. When a component is rendered, Angular will always create a DOM element that matches the name of the component selector. This DOM element is known as the host. For example, take a look at the following component:

@Component({ 
    selector: "app-row", 
    template: ` 
        <div class="row"> 
            <ng-content></ng-content> 
        </div> 
    ` 
}) 
export class RowComponent {} 

It can be consumed by other components as:

<app-row> 
    Hello! 
</app-row> 

However, it will be rendered as:

<app-row> 
    <div class="row"> 
        Hello! 
    </div> 
</app-row> 

As you can see, there is an additional DOM node. Sometimes, having an ...