ngx-permissions & material design issue

[NobodyIs001]

Hi Alex,

I'm using Angular 7 and ngx-permissions v 6.0.6 and it looks like the strategies are not working if the material design is used. A brief example:

<button mat-raised-button color="primary"  (click)='test()' 
*ngxPermissionsOnly="['ADMIN']; unauthorisedStrategy: 'ngxDisableElement'">
	ADMIN-enabled (1)
</button>

<button  (click)='test()' *ngxPermissionsOnly="['ADMIN']; unauthorisedStrategy: 'ngxDisableElement'">
	ADMIN-enabled (2)
</button>

In this example ADMIN-enabled (1) is always enabled no matter if an user is ADMIN or not. Second one ADMIN-enabled (2) has correct behaviour (disabled if the user is not ADMIN).

ngxDisableElement is identical with your example:

this.ngxpcs.addPermissionStrategy('ngxDisableElement', (tF: TemplateRef) => { this.renderer2.setAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled', 'true'); });

[AlexKhymenko]

@NobodyIs001 can i have reproduction :-) Cause i don't have time right now :-)

[NobodyIs001]

@AlexKhymenko yes, of course. Here is very simple demo: https://stackblitz.com/edit/angular-ngxpermission-material-issue?file=src%2Fapp%2Fapp.component.ts

Maybe I'm doing something wrong...

[AlexKhymenko]

@NobodyIs001 actually this is hard one. So i have tried to do it normal way but it seems impossible
Found this issue https://stackoverflow.com/questions/51935312/mat-button-set-disabled-using-an-attribute-directive

and this one https://stackoverflow.com/questions/39908967/how-to-get-reference-of-the-component-associated-with-elementref-in-angular-2/39909203#39909203

Maybe there is clever way of casting elementRef to the component but i actually don't know about this one.
You actually have a lot of options create You own directive wrapper using the services that library is providing.
Or set local varialbe

<ng-template [ngxPermissionsOnly]="['ADMIN']" (permissionsUnauthorized)="disabled = true"> </ng-template>

and then use it.
I will try to find better solution

Here is plunker of working https://stackblitz.com/edit/angular-ngxpermission-material-issue-moounv?file=src/app/app.component.ts

[AlexKhymenko]

Maybe somebody can help :-)

[NobodyIs001]

Hi Alex,

thanks for info and feedback. Have a nice day :-).

[NobodyIs001]

I'm closing the issue, because your idea based on ng-template is quite comfortable for me ;). Thanks once again. I comes from ASP.NET world as an Angular newbie so I did not know that it can be solved by this way :)

[sam17896]

bit off topic but i was playing with the stackblitz example and i notice one strange thing, while using ngx-permission on mat-tab, ngx-permission causes a little fade in animation, the content of tabs animates in from the right. With out ngx-permission its doesn't cause animation.

here is the link:
https://stackblitz.com/edit/angular-ngxpermission-material-issue-gmm2e9

[fbaldo31]

Same issue here, i use material icons in material stepper and icons cannot be rendered in a ng-template using ngxPermissions