Components: Md-expansion panel opened and close events not firing on prod build (beta.11)

[tarasbobak]

Bug, feature request, or proposal:

Looks like a bug.

What is the expected behavior?

Event handler is invoked when opened and closed events happen.

What is the current behavior?

Event handler is not invoked on opened and closed events.

What are the steps to reproduce?

Attach handlers for such events in the template and check if they are invoked after being built with angular cli's ng build --prod.

What is the use-case or motivation for changing an existing behavior?

Has to be working in production build

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

I'm attaching event handlers like this:
<md-expansion-panel (closed)="onCollapse()" (opened)="onExpand()">
and process them in component. But these handlers are not invoked after prod build. It works OK when I do ng build --dev or ng serve.

[josephperrott]

@tarasbobak I was not able to replicate the issue you are seeing.

I made a quick minimal repro. You should be able to clone this repo and then run ng serve --prod. On expand and collapse of the expansion panel the counters should increase.

[tarasbobak]

@josephperrott Thank you for your response. I was investigating it a bit by myself and it looks like that it works OK when I use beta.10 in package.json and it is reproducible when targeting material builds or specific build. The reason why I need it is because of the ability to set expanded and collapsed height to the expansion panel.

[tarasbobak]

Here is the simplest reproduction as you asked: https://github.com/tarasbobak/ng-repros

[tarasbobak]

The issue is reproducible in beta.11.

[josephperrott]

Turns out this was actually caused by not including the opened and closed outputs in the decorator for MdExpansionPanel, #7309 should fix it.

[rfuhrer]

Thanks @josephperrott .

If you're like me and just upgraded your project and even ran the md -> mat upgrade so you really don't want to rollback, you can get by with this horrible hack:

<mat-expansion-panel #expPanel>
  <mat-expansion-panel-header (click)="expPanel.expanded?onExpand():onCollapse()">

This won't work if people use the keyboard to open and close a panel but it'll get me by until the next version is out.

Edit:
Just a heads up that I had some issues with my former workaround as it would sometimes fire the click event if you clicked something inside the expansion panel. Moving the click event handler down to the 'mat-expansion-panel-header' fixed the issue for me

[tarasbobak]

You can also run ng build --prod --aot=false. That way it won't be broken if aot is not critical until it is fixed in next release.

[danwulff]

Thanks @rfuhrer for the workaround.

[marxxxx]

Was this fixed with beta 12?

[jmic]

@marxxxx no, the issue is reproducible in beta.12.

[steve-todorov]

@rfuhrer thanks for sharing this workaround!

[mswilson4040]

Any update on this? Still broken in 2.0.0-beta.12

[steve-todorov]

@mswilson4040 This has been resolved now in #7309 and is merged into the master. However I'm not sure if it made it to the 5.0.0-rc0 version.

[mswilson4040]

@steve-todorov I'm still having the issue. The only way I can get it to work is to remove both --prod and --aot flags. What (specifically) needs to be upgraded to get this fix?

[willshowell]

@mswilson4040 the fix will be included in the next release. Right now, you can use one of the workarounds listed above, or try out the snapshot builds at angular/material-builds.

[rfuhrer]

@mswilson4040 The exact fix is here: https://github.com/angular/material2/pull/7309/files#diff-8646582ffcbe6b80a7296f9526f5b263 but unless you are planning to build Angular Material yourself and use that in your project, you'll probably just have to use my workaround and wait for 5.0.0rc1. The fix was merged into master after rc0 was cut but I think it's all but guaranteed that there will be another RC especially since the main point of Angular 5 was to make AOT and Build Optimizer the defaults for the CLI based projects

[thw0rted]

Did the fix get documented? The current version of the docs (Please, I am begging you to host versioned docs so I can deep link to something that isn't going to change in a week!) has an example of a "self aware panel" but it doesn't actually work:

And on the API page, it does not list any outputs for any of the components there, including opened / closed.

While you're in there anyway, wouldn't it be more consistent with the APIs of the other components to have a single event that emits a boolean representing whether it's open or not? openedChange is what SideNav uses.

[rfuhrer]

@thw0rted It looks like the docs were generated after the fix was in, but the doc site is still using the current release (rc0) of the code which has this feature broken. If you look at my workaround you can see that you can access the "expanded" property of a mat-expansion-panel, so you can make a "self aware" panel work even without working open and close events.

Current Docs:

<mat-expansion-panel (opened)="panelOpenState = true"
                        (closed)="panelOpenState = false">
     <mat-expansion-panel-header>
       <mat-panel-title>
         Self aware panel
       </mat-panel-title>
       <mat-panel-description>
         Currently I am {{panelOpenState ? 'open' : 'closed'}}
       </mat-panel-description>
     </mat-expansion-panel-header>
     <p>I'm visible because I am open</p>
   </mat-expansion-panel>

A way that would work with the current version:

<mat-expansion-panel #expPanel>
     <mat-expansion-panel-header>
       <mat-panel-title>
         Self aware panel
       </mat-panel-title>
       <mat-panel-description>
         Currently I am {{expPanel.expanded? 'open' : 'closed'}}
       </mat-panel-description>
     </mat-expansion-panel-header>
     <p>I'm visible because I am open</p>
   </mat-expansion-panel>

The docs will fix themselves here when the next version comes out. Your point about the Output's not being listed is definitely valid though. I'm sure the team would accept your pull request if you added that to the docs

[thw0rted]

Has there been any discussion of changing the two events (open/close) to one boolean event, to keep it in line with how Sidenav works?

[Splaktar]

The issue with the docs has been fixed.

[yajneshrai]

Seems like the issue still exists in angular material 5.0.2. mat-expansion-panel does not open in prod build, but works fine with dev buid and ng serve.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}