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.

Answer 1

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.

Answer 2

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;
}

Answer 3

@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 .

Answer 4

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.