Angular component host property

Host Property

You can use host property to add class to the host of component.
This article explains what host element is and how it works.

Host Element.

When Angular renders component, template is wrapped by host an element.

Example

@Component({
  selector: 'app-component',
  template: `
    <p>Hello</p>
  `
})
export class AppComponent implements OnInit {
}

Html

<app-component _nghost-kum-c45="" class="ng-star-inserted"> // Host Element. 
   <p>Hello</p>
</app-login-form>

Add Class To Host Element

Css of component is not applied to host element, when you want your host element to has style, you can use host property.

@Component({
  selector: 'app-component',
  template: `
    <p>Hello</p>
  `,
  host: {
     class: 'position-relative'
  }
})
export class AppComponent implements OnInit {
}

Html

<app-component _nghost-kum-c45="" class="ng-star-inserted position-relative"> // Host Element. 
   <p>Hello</p>
</app-login-form>

参考

• https://angular-book.dev/ch05-09-host.html