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.

ararb78 · Accepted Answer · 2018-11-12 09:28:36Z

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, 2018 at 9:28

ararb78

1,1855 gold badges21 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Archimede Over a year ago

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?

ararb78 Over a year ago

Yes, it's correct, here other example: @HostBinding('style.border-color') borderColor: string; and this.borderColor = 'pink';

Archimede Over a year ago

Perfectly understood.

Chellappan வ · Accepted Answer · 2018-11-12 07:39:56Z

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, 2018 at 7:39

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

5 Comments

Archimede Over a year ago

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.

Chellappan வ Over a year ago

you mean the style not applying or what?

Archimede Over a year ago

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!

Chellappan வ Over a year ago

Angular use shadow DOM to encapsulate the style.That is why your styles are not getting applied

Archimede Over a year ago

Thank but the question is not (not) focused to a css / dom problem but to understanding very well the HostBinding instruction.

arupjbasu · Accepted Answer · 2019-10-09 06:07:44Z

1

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.

answered Oct 9, 2019 at 6:07

arupjbasu

4014 silver badges4 bronze badges

Comments

Nejmeddine Jammeli · Accepted Answer · 2019-11-03 07:57:38Z

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 3, 2019 at 7:57

Nejmeddine Jammeli

1,0379 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular @HostBinding, simple example and fundamentals

Edit

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related