Angular 2 conditionally add attribute directives [duplicate]

Question

I've seen two questions here how to conditionally add and remove attributes on an item (Is it possible to conditionally display element attributes using Angular2?) but my question is if it is possible to add and remove attribute directives ? I am able to add and remove the attribute but Angular does not "compile" the attribute as an attribute directive but the attribute just sits there doing nothing. Here is an example of 2 tags:

The first one is the one that I am trying to conditionally apply the attribute directive and the second one has it all the time.

Here is the gif:

Here is how I am applying the attribute (maybe there is a different way to apply attribute directive?)

<h1 [attr.colored]="check ? '': null">Testing something</h1>

And here is the directive:

import {Directive, ElementRef} from '@angular/core'
@Directive({
    selector: '[colored]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})

export class colorDirective {
    constructor(private el: ElementRef) {
    }
    onMouseEnter() { this.highlight("yellow"); }
    onMouseLeave() { this.highlight(null); }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

Edit: There are couple answers but they are for AngularJS (1)

Günter Zöchbauer · Accepted Answer · 2016-05-27 18:03:48Z

8

That is not supported. Directives are only applied when static HTML matches the selector.

answered May 27, 2016 at 18:03

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

6 Comments

Denko Mancheski Over a year ago

Is there any way how to force angular to recompile that element somehow to apply it ? or is there any different way how to do this? I dont need it right now but I was just curious

Günter Zöchbauer Over a year ago

Not as far as I am aware of. What you can do is to add one element with and one without the directive selector and use ngIf to switch which one should be added/removed from the DOM.

Abderrahim Over a year ago

@GünterZöchbauer can you please take a look at my question maybe you have an idea stackoverflow.com/questions/37489029/…

Günter Zöchbauer Over a year ago

Sorry, I don't know AngularJS, only Angular2

Zama Mohammed Over a year ago

@GünterZöchbauer whats the reasoning of not supporting such important functionality. ngIf doesn't sounds a solution to me. :(

|

Shashank Penumatcha · Accepted Answer · 2021-05-13 09:16:39Z

I know this is a late reply, but might help someone.

You can pass a condition as an input to the attribute directive,

<h1 colored [enable]="check">Testing something</h1>

and then in the directive

    import {Directive, ElementRef} from '@angular/core'

@Directive({
    selector: '[colored]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})
        
export class colorDirective {
    
    @Input() enable: boolean = true;

    constructor(private el: ElementRef) {
    }
    onMouseEnter() { 
        if(this.enable){
            this.highlight("yellow");  
        }
    }   

    onMouseLeave() { 
        if(this.enable){
            this.highlight(null); 
        }
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

Joakim Sandqvist · Accepted Answer · 2017-07-28 11:03:12Z

0

You could pass a flag to the directive

In directive:

ngAfterViewInit()
{
  let tooltip = this.tooltip instanceof Object ? this.tooltip : {disabled: this.tooltip};
  if (!tooltip.disabled) {
    //DO STUFF
  }
}

In DOM:

<span [tooltip]="{disabled: true}"></span>

answered Jul 28, 2017 at 11:03

Joakim Sandqvist

13811 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:10Z

-1

So before you could have a component recompile it's own $scope with $compile() but it isn't in angular2. You can compile at runtime a NEW component, here's a good SO with a few ways with dynamicComponentLoader: Equivalent of $compile in Angular 2

And another: Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

The question I have is what is the use-case of toggling directives? I can't think of why I would but I'm curious what your need is.. For most things ngIf, ngSwitch, etc. work for me while toggling..

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered May 28, 2016 at 2:50

Dennis Smolek

8,7807 gold badges33 silver badges39 bronze badges

1 Comment

Travesty3 Over a year ago

Here's my use case: I'm using Bootstrap. I created a component for text inputs so that I don't have to create the wrapper div (.form-group) and the label for the text input, and can instead just use one line for each text input, passing the label as an @Input() to the component. I have also created a CurrencyDirective to format the input as currency. Now I want to be able to set that directive on one of my text inputs, but I would have to pass a flag into the text input component that indicates whether or not the directive should be added to the <input /> element in the component.

Collectives™ on Stack Overflow

Angular 2 conditionally add attribute directives [duplicate]

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Linked

Related