I'm fairly new to Angular, and I'm trying to incorporate a button into my search/filter bar that will expand the mat-expansion-panel when clicked. The panels are located in a different component, and I'm uncertain about how to structure this.
Button HTML:
<input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
#filterTextInput
id="filter-text-input"
class="numeric-input"
type="text"
[value]="itemFilterText$ | async"
autocomplete="off"
placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
(keyup.enter)="searchForValue(searchString.value)" />
<button mat-raised-button (click)="togglePanel">Open</button>
This is where the functionality should be implemented in the TS file:
import { Component, OnInit, Output, EventEmitter, ViewChildren, QueryList, ElementRef, ChangeDetectionStrategy } from '@angular/core';
import { Worksheet, StorageArea, WorksheetItem, CountableItem, CountingUnit, ConversionUnit } from 'src/app/models';
import { StorageAreaUtilsService } from 'src/app/services/storage-area-utils.service';
import { Store } from '@ngrx/store';
import { AppState } from 'src/app/store/reducers';
import { first, filter, map, flatMap } from 'rxjs/operators';
import { SetStorageAreaExpandStatus, PatchStorageArea, GetAllCustomItemDataAttempt } from 'src/app/store/actions/worksheets.actions';
import { combineLatest, Observable } from 'rxjs';
import { PageEvent, MatPaginator } from '@angular/material';
import { InventoryConstants } from 'src/app/inventory-constants';
import { GetMeasurementUnitsAttempt } from 'src/app/store/actions/addItems.actions';
import { InventoryValueService } from 'src/app/services/inventory-value.service';
...
...
togglePanel() {
this.panelOpenState = !this.panelOpenState
}
If more code is required, please let me know. Any suggestions would be appreciated!