We help IT Professionals succeed at work.

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!
Watch Question

Most Valuable Expert 2017
Distinguished Expert 2019

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]?
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
Most Valuable Expert 2017
Distinguished Expert 2019
HostBinding is a mechanism whereby the controller code for the Directive (usually) can access the native element it is attached to.

In the old days with jQuery we would select the element

var el = $('#idofelement')

Open in new window

And from there we would manipulate the element as required.
el.prop('checked', true);

Open in new window

In angular we use host binding in directives to access the host element in the same way.

I am not familiar with its use in components though - I find it strange that your book will give that as an example - its typical use case is a directive.
Absolutely clear, this comparision is what I need to understand. Thank you!
Most Valuable Expert 2017
Distinguished Expert 2019

You are welcome.