component.scss

:host {
  //some css props and values
}

:host.xyz {
  //some props and values
}

:host.pqr {
  //some props and values
}

component.ts

@Component({
//all component's metadata added.
  host: {
    class: 'xyz', // how do i use class pqr here ?
  }
})
export class Component {
  type = input.required<String>(); //signal
}

component.html

<ng-content />

Problem: I want to use multiple classes in the host property which is an alternative to @HostBinding()

Alernatively: I tried using the other way with the use of signals below:

adding only the host property part.

host: { '[class.xyz]': 'type === "xyz"', '[class.pqr]': 'type === "pqr"' }

With the above piece of code, it does not apply the class because the time the class is applied the input property does not get its value.

Expecting - The classes should be applied to the host element when we pass the type inputs based on type = xyz or type = pqr as strings.

component.scss

:host {
  //some css props and values
}

:host.xyz {
  //some props and values
}

:host.pqr {
  //some props and values
}

component.ts

@Component({
//all component's metadata added.
  host: {
    class: 'xyz', // how do i use class pqr here ?
  }
})
export class Component {
  type = input.required<String>(); //signal
}

component.html

<ng-content />

Problem: I want to use multiple classes in the host property which is an alternative to @HostBinding()

Alernatively: I tried using the other way with the use of signals below:

adding only the host property part.

host: { '[class.xyz]': 'type === "xyz"', '[class.pqr]': 'type === "pqr"' }

With the above piece of code, it does not apply the class because the time the class is applied the input property does not get its value.

Expecting - The classes should be applied to the host element when we pass the type inputs based on type = xyz or type = pqr as strings.

• css
• angular
• signals
• angular-signals
• angular2-hostbinding

1 Answer 1

You have to execute the signal (type()) inside the conditional of the host:

  @Component({
    selector: 'app-child',
    template: `
      <a target="_blank" href="https://angular.dev/overview">
        Learn more about Angular
      </a>
    `,
    host: {
      '[class.xyz]': 'type() === "xyz"',
      '[class.pqr]': 'type() === "pqr"',
    },
  })
  export class Child {
    type = input.required<string>(); //signal
  }

Full Code:

CSS:

.xyz {
  background-color: red !important;
}
.pqr {
  background-color: blue !important;
}

TS:

import { Component, input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-child',
  template: `
      <a target="_blank" href="https://angular.dev/overview">
        Learn more about Angular
      </a>
    `,
  host: {
    '[class.xyz]': 'type() === "xyz"',
    '[class.pqr]': 'type() === "pqr"',
  },
})
export class Child {
  type = input.required<string>(); //signal
}

@Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    <app-child type="xyz"/><br/>
    <app-child type="pqr"/><br/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Stackblitz Demo