Its not visible here, but either your mc-workspace-card-list component is filtering out what pills are shown (searched for), or your searchService.search() method is filtering out the pills, im guessing its the latter.

You need to modify the searchService.search() method to return the complete pill-lists on the workSpaces. If you edit and post the search method theres probably a line or two that needs to be changed

I’m really new developer working on existing code base and right now my task is to show all the chips inside the card when one particular chip is selected from Chip List but I’m not really sure how to modify this code so I would be really appreciate if I can get any help or suggestion.

So right now we have multiple cards that contain their own chips and a chips list that can filter cards based on their chips. When a user select a particular chip from Chip List, it filter all the cards and only show the cards that contain the selected chip.

Situation

right now, when particular chip are selected from Chip List, all the chips inside the card are disappear/filter except the one chip that user select.

Trying to achieve

I still want the card to show every chips that it contained and not just show only what is selected by user.

<!--- Cards List -->
 <mc-workspace-card-list [workspaces]="filteredPubWorkSpaces"></mc-workspace-card-list>

<!-- Tags List -->
                <mat-chip *ngFor="let tag of tagList" [selected]="tag.state"
                    (click)="tag.state = !tag.state; changeSelected('s', tag.tag)"
                    [ngStyle]="{'background-color':tag.state? 'mediumturquoise' : '' }">
                    <img class="super-icon" *ngIf="tag.superTag || tag.type == TagType.super"
                        src="/assets/images/icons/super-tag-icon.svg">
                    {{tag.tag}}
                </mat-chip>
            </mat-chip-list>

  tagList: Tag[] = [];
  chartSearchResults: Chart[] = [];
  tagSearch: string[] = [];
  filteredPubWorkSpaces = [];

  ngOnInit(): void {
    var superTags: Tag[] = [];
    //get all the tags
    this.tagService.getAllTagsByType('super').subscribe((sTags) => {
      this.loading = true;
      if (sTags) {
        superTags = sTags;
      }
    });
    this.tagService.getAllTagsByType('user').subscribe((tags) => {
      if (tags) {
        this.tagList = superTags.concat(tags);
      }
    this.loading = false;
    });


  search(value: string, tags?: string[]) {
    if (!tags) {
      tags = [];
    }
    this.loading = true;
    this.chartSearchResults = [];
    this.searchService.search(value, tags, 0, 50).subscribe((data) => {
      if (data) {
        this.filteredPubWorkSpaces = data.results;
        for (let result of data.results) {
          if (this.chartSearchResults.length < 10) this.chartSearchResults = this.chartSearchResults.concat(result.charts);
        }
      }
      this.loading = false;
    })
  }


  changeSelected(parameter: string, query: string) {
    this.cdr.detectChanges();
    const index = this.tagSearch.indexOf(query);
    if (index >= 0) {
      this.tagSearch.splice(index, 1);
    }
    else {
      this.tagSearch.push(query);
    }
    this.search("", this.tagSearch);
  }