How to filter array and show string into single place using angular pipe?

Question

I have one array in angular and one form in which I want to replace placeholder's value from that array.

check below code :

fieldType = [{
   id: 1, 
   defaultData: {
      inputPlacehoolder: 'enter Text'
   }
 },{
   id: 2, 
   defaultData: {
      inputPlacehoolder: 'enter Email'
   }
 },{
   id: 3, 
   defaultData: {
      inputPlacehoolder: 'enter Value'
   }
}]

fieldArray = [
   {
      type: 1,
      value: "demo"
   },
   {
      type: 2,
      value: "[email protected]"
   }
]

and Here is html code :

<form *ngFor="let field of fieldArray">
    <input type="text" placeholder="{{ fieldType | filterPipe: field.type : 'inputPlacehoolder' }}" />
</form>

and here is my pipe like this :

transformPipe(fieldType, id, key) {
    return fieldType.find(item => item.id == id).defaultData[key]
}

expected output should like this :

<input type="text" placeholder="enter Text" />
<input type="text" placeholder="enter Email" />

I want to filter array and show only one string in html using angular pipe. but this pipe return me error like : Multiple components match node with tagname

can anyone please suggest me how to filter array and show only single string in angular ?

I can't call function in that placeholder binding because it causes performance issues not even merge that two array for show direct value using loop.

Pipe is the only way. please help me to figure it out...

do you really have let before fieldArray in your component? — vitaliy kotov
– vitaliy kotov, Commented Mar 5, 2021 at 12:52
Nope, There is a some typing mistake. uff.... Coder's default habit.... — Mayur Kukadiya
– Mayur Kukadiya, Commented Mar 8, 2021 at 4:29

Palash Kanti Bachar · Accepted Answer · 2021-03-05 13:12:55Z

1

You can try this code:

export class FilterPipe implements PipeTransform {
  transform(fieldType: any[], id: any, key: any): any {
    let placeholder =   fieldType.filter(r => r.id == id).length>0? fieldType.filter(r => r.id == id)[0].defaultData
      .inputPlacehoolder:"";

    return placeholder;
  }
}

for more view this code: https://stackblitz.com/edit/angular-ivy-mis3fx?file=src%2Fapp%2FfilterPipe.ts

answered Mar 5, 2021 at 13:12

Palash Kanti Bachar

6164 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayur Kukadiya Over a year ago

Thanks for reply. It's working for me. I found one more solution : that I switch my passed argument in pipe and it's getting worked

Collectives™ on Stack Overflow

How to filter array and show string into single place using angular pipe?

and Here is html code :

and here is my pipe like this :

expected output should like this :

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

and Here is html code :

and here is my pipe like this :

expected output should like this :

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related