Combine HostBinding with Services in Angular Directives
You can change behaviors of element and @Component properties based on services using @HostBinding in @Directives. This allows you to build @Directives which rely on services to change behavior without the @Component ever needing to know that the Service even exists.
[00:00] We can also easily build a directive, which checks if a service is online. It will disable this button if the service is offline. I'm going to call it "online." It's not going to have any input, I'm not going to worry about putting the square brackets around it. I'll leave it like that. I'll leave it on this first button, for now.
[00:19] Let's call this directive -- we'll have the selector -- and call it online, for the attribute of online, and then, export the class online directive, and then module, add that to the declarations. Then, we'll also need a service, an injectable, an export class online service.
[00:48] This will have a property called online, which will start as "true," and then in our constructor, we'll have an interval running, saying that, "Every one second," that "this DOT online toggles randomly," I'll just say, "random." "It's greater than point 5." This is either true or false, randomly. Then, we'll add this online service to our providers.
[01:18] From here, all we have to do is take that online service, inject it into our directive, "Private online." "Online service." Then, we simply set up a host binding to "disabled," which is a property on each of these elements.
[01:36] We'll say, "Get disabled. Return this DOT online," which is a service name, and the property is also online. This property is this one on the online service.
[01:48] Let's save now. You'll see this button one will randomly toggle between disabled and enabled. When it turns grey, it's disabled. We can make that even more apparent, if we do something like add a style. We'll call this "offline."
[02:04] The style will say that the color is red, and then in my host binding, I can set up another one, which is bound to class DOT offline. The class property on the element, and then adding this and removing this class, and I'll say, "Get offline," and then, return the exact same thing, what I had saved here.
[02:30] This now toggles between red and black. When it's black it's enabled. When it's red it's disabled. Black and red. That's all linked up to this service here, which toggles on and off. I can go ahead and add this online to my other buttons. "Online." "Online."
[02:49] Now, this is going to behave on all of these three buttons. Red and black. Red -- nothing. Black, clicking "nothing." This directive is controlling the disabled property, and adding and removing this offline class based on this service.