CODEWITHSUNDEEP
angularangular-pipe
jones
jones

Reputation: 1453

Angular2 how to pass *ngFor iterated item to pipe as parameter?

Suppose I have bellow code:

<a *ngFor="let sterm; of data?.search_term | getOtherSearchTerms: sterm" href="job_search_results.do?jkw=">{{sterm}}</a>

and here is my pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'getOtherSearchTerms'
})

export class SearchTermPipe implements PipeTransform {
  otherSearchTerms;

  transform(searchTermArray: Array<any>, currentTerm: any): any {
    console.log(searchTermArray);
    console.log(currentTerm);
    return searchTermArray;
  }
}

and the log is like this:enter image description here

As you see sterm is not passed to the pipe.

Note: The main goal of using pipe here is to get all the other array elements except current value(for example in first loop i want to get all other words inside array except Software, and on second loop all other words except Engineering and the same for else.)

Note: sterm should be Software on first iteration, and Engineering on second iterate.

I want to create some think like this:

Want to create <a> tag for each keywords inside array, but pass all other words as query string to a tag. for example: 

<a href="job_search_results.do?jkw=engineering+keyword2">Software</a>
<a href="job_search_results.do?jkw=software+keyword2">Engineering</a>
<a href="job_search_results.do?jkw=software+engineering">Keyword2</a>

Upvotes: 1

Views: 843

Answers (2)

Mobasher Fasihy
Mobasher Fasihy

Reputation: 1061

Do like this:

 <ng-container *ngFor="let sterm of data?.search_term">
   <a [href]="sterm | getOtherSearchTerms:data?.search_term">{{ sterm }}</a>
 </ng-container>

and change your pipe to this:

transform(currentTerm: any, searchTermArray: Array<any>): any {
   return 'job_search_results.do?jkw='+searchTermArray;
}

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657536

If you want to modify individual items using a pipe, this should do what you want:

<ng-container *ngFor="let sterm of data?.search_term">
  <a href="job_search_results.do?jkw=">{{sterm | getOtherSearchTerms}}</a>
</ng-container>

Upvotes: 2

Related Questions