Angular 4 add directive on same tag conditionally

Question

I'm using angular 4 and I have a directive that I need to add on my template to validate some stuff. But i want to first evaluate if another condition is true then apply the directive. Right now my code is like this:

<div *ngIf="groupCheck; else NoDirective" #Directive>
 <li [directive]="controlGroup"><a [routerLink]="['/account/search/', '']"
                    routerLinkActive="active">Accounts</a></li>
 <li [directive]="controlGroup"><a [routerLink]="['/orders', '']"
                    routerLinkActive="active">Orders</a></li>
 <li [directive]="DIFFERENT_GROUP"><a [routerLink]="['/report']" routerLinkActive="active">Reports</a>
                </li>
 <li [directive]="controlGroup"><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>
</div>
<div *ngIf="!groupCheck; else Directive" #NoDirective>
 <li><a [routerLink]="['/account/search/', '']" routerLinkActive="active">Accounts</a></li>
 <li><a [routerLink]="['/orders', '']" routerLinkActive="active">Orders</a></li>
 <li><a [routerLink]="['/report']" routerLinkActive="active">Reports</a></li>
 <li><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>
</div>

I want to find a way to do something like this:

<li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/account/search/', '']"
                    routerLinkActive="active">Accounts</a></li>
 <li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/orders', '']"
                    routerLinkActive="active">Orders</a></li>
 <li *NgIf="condition true add [directive]=DIFFERENTGROUP; else Don't add directive to this line/tag/element"><a [routerLink]="['/report']" routerLinkActive="active">Reports</a>
                </li>
 <li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>

So that way I won't have to rewrite the whole code for just one condition and won't need the conditional div. Is there a way to do this?

-----******UPDATE******----- @Allabakash guided me with a possible solution from a post:

<button [attr.md-raised-button]="condition ? '' : null"></button>

My problem now is that my directive (which I can't access) eliminates the whole element if it gets null or a name that doesn't appear in the method. Here's how it works:

set checkGroup(hasGroups: string) {
    if (hasGroups) {
      this.AuthService.hasOtherGroups(hasGroups, false).subscribe(res => {
        if (!res) {
          this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
        } else {
          this.el.nativeElement.style.display = '';
        }
      });
    } else {
      this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
    }
  }

Which leaves me with the big q: is there a way that I can use this directive with a condition inside the

that makes me apply the directive on the element, and if the result is null do not let the directive apply so I can avoid repeating the whole menu?

Thanks for your time :).

Answer 1

2 possibilities:

• You can put your condition in your directive (to pass data to your directive)

• Create two elements with ngIf:

  <div *ngIf="false"></div> <div *ngIf="true" myDirective></div>

Answer 2

Create your custom structural directive, pass your params into it and perform any logic you want to inside... I.e...

@Directive({ selector: '[myDirective]' })
export class MyDirective implements OnInit {
    private _config;

    @Input()
    set myDirective(config) {
        this._config = config
    }

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) {}

    ngOnInit() {
        if (this._config) {
            this.viewContainer.clear()
        } else {
            this.viewContainer.createEmbeddedView(this.templateRef);
        }
    }
}

Its just an example, but you can perform any action based on any events,:, ie Input change. observable emit, etc...

Apply structural directive the same way ngIf applied...

<ng-container *myDirective="config"></ng-container>