Is it possible to bind a @HostBinding value like this example ?
@Input() user: User;
@HostBinding("class.temp") user.role == "Admin"
I know I can do this :
private _user: User;
@Input() set user(user: User) {
this._user = user;
this.temp = (this._user.role == "Admin");
}
@HostBinding("class.temp") temp: boolean;
but in this case, if my user change his role, the value will never be updated in this component. How to do this ?
This is how I do a host binding on an object property:
If you find yourself stuck, and just need to get the feature working. You can check for role changes on every change detection using the
DoCheck
interface. This tells Angular to callngDoCheck
for every change detection.The above adds overhead to the application, and isn't a best practice.
You should separate the input into
User
androle
like this:That's the easiest solution. As it uses Angular's own change detection.
Another solution is to make the
user
object immutable. This way a new user object is created every time a property is changed. This will also trigger change detection in Angular, and is the preferred way of working with objects in bindings.With that said, immutable has limits and can be a pain to work with.
There are other solutions such as custom observables and using
ChangeDetectRef
to tell the component something has changed. Those solutions are more involved and I think components should be kept simple.I try to follow the primitive binding rule. Where all inputs to a component are of type number or string. Avoiding arrays and objects.
In your example, does your component really need full access to the user object or just some of it's properties? If you add inputs for each property you need then you've decoupled the component from the user object and that makes it easier to test as well.