Material Angular expansion-panel example not working

Question

I'm quite new on Material Angular and I'm trying to add some components to my project.

Right now I'm trying to add the expansion-panel component example to a dialog, but the component does not work, I'm working around and I can't realize why.

I'm working on Angular 5.2.0 and Material Angular 5.2.5.

I already imported the module in the main.ts

import {MatExpansionModule} from '@angular/material/expansion';

I created the expansion-overview.component.html

<mat-accordion>
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Personal data
        </mat-panel-title>
        <mat-panel-description>
            Type your name and age
        </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
        <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Age">
    </mat-form-field>
</mat-expansion-panel>
<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>
</mat-accordion>

I created the expansion-overview.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'jhi-expansion-overview',
    templateUrl: 'expansion-overview.component.html',
})
export class ExpansionOverviewComponent {
    panelOpenState: boolean;
}

To finish I added the selector jhi-expansion-overview to my dialog

resume

    <div class="modal-header"></div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <jhi-expansion-overview></jhi-expansion-overview>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn custom custom-btn-secondary" data-dismiss="modal" (click)="clear()">
            <span jhiTranslate="entity.action.save">Save</span>
        </button>
        <button type="button" class="btn custom custom-btn-secondary" data-dismiss="modal" (click)="clear()">
            <span jhiTranslate="entity.action.cancel">Cancel</span>
        </button>
    </div>
</form>

In the end, I'm getting this as result:

screnshot result

I already use other components in my project, and this one is the only one that I'm having a problem.

Does someone knows why I'm getting this result or what I'm doing wrong ?

Thanks

In your code, in the expansion-overview.component.html the <mat-accordion> tag is not closed, probably it's for the copy/paste, right? — Kalamarico
– Kalamarico, Commented Nov 4, 2018 at 20:29
@Kalamarico Yes, at the moment that I was writing the questing I did a bad copy/past. — Tanino
– Tanino, Commented Nov 4, 2018 at 20:59

Ania · Accepted Answer · 2019-11-04 20:01:23Z

6

Go to app.modules.js and change in imports:

remove NoopAnimationsModule
add BrowserAnimationsModule

In app.modules.js

    import {BrowserAnimationsModule} from    '@angular/platform-browser/animations';

and

    imports: [
    BrowserAnimationsModule,
    ...,
    ]

edited Nov 4, 2019 at 20:01

answered Nov 4, 2019 at 19:55

Ania

3194 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tanino · Accepted Answer · 2018-11-04 21:14:49Z

3

I just found the error, in the main.ts was missing to add:

exports: [MatExpansionModule]

Now is working.

answered Nov 4, 2018 at 21:14

Tanino

1841 gold badge6 silver badges16 bronze badges

Comments

Safal Maid · Accepted Answer · 2024-12-03 12:39:17Z

0

Working for latest Angular v18 and v19

STEP 1: add import in app.config.ts

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

STEP 2: add provideAnimationsAsync in the providers array

providers: [ provideAnimationsAsync(), ]

edited Dec 3, 2024 at 12:39

answered Dec 3, 2024 at 12:35

Safal Maid

13 bronze badges

1 Comment

Community Dec 4, 2024 at 2:30

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Material Angular expansion-panel example not working

3 Answers 3

In app.modules.js

Comments

Comments

Working for latest Angular v18 and v19

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

In app.modules.js

Comments

Comments

Working for latest Angular v18 and v19

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related