I am implementing angular 4 and have a directive in my template for validation purposes. However, I would like to first check if a specific condition is true before applying the directive. Currently, my code looks 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">Another Stuff</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">Another Stuff</a></li>
</div>
I am looking for a way to achieve 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">Another Stuff</a></li>
This way, I can avoid rewriting the entire code for just one condition and eliminate the need for conditional div. Is there a way to accomplish this?
-----******UPDATE******----- @Allabakash provided me with a potential solution:
<button [attr.md-raised-button]="condition ? '' : null"></button>
My challenge now is that my directive (which I cannot access) removes the entire element if it receives null or a name not present in the method. Here's how it functions:
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);
}
}
So, my main question is: Is there a way to use this directive with a condition inside the <li> tag that allows me to apply the directive on the element, and if the result is null, prevent the directive from being applied, thus avoiding repeating the entire menu?
Thank you for your assistance :).