Angular2 Styles in a Directive

by

You can use host binding to bind to style attributes:

@Directive({
    selector: '[myHighlight]',
    host: {
      '[style.background-color]': '"yellow"',
    }
})

or

@Directive({
    selector: '[myHighlight]',
})
class MyDirective {
  @HostBinding('style.background-color')
  backgroundColor:string = 'yellow';
}

More Related Contents:

  1. NgFor doesn’t update data with Pipe in Angular2
  2. Angular: Cannot find a differ supporting object ‘[object Object]’
  3. How to dynamically add a directive?
  4. Angular 2 Scroll to top on Route Change
  5. Difference between [ngClass] vs [class] binding
  6. Apply a directive conditionally
  7. When to use square brackets [ ] in directives @Inputs and when not?
  8. How to make directives and components available globally
  9. Angular 2 Read More Directive
  10. Using a directive to add class to host element [duplicate]
  11. How to pass object from one component to another in Angular 2?
  12. How to import component into another root component in Angular 2
  13. How to detect scroll to bottom of html element
  14. What is the difference between component and directive?
  15. Angular exception: Can’t bind to ‘ngForIn’ since it isn’t a known native property
  16. Get reference to a directive used in a component
  17. Angular HTML binding
  18. What is the difference between Promises and Observables?
  19. Angular 2+ – Set base href dynamically
  20. password and confirm password field validation angular2 reactive forms
  21. Argument of type ‘string | null’ is not assignable to parameter of type ‘string’. Type ‘null’ is not assignable to type ‘string’
  22. Inheritance and dependency injection
  23. Angular 2 : routing without changing URL
  24. Cleanest way to reset forms
  25. Angular2 Tutorial (Tour of Heroes): Cannot find module ‘angular2-in-memory-web-api’
  26. Angular 2.0. Difference @View @Component
  27. Angular: How to download a file from HttpClient?
  28. Property binding vs attribute interpolation
  29. WARNING in budgets, maximum exceeded for initial
  30. angular 2 access ng-content within component

Leave a Comment