troubleshooting Question

Angular @HostBinding simple example

Avatar of Archimede_Pitagorico
Archimede_Pitagorico asked on
CSSAngular
6 Comments1 Solution160 ViewsLast Modified:
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() { 
    
    (...)

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!
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros