I have a data filtering functionality where I enter values in a filter popup and successfully retrieve results. I then store this data in local storage to retain it when navigating back from another page. However, upon returning to the filter component, I encounter an error: "Cannot set property 'status' of undefined at SearchUserGridComponent.autoFillAdvanceSearch". I have been struggling with this issue and would appreciate any assistance. Below is the relevant code snippet.
**SearchUserGridComponent.ts**
@ViewChild('callDialog', { static: true }) callDialog: TemplateRef<any>;
openUserAdvancedSearchPopup() {
let dialogRef = this.dialog.open(this.callDialog,{
width: "80vw",
maxWidth: "1366px",
disableClose: true
});
}
**search-user-grid.component.html**
<ng-template #callDialog let-ref>
<div *ngIf="design?.is_advanced_search_enabled" class="advanced-search" [ngClass]="{'show-advanced-search':showAdvancedSearch}">
<advanced-user-search-component *ngIf="searchColumns?.length>0" [columns]="searchColumns" [dropDown]="dropDown"
(getSearchedParams)="getSearchedParams($event)" (getSearchedTerms)="getSearchedTerms($event)"
backgroundColor="rgba(190, 190, 190, 0.4)">
</advanced-user-search-component>
</div>
</ng-template>
**advanced-user-search.component.ts**
search() {
debugger
let params = new HttpParams();
if (this.status != null && this.status != "A") {
if (this.status == "AC") {
params = params.append('isActive', "" + true)
}
else if (this.status == "I") {
params = params.append('isActive', "" + false)
}
}
...
When the user clicks the back button, the following methods are called on search-User-Grid.component.ts
**SearchUserGridComponent.ts**
ngAfterViewInit() {
if (this.isBack == "true" && this.design.screen_name == "searchUsers") {
this.showAdvancedSearch = true;
this.autoFillAdvanceSearch();
}
}
...
autoFillAdvanceSearch() {
let userSearchData = JSON.parse(localStorage.getItem("userSearchData"))
if (userSearchData != null && userSearchData != undefined) {
...