Material Angular expansion-panel example not working

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

Continue reading...