Как получить переменную из ng-контейнера и сравнить с другой переменной

import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {NotifierService} from 'angular-notifier';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import {IncomeContract} from '../model/incomeContract';
import {Status} from '../model/status';
import {SubjectOfContract} from '../model/subjectOfContract';
import {IncomeContractService} from '../service/income-contract.service';
import {StatusService} from '../service/status.service';
import {SubjectOfContractService} from '../service/subjectOfContract.service';
import {HttpParams} from '@angular/common/http';
import {IncomeAdditional} from '../model/incomeAdditional';
import {IncomeAdditionalService} from '../service/income-additional.service';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-income-contract-list',
  templateUrl: './income-contract-list.component.html',
  styleUrls: ['./income-contract-list.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class IncomeContractListComponent implements OnInit {
  displayedColumns: string[] = ['id', 'number', 'date', 'client',  'subjectOfContract', 'amountOfContract','paymentProcedure',
    'termOfService', 'prepaymentDate', 'executionDate', 'currentAmount', 'controlAmount', 'delay', 'penalty', 'status', 'action'];
  displayedColumnsAdditional: string[] = ['numberOfIncome', 'number', 'date', 'client',  'subjectOfContract', 'amountOfContract','paymentProcedure',
    'termOfService', 'prepaymentDate', 'executionDate', 'currentAmount', 'controlAmount', 'delay', 'penalty', 'status', 'action'];
  dataSource: MatTableDataSource<IncomeContract[]>;
  dataSourceAdditional: MatTableDataSource<IncomeAdditional[]>;
  expandedElement: IncomeContract;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  // @ViewChild(MatSort) sort: MatSort;
  incomeList: IncomeContract[] = [];
  incomeAdditionalList: IncomeAdditional[] = [];
  exportCols = [];
  isCollapsed: boolean = true;
  isCollapsedAdd: boolean = true;
  filter = {
    number: '',
    dateStart: null,
    dateEnd: null,
    client: '',
    status: null,
    subjectOfContract: null
  };
  filterForAdditional = {
    number: '',
    dateStart: null,
    dateEnd: null,
    client: '',
    status: null,
    subjectOfContract: null
  };
  statusList: Status[] = [];
  subjectList: SubjectOfContract[] = [];

  constructor(
    private router: Router,
    private incomeService: IncomeContractService,
    private incomeAdditionalService: IncomeAdditionalService,
    private notifierService: NotifierService,
    private statusService: StatusService,
    private subjectService: SubjectOfContractService) {
    this.dataSource = new MatTableDataSource<IncomeContract[]>([]);
    this.dataSourceAdditional = new MatTableDataSource<IncomeAdditional[]>([]);
  }

  toggleCollapse() {
    this.isCollapsed = !this.isCollapsed;
  }

  toggleCollapseAdd() {
    this.isCollapsedAdd = !this.isCollapsedAdd;
  }

  ngOnInit() {
    this.updateStatusList();
    this.updateSubjectOfContractList();
    // this.restoreCols();
    this.loadData();
    this.loadAdditionalData();
  }

  editIncome(incomeContract: IncomeContract) {
    if (incomeContract != null)
      this.router.navigate(['income/' + incomeContract.id]);
    else
      this.router.navigate(['income']);
  }

  editAdditional(incomeAdditional: IncomeAdditional) {
    if (incomeAdditional != null)
      this.router.navigate(['income-additional/' + incomeAdditional.id]);
    else
      this.router.navigate(['income-additional']);
  }

  addAdditional() {
    this.router.navigate(['income-additional']);
  }

  addIncome() {
    this.router.navigate(['income']);
  }

  removeIncome(incomeContract: IncomeContract) {
    if (confirm('Вы действительно хотите удалить запись?')) {
      this.incomeService.remove(incomeContract.id).subscribe(() => {
        this.loadData();
        this.loadAdditionalData();
        this.notifierService.notify('success', 'Данные успешно удалены');
      });
    }
  }

  removeAdditional(incomeAdditional: IncomeAdditional) {
    if (confirm('Вы действительно хотите удалить запись?')) {
      this.incomeAdditionalService.remove(incomeAdditional.id).subscribe(() => {
        this.loadData();
        this.loadAdditionalData();
        this.notifierService.notify('success', 'Данные успешно удалены');
      });
    }
  }

  loadData() {
    let params = new HttpParams()
      .append('number', this.filter.number)
      .append('client', this.filter.client)
      .append('statusId', this.filter.status == null ? 0 : this.filter.status.id)
      .append('subjectOfContractId', this.filter.subjectOfContract == null ? 0 : this.filter.subjectOfContract.id)

    if (this.filter.dateStart != null)
      params = params.append('dateStart',this.filter.dateStart.getTime());
    if (this.filterForAdditional.dateEnd != null)
      params = params.append('dateEnd',this.filterForAdditional.dateEnd.getTime());

    this.incomeService.getAll({params: params}).subscribe(data => {
      this.incomeList = data;
      this.dataSource = new MatTableDataSource<IncomeContract[]>(data);
      this.dataSource.paginator = this.paginator;
      // this.sort.active = 'id';
      // this.sort.direction = 'desc';
      // this.dataSource.sort = this.sort;
    });
  }

  loadAdditionalData(){
    let params = new HttpParams()
      .append('number', this.filterForAdditional.number)
      .append('client', this.filterForAdditional.client)
      .append('statusId', this.filterForAdditional.status == null ? 0 : this.filterForAdditional.status.id)
      .append('subjectOfContractId', this.filterForAdditional.subjectOfContract == null ? 0 : this.filterForAdditional.subjectOfContract.id)

    if (this.filterForAdditional.dateStart != null)
      params = params.append('dateStart',this.filterForAdditional.dateStart.getTime());
    if (this.filterForAdditional.dateEnd != null)
      params = params.append('dateEnd',this.filterForAdditional.dateEnd.getTime());

    this.incomeAdditionalService.getAll({params: params}).subscribe(data => {
      this.incomeAdditionalList = data;
      this.dataSourceAdditional = new MatTableDataSource<IncomeAdditional[]>(data);
      this.dataSource.paginator = this.paginator;
      // this.sort.active = 'id';
      // this.sort.direction = 'desc';
      // this.dataSource.sort = this.sort;
    });
  }

  // public restoreCols(): void {
  //   this.colRemoved = false;
  //   this.exportCols = [
  //     {utility: 'id', caption: 'ID'},
  //     {utility: 'journal', caption: '№ по журналу'},
  //     {utility: 'startDate', caption: 'Дата начала события'},
  //     {utility: 'endDate', caption: 'Дата завершения события'},
  //     // {utility: 'created', caption: 'Дата создания'},
  //     {utility: 'system', caption: 'Система'},
  //     {utility: 'device', caption: 'Устройство'},
  //     {utility: 'eventTypes', caption: 'События'},
  //     {utility: 'region', caption: 'Узел сети (регион)'},
  //     // {utility: '', caption: 'Длительность' },
  //     {utility: 'problemTickets', caption: '№ ПБ'},
  //     {utility: 'operator', caption: 'Оповещения'},
  //     {utility: 'note', caption: 'Описание'},
  //     {utility: 'description', caption: 'Причина'},
  //     {utility: 'attendant', caption: 'Дежурный'}
  //     // {utility: 'category', caption: 'Категория'}
  //   ];
  //
  // }

  // downloadCSV() {
  //   this.eventService.exportCSV(this.exportCols).subscribe(data => {
  //     let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
  //     let url = window.URL.createObjectURL(blob);
  //     let filename = 'events.csv';
  //     if (navigator.msSaveOrOpenBlob) {
  //       navigator.msSaveBlob(blob, filename);
  //     } else {
  //       let a = document.createElement('a');
  //       a.href = url;
  //       a.download = filename;
  //       document.body.appendChild(a);
  //       a.click();
  //       document.body.removeChild(a);
  //     }
  //     window.URL.revokeObjectURL(url);
  //   });
  // }

  // downloadExcel() {
  //   this.eventService.exportExcel(this.exportCols).subscribe(data => {
  //     let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
  //     let url = window.URL.createObjectURL(blob);
  //     let filename = 'events.xls';
  //     if (navigator.msSaveOrOpenBlob) {
  //       navigator.msSaveBlob(blob, filename);
  //     } else {
  //       let a = document.createElement('a');
  //       a.href = url;
  //       a.download = filename;
  //       document.body.appendChild(a);
  //       a.click();
  //       document.body.removeChild(a);
  //     }
  //     window.URL.revokeObjectURL(url);
  //   });
  // }


//  ----------------------------------------------------------FILTER----------------------------------------------------

  private updateStatusList() {
    this.statusService.getAll().subscribe(response => {
      this.statusList = response;
      let emptyStatus = new Status();
      emptyStatus.id = 0;
      emptyStatus.name = 'Все';
      this.statusList.unshift(emptyStatus);
      this.filter.status = this.statusList[0];
    });
  }

  private updateSubjectOfContractList() {
    this.subjectService.getAll().subscribe(response => {
      this.subjectList = response;
      let emptySubject = new SubjectOfContract();
      emptySubject.id = 0;
      emptySubject.shortName = 'Все';
      this.subjectList.unshift(emptySubject);
      this.filter.subjectOfContract = this.subjectList[0];
    });
  }

  resetFilter() {
    this.filter.number = '';
    this.filter.client = '';
    this.filter.dateStart = null;
    this.filter.dateEnd = null;
    this.filter.status = this.statusList[0];
    this.filter.subjectOfContract = this.subjectList[0];
    this.loadData();
    this.loadAdditionalData();
  }

  resetFilterAdd() {
    this.filterForAdditional.number = '';
    this.filterForAdditional.client = '';
    this.filterForAdditional.dateStart = null;
    this.filterForAdditional.dateEnd = null;
    this.filterForAdditional.status = this.statusList[0];
    this.filterForAdditional.subjectOfContract = this.subjectList[0];
    this.loadData();
    this.loadAdditionalData();
  }
}

