Angular search by clicked tag

Issue

In my app I am trying to make a feature that when the user click the tag it shows him all the products that have this tag...

My search request is being made with GET method over an API call... so what I am trying to achieve is that on a tag click the tag value is sent as a parameter in the url and thus returning all products with this tag in a new page... My API call works in POSTMAN but I am having trouble implementing it in Angular...

So my main questions and issues are:

1. How to make the tag clickable so it sends the value with the api request
2. How to add routerlink to the tag so it redirects to new page where it shows all the products with this tag

I am very new to Angular so please help :)

This is the image how tags are displayed in the app:

Here is my code: HTML in home.page.html for outputing the tags:

  <ion-chip *ngFor="let tag of tags">
    <ion-label>{{ tag.tags }}</ion-label>
  </ion-chip>

Code for search API in search.service.ts:

  searchByTagCall(tag: string) {
    return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        let params = new HttpParams();
        params = params.append('tag', tag);
        return this.httpClient.get(`${environment.apiUrl}search`, {headers, observe: 'response', params});
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', {replaceUrl: true});
        }
        return EMPTY;
      }),
    );
  }

Code of home.page.ts:

  searchByTag() {
    this.searchService.searchByTagCall(tag).subscribe(
      (data: any) => {
        /* what do I put here? */
      },
      error => {
        console.log('Error', error);
      });
  }

My JSON looks like this:

{
  "tags": [
    {
      "tags": "fruit"
    },
    {
      "tags": "sour"
    },
    {
      "tags": "sweet"
    },
    {
      "tags": "frozen"
    },
    {
      "tags": "fresh"
    },
    {
      "tags": "vegetable"
    },
    {
      "tags": "raw"
    }
  ]
}

Solution

Do the following changes:

home.page.html:

<ion-chip *ngFor="let tag of tags">
    <ion-label class="tag" (click)="searchByTag(tag.tags)">{{ tag.tags }}</ion-label>
</ion-chip>

home.page.scss:

// In case you need to change the cursor to be the hand icon
.tag {
    cursor: pointer; 
}

home.page.ts:

constructor(/*whatever parameters you have in your constructor already*/, private router: Router, private dataService: DataService) {
    // Whatever code you have in your constructor
}

searchByTag(tag: string) {
    this.searchService.searchByTagCall(tag).subscribe((data: any) => {
        // 1. Store the data in some service so it will be accessible for the other page
        this.dataService.tagData = data;

        // 2. Navigate to the other page (you can store the tag in the route params if you need it)
        this.router.navigate(['/tagPage/', tag]); 
    },
    error => {
        console.log('Error', error);
    });
}

Answered By - Shai