Angular @HostBinding, simple example and fundamentals

Question

I would understand very well the Angular @HostBinding concept. Unfortunately, my book is very good but this concept is not very clearly 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() { 

(...)

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 correspondent css file, why I don't see this style (i.e. background color or something else) in the page which shows my component?

Edit

I need to understand very well the row

@HostBinding('attr.class') cssClass = 'alfa';

Is this exactly equivalent to "set the class attribute of the template element to the string cssClass assigned to value 'alfa'"? (or, in other words, is the same as the instruction "class='alfa'" in the main template tag)

And, can you please write me also an example with the same result but without the using of @hostbinding? I am sure that seeing these equivalent solutions in comparison can be very helpful for me.

score 6 · Accepted Answer · answered Nov 12 '18 at 09:28

6

In Angular, the @HostBinding() function decorator allows you to set the properties of the host element from the directive class.

Let's say you want to change the style properties such as height, width, color, margin, border, etc., or any other internal properties of the host element in the directive class. Here, you'd need to use the @HostBinding() decorator function to access these properties on the host element and assign a value to it in directive class.

The @HostBinding() decorator takes one parameter, the name of the host element property which value we want to assign in the directive.

answered Nov 12 '18 at 09:28

ararb78

1,137
5
19
44

2

Thank you very much. In other words, @HostBinding('someProperty') someVariable = 'someValue'; means: set the property of someProperty (in the tag element in which I have the selector, obviously) to the someVariable, which I have assigned to someValue. I.E.: if I want set backColor of my host element to red, I should write @HostBinding('style.color') color = 'red' or @HostBinding('style.color') color: string; if I want define the color in other points of my class. And, all is referred to the given selector. Correct? – Archimede Nov 12 '18 at 09:39
3

Yes, it's correct, here other example: @HostBinding('style.border-color') borderColor: string; and this.borderColor = 'pink'; – ararb78 Nov 12 '18 at 10:46
Perfectly understood. – Archimede Nov 12 '18 at 11:27

score 1 · Answer 2 · answered Nov 12 '18 at 07:39

1

The :host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.

Ref:https://developer.mozilla.org/en-US/docs/Web/CSS/:host()

Try this it will work

component.css

:host(.alfa){
  color: red;
}

answered Nov 12 '18 at 07:39

Chellappan வ

23,645
3
29
60

Sorry, is not what I means. Now, I try to explain more clearly in my original question. I am related to the @HostBinding row, nothing else. – Archimede Nov 12 '18 at 07:49
you mean the style not applying or what? – Chellappan வ Nov 12 '18 at 08:39
No, the main goal of my question is not focused on the style but on the HostBinding command. I have edited my original question. Thank you very much for your patience! – Archimede Nov 12 '18 at 09:05
Angular use shadow DOM to encapsulate the style.That is why your styles are not getting applied – Chellappan வ Nov 12 '18 at 09:15
Thank but the question is not (not) focused to a css / dom problem but to understanding very well the HostBinding instruction. – Archimede Nov 12 '18 at 09:31

score 1 · Answer 3 · answered Oct 09 '19 at 06:07

Using HostBinding one may set the properties of the host element, say height of the host element. @HostBinding() decorator lets one to access the height property (for example) on the element and allocate a value . HostBinding decorator takes one parameter, which is the name of the host element property. In this case height

@HostBinding('style.height') height: string;
constructor(){
  this.height = '15px';
}

Here in the question , "@HostBinding('attr.class') cssClass = 'alfa';" means that We want each "app-test-component" (the selector of the component) to have the css class alfa.

score 1 · Answer 4 · answered Nov 03 '19 at 07:57

1

@HostBinding('attr.class') cssClass = 'alfa';

this line of code mean that you put a a property called cssClass on the host element and you want every time this property change the attr.class property will change accordingly .

answered Nov 03 '19 at 07:57

Nejmeddine Jammeli

1,011
9
17

Angular @HostBinding, simple example and fundamentals

Edit

4 Answers4