* {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.example-container {
  display: flex;
  flex-direction: column;
  max-height: 500px;
  min-width: 300px;
}

.mat-table {
  overflow: auto;
  max-height: 500px;
}

.element-row {
  position: relative;
}

.element-row:not(.expanded) {
  cursor: pointer;
}

.element-row:not(.expanded):hover {
  background: #f5f5f5;
}

.element-row.expanded {
  border-bottom-color: transparent;
}

table {
  border: black solid 1px;
  background-color: white;
}
mat-paginator {
  background-color: white;
}

button {
  padding: 5px;
}

#filterButton {
  margin-top: 10%;
}

table th, table td {
  padding: 5px;
  border: .1em solid rgba(0, 40, 80, 0.51);
}

.h2-header {
  color: black;
  padding: 15px 0 10px 0;
  text-align: center;
}

.space-input {
  margin-left: 8%;
}

/*###########################################################*/

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 76px 0 0;
  box-shadow: inset -1px 0 0 rgba(168, 203, 243, 0.1);
}

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  padding-left: 15px;
  margin-top: 80px;
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #2a292a;
}

.nav-link {
  display: block;
  padding: .5rem 1rem;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

.white-icon {
  color: black;
}

button:focus, button:active:focus, button.active:focus {
  outline: none !important;
  outline-style: none !important;
}

.mat-elevation-z8{
  background-color: bisque;
  border: black solid 1px;

}

.mat-header-cell{
  font-weight: bold;
  color: black;
}

.btn-menu {
  background-color: #94cdee;
  font-size: medium;
  border: black solid .1em;
  min-height: 40px;
  max-height: 40px;
  min-width: 132px;
  max-width: 132px;
  margin: 8px 16px 8px 16px;
  align-items: center;
}

.btn:hover {
  text-decoration: none
}

.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.btn.disabled, .btn:disabled {
  opacity: .65
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer
}

a.btn.disabled, fieldset:disabled a.btn {
  pointer-events: none
}

.open-event {
  background-color: pink;
}

.filter {
  background-color: white;
  height: 150%;
  padding: 10px;
  font-size: 0.8em;
}

.mat-cell {
  text-align: center ;
}

.mat-table {
  font-family: Verdana ;
}

<table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="mat-elevation-z8" style="width: 100%">
      <details>
        <summary>
         <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ID</th>
            <td mat-cell *matCellDef="let row" >{{row.id}}</td>
         </ng-container>

          <ng-container matColumnDef="number">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> № договора</th>
            <td mat-cell *matCellDef="let row" > {{row.number}}</td>
          </ng-container>

          <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Дата договора</th>
            <td mat-cell *matCellDef="let row" > {{row.date | date:'dd.MM.yyyy H:mm'}}
            </td>
          </ng-container>

          <ng-container matColumnDef="client">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Заказчик</th>
            <td mat-cell *matCellDef="let row" > {{row.client}}</td>
          </ng-container>

          <ng-container matColumnDef="subjectOfContract">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Предмет договора</th>
            <td mat-cell *matCellDef="let row" > {{row.subjectOfContract?.fullName}}</td>
          </ng-container>

          <ng-container matColumnDef="amountOfContract">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Сумма договора</th>
            <td mat-cell *matCellDef="let row" > {{row.amountOfContract}}</td>
          </ng-container>

          <ng-container matColumnDef="paymentProcedure">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Порядок расчётов</th>
            <td mat-cell *matCellDef="let row" > {{row.paymentProcedure}}</td>
          </ng-container>

          <ng-container matColumnDef="termOfService">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Срок оказания услуг</th>
            <td mat-cell *matCellDef="let row" > {{row.termOfService}}</td>
          </ng-container>

          <ng-container matColumnDef="prepaymentDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Дата аванса</th>
            <td mat-cell *matCellDef="let row" > {{row.prepaymentDate | date:'dd.MM.yyyy H:mm'}}
            </td>
          </ng-container>

          <ng-container matColumnDef="executionDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Срок исполнения договора</th>
            <td mat-cell *matCellDef="let row" > {{row.executionDate | date: 'dd.MM.yyyy H:mm'}}
            </td>
          </ng-container>

          <ng-container matColumnDef="currentAmount">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Текущая сумма</th>
            <td mat-cell *matCellDef="let row" > {{row.currentAmount}}</td>
          </ng-container>

          <ng-container matColumnDef="controlAmount">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Контрольная сумма</th>
            <td mat-cell *matCellDef="let row" > {{row.controlAmount}}</td>
          </ng-container>

          <ng-container matColumnDef="delay">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Количество просроченных дней по оплате</th>
            <td mat-cell *matCellDef="let row" > {{row.delay}}</td>
          </ng-container>

          <ng-container matColumnDef="penalty">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Сумма пени</th>
            <td mat-cell *matCellDef="let row" > {{row.penalty}}</td>
          </ng-container>

          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Статус</th>
            <td mat-cell *matCellDef="let row" > {{row.status?.name}}</td>
          </ng-container>
        </summary>
        скрытое/показанное содержимое
      </details>
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let row">
          <!--TODO rework with material-icons-->
          <button mat-icon-button (click)="addAdditional()">
            <mat-icon>add</mat-icon>
          </button>
          <br/>
          <button mat-icon-button (click)="editIncome(row)">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button (click)="removeIncome(row)">
            <mat-icon>delete</mat-icon>
          </button>
        </td>
      </ng-container>

    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div class="example-element-detail"
             [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <table mat-table [dataSource]="dataSourceAdditional" style="width: 100%" matSort>
<!--            <ng-container *ngIf="filter.number === row.numberOfIncome">-->
            <ng-container matColumnDef="numberOfIncome">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>№ основного договора</th>
              <td mat-cell *matCellDef="let row" >{{row.incomeContract?.number}}</td>
            </ng-container>

            <ng-container matColumnDef="number">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> № договора</th>
              <td mat-cell *matCellDef="let row" > {{row.number}}</td>
            </ng-container>

            <ng-container matColumnDef="date">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Дата договора</th>
              <td mat-cell *matCellDef="let row" > {{row.date | date:'dd.MM.yyyy H:mm'}}
              </td>
            </ng-container>

            <ng-container matColumnDef="client">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Заказчик</th>
              <td mat-cell *matCellDef="let row" > {{row.client}}</td>
            </ng-container>

            <ng-container matColumnDef="subjectOfContract">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Предмет договора</th>
              <td mat-cell *matCellDef="let row" > {{row.subjectOfContract?.fullName}}</td>
            </ng-container>

            <ng-container matColumnDef="amountOfContract">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Сумма договора</th>
              <td mat-cell *matCellDef="let row" > {{row.amountOfContract}}</td>
            </ng-container>

            <ng-container matColumnDef="paymentProcedure">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Порядок расчётов</th>
              <td mat-cell *matCellDef="let row" > {{row.paymentProcedure}}</td>
            </ng-container>

            <ng-container matColumnDef="termOfService">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Срок оказания услуг</th>
              <td mat-cell *matCellDef="let row" > {{row.termOfService}}</td>
            </ng-container>

            <ng-container matColumnDef="prepaymentDate">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Дата аванса</th>
              <td mat-cell *matCellDef="let row" > {{row.prepaymentDate | date:'dd.MM.yyyy H:mm'}}
              </td>
            </ng-container>

            <ng-container matColumnDef="executionDate">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Срок исполнения договора</th>
              <td mat-cell *matCellDef="let row" > {{row.executionDate | date: 'dd.MM.yyyy H:mm'}}
              </td>
            </ng-container>

            <ng-container matColumnDef="currentAmount">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Текущая сумма</th>
              <td mat-cell *matCellDef="let row" > {{row.currentAmount}}</td>
            </ng-container>

            <ng-container matColumnDef="controlAmount">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Контрольная сумма</th>
              <td mat-cell *matCellDef="let row" > {{row.controlAmount}}</td>
            </ng-container>

            <ng-container matColumnDef="delay">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Количество просроченных дней по оплате</th>
              <td mat-cell *matCellDef="let row" > {{row.delay}}</td>
            </ng-container>

            <ng-container matColumnDef="penalty">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Сумма пени</th>
              <td mat-cell *matCellDef="let row" > {{row.penalty}}</td>
            </ng-container>

            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Статус</th>
              <td mat-cell *matCellDef="let row" > {{row.status?.name}}</td>
            </ng-container>

            <ng-container matColumnDef="action">
              <th mat-header-cell *matHeaderCellDef></th>
              <td mat-cell *matCellDef="let row">
                <!--TODO rework with material-icons-->
                <button mat-icon-button (click)="editAdditional(row)">
                  <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button (click)="removeAdditional(row)">
                  <mat-icon>delete</mat-icon>
                </button>
              </td>
            </ng-container>
<!--            </ng-container>-->
            <tr mat-header-row *matHeaderRowDef="displayedColumnsAdditional"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumnsAdditional;">
            </tr>
          </table>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = element">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>