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 undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

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]?
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.
Federico Nardone Aggiutorio

? Any answer please?

I haven't yet understood this concept. Thank
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Julian Hansen

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Federico Nardone Aggiutorio

Absolutely clear, this comparision is what I need to understand. Thank you!
Julian Hansen

You are welcome.