Expand specific mat accordion based on Search result in Angular 14

Question

I have a search for a word option above the accordion, so users can search for a specific word in the accordion and those accordions that has the words matched are expanded and the searched word is highlighted. For now the search and highlight the string part is working, but the accordions doesn't expand per the indexes selected. Only the first accordion opens by default for all search result.enter image description here Can you help with what i'm missing in the below code?

terms.ts

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../service/common.service';
import { GlossaryOfTerms } from '../model/GlossaryOfTerms.model';

@Component({
  selector: 'app-terms',
  templateUrl: './terms.component.html',
  styleUrls: ['./terms.component.scss']
})
export class GlossaryOfTermsComponent implements OnInit {
  search: string = "";
  gTerms: GlossaryOfTerms[] = [];
  step = 0;

  constructor(private commonService: CommonService) {}

  ngOnInit(): void {
    this.getTerms();
  }

  public OnSearched(searchTerm: string) {
    this.search = searchTerm;
    this.findSearchedValue();
  }

  getTerms(): void {
    this.commonService.getGlossaryOfTerms().subscribe((terms) => {
      this.gTerms = terms;
      console.log("terms", this.gTerms );
    });
  }

  findSearchedValue(): void {
    this.gTerms?.forEach((terms, index) => {
        var decription = terms.description;
        var name = terms.name;
        if(this.search != '' || undefined) {
          if ((decription?.includes(this.search)) || (name?.includes( this.search) )) {
            console.log("openindex", index);
            this.step = index;
          } else {
            console.log("closeindex", index);
            this.step = index;
          }
        }
    });
  }

}

<app-search #searchedValue (searched)="OnSearched($event)"></app-search>

  <mat-accordion multi="true">
    <mat-expansion-panel #accordianContainer *ngFor="let term of gTerms; let i = index" [expanded]="step === i">
        <mat-expansion-panel-header>
            <mat-panel-title>
              <p [innerHTML]="term.name | highlightSearch: search"></p>
            </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="content">
            <div class="content-text">
              <p [innerHTML]="term.description | highlightSearch: search"></p>
            </div>
        </div>
    </mat-expansion-panel>
  </mat-accordion>

score 0 · Accepted Answer · answered Jul 22 '22 at 19:39

I found the solution to my question, as someone can find it helpful. Open the select

  findSearchedValue(): void {
    this.step = 0;
    var searchTerm = this.search.toLowerCase();
    this.gTerms?.forEach((terms, index) => {
      if (this.search != '' || undefined) {
        if ((terms.description?.toLowerCase().includes(searchTerm)) || (terms.name?.toLowerCase().includes(searchTerm))) {
          this.step = ++this.step;
          this.openSelected(index, this.step);
        }
      }
    });
  }

  openSelected(indexed: number, step: number): boolean {
    return this.step > indexed ? true : false;
  }

*ngFor="let term of gTerms; let i=index" [expanded]="openSelected(i, step)"

Expand specific mat accordion based on Search result in Angular 14

1 Answers1