what is a Host element in Angular for a Component

Question

If I have the Component class

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
}

and index.html is

<div>
<my-app></my-app>
</div>

What would be the host element of the component? Would it be <div> or <my-app>? If it is <my-app>, is there a way to get access to the <div> (parent of AppComponent) from AppComponent?

Answer 1

For Directive, it is the element the directive is attached to. Eg h1 is the host element in below example

<h1 my-directive>
</my-comp>

For component, it is the selector of the component. Eg

selector: 'my-comp'
template: '
<h1> some heading </h1>
.....

<my-comp></my-comp>  <!-- my-comp is the host element of h1 -->