title: Material Angular expansion-panel example not working
body: <p>I'm quite new on Material Angular and I'm trying to add some components to my project. </p>
  
  <p>Right now I'm trying to add the <a href="https://v5.material.angular.io/components/expansion/overview" rel="nofollow noreferrer">expansion-panel</a> component example to a dialog, but the component does not work, I'm working around and I can't realize why.</p>
  
  <p>I'm working on <strong>Angular 5.2.0</strong> and <strong>Material Angular 5.2.5</strong>.</p>
  
  <p>I already imported the module in the main.ts</p>
  
  <pre><code>import {MatExpansionModule} from '@angular/material/expansion';
  </code></pre>
  
  <p>I created the expansion-overview.component.html</p>
  
  <pre><code>&lt;mat-accordion&gt;
  &lt;mat-expansion-panel&gt;
      &lt;mat-expansion-panel-header&gt;
          &lt;mat-panel-title&gt;
              Personal data
          &lt;/mat-panel-title&gt;
          &lt;mat-panel-description&gt;
              Type your name and age
          &lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
  
      &lt;mat-form-field&gt;
          &lt;input matInput placeholder="First name"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Age"&gt;
      &lt;/mat-form-field&gt;
  &lt;/mat-expansion-panel&gt;
  &lt;mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false"&gt;
      &lt;mat-expansion-panel-header&gt;
          &lt;mat-panel-title&gt;
              Self aware panel
          &lt;/mat-panel-title&gt;
          &lt;mat-panel-description&gt;
              Currently I am {{panelOpenState ? 'open' : 'closed'}}
          &lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;I'm visible because I am open&lt;/p&gt;
  &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>I created the expansion-overview.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
      selector: 'jhi-expansion-overview',
      templateUrl: 'expansion-overview.component.html',
  })
  export class ExpansionOverviewComponent {
      panelOpenState: boolean;
  }
  </code></pre>
  
  <p>To finish I added the selector <strong>jhi-expansion-overview</strong> to my dialog</p>
  
  <p>resume</p>
  
  <pre><code>    &lt;div class="modal-header"&gt;&lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;jhi-alert-error&gt;&lt;/jhi-alert-error&gt;
          &lt;jhi-expansion-overview&gt;&lt;/jhi-expansion-overview&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn custom custom-btn-secondary" data-dismiss="modal" (click)="clear()"&gt;
              &lt;span jhiTranslate="entity.action.save"&gt;Save&lt;/span&gt;
          &lt;/button&gt;
          &lt;button type="button" class="btn custom custom-btn-secondary" data-dismiss="modal" (click)="clear()"&gt;
              &lt;span jhiTranslate="entity.action.cancel"&gt;Cancel&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the end, I'm getting this as result:</p>
  
  <p><a href="https://i.stack.imgur.com/iMTtO.png" rel="nofollow noreferrer">screnshot result</a></p>
  
  <p>I already use other components in my project, and this one is the only one that I'm having a problem.</p>
  
  <p>Does someone knows why I'm getting this result or what I'm doing wrong ?</p>
  
  <p>Thanks</p>