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:
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!
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() {
(...)
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!
CSSAngular
Last Comment
Julian Hansen
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.
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.
ASKER
? Any answer please?
I haven't yet understood this concept. Thank
I haven't yet understood this concept. Thank
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
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.
ASKER
Absolutely clear, this comparision is what I need to understand. Thank you!
You are welcome.
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]?