How to dynamically add a directive?

by

That is a feature we are asking for in angular…read this: https://github.com/angular/angular/issues/8785

A quick and dirty way to do it is to use:

I have a directive named myHilite (to highlight text), I also have a component named MainComponent.ts. In MainComponent.ts I added this line of code…

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite();
}

If your directive requires parameters…

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite(this.elementRef);
}

Your directive may need to execute code in one of its life cycle hooks, manually call the directive’s lifecycle hook method in the parent component’s lifecycle hook method like this…

export class MainComponent {
    //...code...

    ngOnInit(){
        this.myHiliteDirective.ngOnInit();
    }
}

More Related Contents:

  1. Angular 2 Scroll to top on Route Change
  2. When to use square brackets [ ] in directives @Inputs and when not?
  3. Angular 2 Read More Directive
  4. Dynamically add event listener
  5. How to inject window into a service?
  6. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  7. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  8. Use component from another module
  9. Angular: Cannot find a differ supporting object ‘[object Object]’
  10. Angular 2 – Execute code when closing window
  11. How to iterate object keys using *ngFor?
  12. Angular 2 Form “Cannot find control with path”
  13. vs
  14. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  15. Angular 2 Basic Authentication not working
  16. How to smooth scroll to page anchor in angular 4 without plugins properly?
  17. Angular 2 + Ionic 2: Detect if an object was modified
  18. Http.get() working but not working in build(Release/Debug) in Ionic 4
  19. Property ‘json’ does not exist on type ‘Object’
  20. inject() must be called from an injection context
  21. Update parent component property from child component in Angular 2
  22. How to use variable to define templateUrl in Angular2
  23. Behaviour subject initial value null?
  24. How to Using a FormArray in a FormGroup
  25. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  26. How to validate white spaces/empty spaces? [Angular 2]
  27. angular 2 access ng-content within component
  28. Call a function every 10 seconds Angular2
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment