What is the Host element?

In angular, the host element is a concept that can be applied to directives or components.

Directive

The host element of a directive is the element the directive is attached to.

<p my-directive>text<p>

In the example above, the <p> element is the host element of the my-directive directive.

Component

The host element of a component is the selector element of the component.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
})
export class TestComponent {
  constructor() {}
}

<app-test></app-test>

In the example above, the <app-test> element is the host element.