Material-Ui Disable element not working

[danyhiol]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

When using material design, disable element is not working.

Expected behavior

Use material design library and have a central permission manager, where button can directly be enabled or disabled based on user permission. The default behaviour will then be disable/enable not show/hide.

Minimal reproduction of the problem with instructions

Environment

Angular version: X.Y.Z
ngx-permissions version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[AlexKhymenko]

@danyhiol Please look into this issue. #110

[AlexKhymenko]

@danyhiol Maybe You can find better solution. And post the answer here :-)

[danyhiol]

@AlexKhymenko thanks for your answer. I've already checked that. Apart from using

disableMat = () => {
    setTimeout(() => {
      this.ref._disabled = true
    })
  }

wish forces you to have it in the component itself and not in the app.component, there is no other way. I founded that using
this.renderer2.setAttribute(templateRef.elementRef.nativeElement.nextSibling, 'disabled', 'true'); does not affect material button [disabled]-directive at all. This may me linked to material itself, because native button do work.

[AlexKhymenko]

@danyhiol Yes with native it works with material unfortunately not. Maybe i can come up some solutions cause material is widespread.

[richardbartley]

So here is my workaround. I found that it was marking the container as display:none. I'm using Metronic material template and found that the ng-container was marked as display:none, even when the user had permissions.

Wrapping an extra div made my button appear and disappear correctly. Although I had to then apply the css normally provided my the mPortletHeadTools to this div wrapper.

<ng-container mPortletHeadTools>

		<!-- div wrapper needed here force ngxPermissions to render material buttons -->
		<div class="m-portlet__head-tools">

			<div *ngxPermissionsOnly="[OperationCanEdit]">
				<button (click)="editItem(selectedRowId)" [disabled]="!selectedRowId" mat-raised-button matTooltip="Edit" color="primary" type="button">
					<span translate="EDIT_BUTTON_TEXT">Edit</span>
				</button>
			</div>

		</div>
</ng-container>