Как показать / Скрыть данные по условию, используя mat-slide

Question

У меня есть панель расширения мат, где я показываю адрес клиентов. Я хочу показать только активных клиентов. Сначала, когда пользователь перемещает переключатель, затем я также хочу показать адрес InActive, а когда пользователь снова нажимает на переключатель, я хочу скрыть адрес InActive. В настоящее время я показываю зеленый значок галочки перед активным адресом. Я хочу удалить его и заменить его на коврик. Как я могу это сделать

Текущий код HTML:

  <!-- Card for Address -->
              <div class="row">
                <div class="address-card col-md-12">
                  <mat-accordion>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        <mat-panel-title>
                          Address Details
                        </mat-panel-title>
                      </mat-expansion-panel-header>

                      <mat-tab-group>
                        <mat-tab *ngFor="let address of distinctAdressType" label="{{ address }}">
                          <div *ngFor="let element of sampleData1.address">
                            <div *ngIf="address.toString() === element.addressType">
                              <br />

                              <mat-label>
                                <div class="row">
                                  <div class="col-md-9">
                                    Address: {{ element.addressLine1 + ' ' + element.addressLine2 + ' ' + element.addressLine3 }}
                                  </div>

                                  <div *ngIf="element.addressStatus">
                                    <i class="fa fa-check" style="font-size:15px;color:green"></i>
                                  </div>
                                  <ng-template #inActive>
                                    <!-- <i class="fa fa-close" style="font-size:15px;color:red"></i> -->
                                  </ng-template>
                                </div>
                              </mat-label>
                              <mat-label> City: {{ element.city }}</mat-label> <br />
                              <mat-label>Agreement Id:{{ element.agreement }}</mat-label>
                              <br />

                              <br />
                            </div>
                          </div>
                        </mat-tab>
                      </mat-tab-group>
                    </mat-expansion-panel>
                  </mat-accordion>
                </div>
              </div>

машинописный код для адреса:

 // Access Address Type from API.
      this.sampleData1.address.forEach(address => {
        this.addressType.push(address.addressType);
        const addressEndDateObj = new Date(address.endDate);
        console.log('End Date: ', addressEndDateObj);
        if (addressEndDateObj.getTime() >= this.currentDate.getTime()) {
          address.addressStatus = true;
        } else {
          address.addressStatus = false;
        }
      });
      this.distinctAdressType = this.addressType.filter(this.onlyUnique);