4

I have mat-list which have mat-list-items, i make disabled Status named mat-list-item using [disabled] but it not works and give error like(Can't bind to 'disabled' since it isn't a known property of 'mat-list-item') How to make disabled particular mat-list-item in angular 6 ?

<mat-list>
  <mat-list-item routerLink="/base/notificstatus" [disabled]="payloadArray.enabled != 'true' ">Status</mat-list-item>
  <mat-list-item routerLink="/base/notifcategory">Category</mat-list-item>
</mat-list>
0

4 Answers 4

7

If you want to stop navigate to that page you can do it using ponter-events

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

<mat-list>
  <mat-list-item routerLink="/base/notificstatus"
 [ngStyle]="{'pointer-events':payloadArray.enabled == 'true' ?'auto':'none'}"
>Status</mat-list-item>
  <mat-list-item routerLink="/base/notifcategory">Category</mat-list-item>
</mat-list>
1
  • Great stuff, I didn't know that CSS could disable the mouse events, but makes total sense! I added .mat-list-item[disabled] { pointer-events: none } to my <mat-list-item [attr.disabled]="condition ? '' : null" and it works flawlessly! TYVM Commented Feb 19, 2019 at 17:17
4

Another way: you can use css.

Inside html:

<mat-list-item *ngFor="let item of itemList" (click)="!isContentLoading && loadContent(item.id)" [class.disabled]="isContentLoading">

CSS:

mat-list-item.disabled{
    cursor: not-allowed !important;
    opacity: 0.5;
    text-decoration: none;
}

Inside controller, you declare a variable, in my case 'isContentLoading', which value you can change inside method 'loadContent(item.id)', which is called on click for list item or for a button of an 'a' (anchor).

*don't forget '!important' in css, since mat-list-item has its own styling

3

You can't disable it because a mat-list-item isn't clickable by default.

What you could do is to use *ngIf to show a mat-list-item with a routerlink and a mat-list-item without a routerlink.

Something like this:

<mat-list>
    <mat-list-item routerLink="/base/notificstatus" *ngIf="!payloadArray.enabled">Status</mat-list-item>
    <mat-list-item *ngIf="payloadArray.enabled">Status</mat-list-item>
    <mat-list-item routerLink="/base/notifcategory">Category</mat-list-item>
</mat-list>
0

Here my solution based on recent project ... Inside html: (some credits to @adrian)

::ng-deep .mat-list-item-disabled {
  cursor: not-allowed !important;
  opacity: 0.5;
  text-decoration: none;
  background-color: #f9f9f9 !important;
}
<mat-list-option *ngFor="let item of payloadArray" [disabled]="!payloadArray.enabled" **>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.