Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Using Angular Signals with HostBinding to update style?

In a app-test component I have the following:

  @Input( { transform: booleanAttribute})
  reverse: boolean = false;

  @HostBinding('style.flex-direction')
  direction: string = this.reverse ? 'column-reverse' : 'column';

And so if the designer applies the reverse attribute to app-test like this:

<app-test reverse></app-test>

Then Angular should set style="flex-direction: column-reverse" on the app-test element.

And I’m wondering how to use Angular signals so that when reverse is set to true, direction will be set to column-reverse. Thoughts?

Tags:

2

Answers


  1. 0

    You can do the following:

    @Component({
  selector: 'app-child',
  standalone: true,
  template: 'My name (red is {{ red() }})',
})
export class AppChildComponent {
  red = input(false);

  @HostBinding('style.color')
  get color() {
    return this.red() ? 'red' : 'green';
  }
}

    And in the container component:

    @Component({
  selector: 'app-root',
  standalone: true,
  imports: [AppChildComponent],
  template: `
    <app-child [red]="true"></app-child>
  `,
})
export class App {
}

    Working example here

    Login or Signup to reply.
  2. 0

    This is being discussed in this issue. Currently the combination of @HostBinding and signals is not supported.

    The workaround for this is to use a getter:

    reverse = input.required<boolean>();

@HostBinding('attr.style.flex-direction')
get direction() { return this.reverse() ? 'column-reverse' : 'column' }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search