Link to home
Create AccountLog in
Avatar of Federico Nardone Aggiutorio
Federico Nardone Aggiutorio

asked on

Angular @HostBinding simple example

Hallo, I would understand very well the Angular @HostBinding concept. Unfortunately, my book is very good but this concept is not very clear explained.

See please the code:

      selector: 'app-test-component',
      templateUrl: './test-component.component.html',
      styleUrls: ['./test-component.component.css']
    export class TestComponentComponent implements OnInit {
      @Input() dataModel:AppModel;
      @HostBinding('attr.class') cssClass = 'alfa';
      constructor() { 

Open in new window

My personal explanation: "host binding allow to set something in the host element (in this case the app-test-component tag) from within the component it self (in other words, from this file I mentioned below); in this case, I set the class attribute of this tag to the variable named cssClass and with attribute 'alfa'". Is it correct?

In this case, if I defined the 'alfa' style in the corrispondent css file, why I don't see this style (i.e. background color or something else) in the page which shows my component?

Thank you very much!
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You seem to be using HostBinding with a component instead of a directive?

HostBinding allows you to bind a variable to a property on the host element - when change detection runs these are checked so if the variable is updated your host element's property changes.

You also need to check out host css rules, Angular 2 does not propagate CSS settings down to children from the component level unless you use the :host selector.

Finally, why are you considering HostBinding in a component instead of [class]  or [ngClass]?
Avatar of Federico Nardone Aggiutorio
Federico Nardone Aggiutorio


Thank for your reply, I think, I am in the right way to understand.  Also, this was only a example from the official Ng-Book (pg. 43) about Angular 6 I am reading and I should understand it to go away to the following chapters.

So, thank for your explanation; if I correct understood, it works so:

PURPOSE: I can define something for host element from somewhere, in a way that, if this 'something' change, the same 'something' also change in the host (host: what is in the tag, where the component will render). For example, I can define the back color from the component, send via HostBinding to the host and if I change in the component the back color, also in the host it changes. Correct?

In this case, could you please write a VERY simple example similar to mine and explain how it works, in which I define something (color, text or other) and pass via host binding, so I can reply your example in my code and see in practice what happens with host binding?

Thank you very much, I think there is the once way to understand very good this concept.

PS: Why I define in that way? At this point, this is the example which my book proposed; I am sure, in the next chapters I will see also the other ways you told me.
? Any answer please?

I haven't yet understood this concept. Thank
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Absolutely clear, this comparision is what I need to understand. Thank you!
You are welcome.