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?

Continue reading...