angular / angular/components

bug(MatExpansionPanel): accordion property should be nullable

Open
#20,152 2 comments 0 reactions 0 assignees View on GitHub
area: material/expansion P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

https://stackblitz.com/edit/angular-jxhwbd

Steps to reproduce:
1. Try to access an accordion property from an expansion panel without accordion parent.

#### Expected Behavior
`accordion` should be `MatAccordionBase | null` to reflect its definition.

#### Actual Behavior
`accordion` is defined as:

https://github.com/angular/components/blob/3a6c16f0c04ce8784b0e015a71a889864f51a5f4/src/material/expansion/expansion-panel.ts#L134

... while it's optional in fact, as the `expansion-panel` can be used without `accordion` (btw the constructor parameter should also be marked with "?"):

https://github.com/angular/components/blob/3a6c16f0c04ce8784b0e015a71a889864f51a5f4/src/material/expansion/expansion-panel.ts#L151

--

##### PS: Note that there are other places where the constructor parameter is decorated with `@Optional`, but the property itself isn't. Maybe a good candidate for a rule to prevent this mistake.

#### Environment

Angular CLI: 10.0.3
Node: 13.7.0
OS: darwin x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.3
@angular-devkit/build-angular 0.1000.3
@angular-devkit/build-optimizer 0.1000.3
@angular-devkit/build-webpack 0.1000.3
@angular-devkit/core 10.0.3
@angular-devkit/schematics 10.0.3
@angular/cdk 10.1.0
@angular/cli 10.0.3
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.1.0
@ngtools/webpack 10.0.3
@schematics/angular 10.0.3
@schematics/update 0.1000.3
rxjs 6.6.0
typescript 3.9.7
webpack 4.43.0

Contributor guide

Open the contributing guide

Research direction

Start in src/material/expansion/expansion-panel.ts at the referenced accordion property and constructor lines, then review the StackBlitz reproduction to confirm behavior without a MatAccordion parent. Done means the public typing accurately represents the absent accordion, including the constructor parameter, with relevant Angular Material tests passing.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.