import { Component, HostBinding, Input, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-host',
  template: `<p>host works!</p>`,
  styles: [`:host(.someClass){ color: red; }`]
})
export class HostComponent implements OnInit {
 
  @Input('idVal') @HostBinding('id') id:string = 'defaultId';
  @Input() @HostBinding('class.someClass') withClass:boolean = true;
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

<app-host [idVal]="'myId'"></app-host>
<app-host [withClass]="false"></app-host>

<app-host id="myId" class="someClass">
    <p>host works!</p>
</app-host>
<app-host id="defaultId">
    <p>host works!</p>
</app-host>

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-host2',
  template: `
    <p>host2 works!</p> 
  `,
  host: {
    '[class.someClass]': 'true',
    '[class.otherClass]': 'isOther',    
    '[class.anotherClass]': 'isAnother',
    '[attr.data-url]': 'url'
  }  
})
export class Host2Component implements OnInit {
 
  url:string = 'https://google.com';
  isOther:boolean = false;
  isAnother:boolean = true;  
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

<app-host2 data-url="https://google.com" class="someClass anotherClass">
    <p>host2 works!</p>
</app-host2>