Angular Material Expansion panel click event

1
votes

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" (click)="getPrimaryAddress()">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Primay Address
    </mat-panel-title>
    <mat-panel-description>
      {{panelOpenState ? 'Hide' : 'Display'}} Address
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 1" [(ngModel)]="streetOneValue">
      <button mat-button *ngIf="streetOneValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetOneValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>

    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 2" [(ngModel)]="streetTwoValue">
      <button mat-button *ngIf="streetTwoValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetTwoValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 3" [(ngModel)]="streetThreeValue">
      <button mat-button *ngIf="streetThreeValue " matSuffix mat-icon-button aria-label="Clear" (click)="streetThreeValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Street 2" [(ngModel)]="countyValue">
      <button mat-button *ngIf="countyValue " matSuffix mat-icon-button aria-label="Clear" (click)="countyValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Post Code" [(ngModel)]="postcodeValue">
      <button mat-button *ngIf="postcodeValue " matSuffix mat-icon-button aria-label="Clear" (click)="postcodeValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>

    <mat-form-field class="example-form-field" style="margin-top: 20px;">
      <input matInput type="text" placeholder="Country" [(ngModel)]="primaryAddresscountryValue">
      <button mat-button *ngIf="primaryAddresscountryValue " matSuffix mat-icon-button aria-label="Clear" (click)="primaryAddresscountryValue=''">
                  <mat-icon>close</mat-icon>
                </button>
    </mat-form-field>
  </div>
</mat-expansion-panel>

Just started playing around with Angular Material and have run into an issue with the mat-expansion-panel. My panel hosts a series of mat-form-field elements at appear when expanded.

I have several click events one that gets the data; (click)="getPrimaryAddress() and the rest just clear the data once the X button is selected e.g (click)="streetOneValue=''"

However when I click the X button to clear a particular value the getPrimaryAddress() event fires again and just re-populates the data in the element. Is there anyway to stop the getPrimaryAddress() function from firing whenever I select the other click events?

I need the data to lazy load which is why I am handling it in a click event and not OnInit

2
htmlangularangular-material2

2 Answers

2
votes

You can do the loading in the opened event you are already using. Then you don't need to use the click event and it is also more correct. From what I understand you want to load the data when the panel expands. There is also another afterExpand event you can also use.

You get the click event on the panel when you press a button because the buttons are child elements of the panel and you handle the click also in the panel element so both receive the event. Also any mouse click inside the panel will trigger another loading which I don't think is what you want. This is why it is better you use the specific events provided by the material components.

1
votes

This may be a little late, but perhaps it will help someone out there, who is looking for lazy loading (Lazy Rendering) via mat-expansion-panel.

"By default, the expansion panel content will be initialized even when the panel is closed. To instead defer initialization until the panel is open, the content should be provided as an ng-template:"

<mat-expansion-panel>
    <mat-expansion-panel-header>
       This is the expansion title
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        Some deferred content
    </ng-template>
</mat-expansion-panel>

Source: https://material.angular.io/components/expansion/overview