How to disable md-expansion-panel

Question

using Angular Material, I'm trying to disable certain expansion panels within an accordion:

The Angular Material docs for md-expansion-panel (https://material.angular.io/components/expansion/overview#expansion-panel-content) say:

Disabling a panel

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.

<md-expansion-panel [disabled]="isDisabled"> etc...

But when I put [disabled]="isDisabled" (or "true" or "false" or anything) I get the following error:

Uncaught Error: Template parse errors: Can't bind to 'disabled' since it isn't a known property of 'md-expansion-panel'.

Here's my actual template.html code:

 <md-card>
     <md-card-header><h2 md-header>Attempt to Disable Individual Expansion Panel</h2></md-card-header>
            <md-card-content>
                <md-accordion>
                    <md-expansion-panel [disabled]="isDisabled">
                        <md-expansion-panel-header>
                            <md-panel-title>
                                Here is the title of a panel
                            </md-panel-title>
                        </md-expansion-panel-header>
                        <md-panel-description>
                            Blah blah some descriptive text
                        </md-panel-description>
                        <p>
                            Here's some content just to fill out all the available blanks.
                        </p>
                    </md-expansion-panel>
                </md-accordion>
            </md-card-content>
        </md-card>

Any ideas would be greatly appreciated!! Thanks!

In this [PLUNKER](https://plnkr.co/edit/RaJERCgfmp42XxfN9h6y?p=preview) it works fine. Please make sure that you have the latest version Angular Material installed. — Philipp Kief, Sep 21 '17 at 16:37
Faisal, yes, it worked fine without [disabled]. Will try upgrading and see what happens, thanks — Mark Flegg, Sep 21 '17 at 21:21
Philipp Kief, that did the trick! I didn't even think about upgrading, as I *thought* only recently set up the project, but apparently it was older than I realized! — Mark Flegg, Sep 21 '17 at 21:52

score -1 · Answer 1 · answered Sep 21 '17 at 21:58

It turns out this does, in fact, work just fine as long as you are using a recent enough version of Angular.

For any others who might need help with this, here's how I checked and upgraded:

First, at the command line, type "ng -v" to see what version you have (just for info, not absolutely necessary).
Then, "npm install -g npm-check-updates" (installs tool which will check your entire dependencies list for available updates.
From the root of your Angular project: "npm-check-updates -u"
From there you can follow the prompts

See this question for more info: Upgrade Angular version (now: 2.4.3 or 4.0.0-beta.3) following the best practice?

How to disable md-expansion-panel

1 Answers1