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!
Archimede_PitagoricoAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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]?
Archimede_PitagoricoAuthor Commented:
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.
Archimede_PitagoricoAuthor Commented:
? Any answer please?

I haven't yet understood this concept. Thank
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
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.val('100');
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Archimede_PitagoricoAuthor Commented:
Absolutely clear, this comparision is what I need to understand. Thank you!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.