'How to disable <md-expansion-panel> material2 angular2

I am facing some issues regarding official documentation of material design, they said

Expansion panels can be disabled using the disabled attribute. A disabled expansion panel can't be toggled by the user, but can still be manipulated using programmatically.

<mat-expansion-panel [disabled]="isDisabled">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

But when I am trying it throwing some error-

Uncaught Error: Template parse errors:
Can't bind to 'disabled' since it isn't a known property of 'md-expansion-panel'.
1. If 'md-expansion-panel' is an Angular component and it has 'disabled' input, then verify that it is part of this module.
2. If 'md-expansion-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

            <md-expansion-panel
            [ERROR ->][disabled]="true"

               routerLink="/settings/tools"
")

Any help?

Solution 1:^[1]

<mat-expansion-panel [disabled]="isDisabled">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

component.ts

Disabled set value - this.isDisabled= true;

Enabled set value - this.isDisabled= false;

Solution 2:^[2]

'disabled' is a defined property which straight away disables user interaction on expansion panel. Directly set the property to disable any panel.

<mat-expansion-panel disabled>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

To programmatically disable the panel please refer the below snippet which worked for me.
Note: < CONDITION > should evaluate to either true or false

<mat-expansion-panel [disabled]="<CONDITION>">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

Solution 3:^[3]

When i look at the mat-expansion-panel code (selector: 'mat-expansion-panel') i see that it does have disabled as one of it's inputs (inputs: ['disabled', 'expanded']) but i don't see it being used...

Might i suggest a workaround: Set pointer-events: none on the mat-expansion-panel.

Solution 4:^[4]

this example works

<mat-expansion-panel [hideToggle]="true" class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title>Servidores virtuales</mat-panel-title>
      </mat-expansion-panel-header>
    </mat-expansion-panel>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sanjay kumar
Solution 2
Solution 3	Carsten
Solution 4	Gerardo Bautista

'How to disable <md-expansion-panel> material2 angular2

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]