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:

    @Component({
      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!

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

ASKER

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

ASKER

? Any answer please?

I haven't yet understood this concept. Thank

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Federico Nardone Aggiutorio

ASKER

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

Julian Hansen

You are welcome.