Creating a custom pipe in Angular 6 to return a value based on an array

Question

I'm creating a simple custom pipe which doesn't seem to work:

This is my code in the pipe which I created by the CLI:- (contain.pipe.ts)

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

@Pipe({
  name: 'contain'
})
export class ContainPipe implements PipeTransform {

  transform(likes: any, term: any): any {

    for (var i = 0; i < likes.length ; i++) {
        if (likes[i] === term) {
            return "liked";
        }else{
            return "";
        }
    }
  }

}

Here's my component simply trying to output liked or not:- (recipe.component.html)

<h2>{{ [1,12,3] | contain:12}}</h2>

It doesn't seem to output any data, even if it's true!

P.S. · Accepted Answer · 2018-06-17 00:56:33Z

3

You're close, but notice, that when you return something from for loop, you just stop it, not return every value. In your case the more proper way will be to create an empty array, and push necessary values to it, like this:

transform(likes: any, term: any): any {
    var liked = [];
    for (var i = 0; i < likes.length ; i++) {
        if (likes[i] === term) {
            liked.push(term);
        }
    }
    return liked;
}

Here I just push the term value, but you can modify this chunk for your needs. Here is a STACKBLITZ.

answered Jun 17, 2018 at 0:56

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

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

13 Comments

Mr Mohamed Over a year ago

you are simply amazing, thank you, you got few minutes, im trying to pass an array in there like <h2>{{ arr$ | contain:recipe.id}}</h2> , but i seem to fail big time?

P.S. Over a year ago

@MohamedGabr, sure, I'll help. Let me know, what are arr$ and recipe.id? Or better fork my stackblitz and modify it, it will be much easier to help.

Mr Mohamed Over a year ago

ok take a look here at recent-blog-recipes.component , i get the array from the API i created and it toke me so long to return it as an array, then im trying to compare each recipe.id with that array. github.com/Imohamedgabr/recipes-community

Mr Mohamed Over a year ago

this is how it looks in the console (3) [1, 2, 12] , and its an array but it gives out this error when i compile "TypeError: Cannot read property 'indexOf' of undefined at ContainPipe.push../src/app/contain.pipe.ts. " but seems to output fine when i output it like this {{arr$}} , it gives out the full array.

Mr Mohamed Over a year ago

this is the path src/app/welcome/recent-blog-recipes/

|

Bunyamin Coskuner · Accepted Answer · 2018-06-17 00:49:18Z

3

It is because, your code returns an empty string if it cannot find the term you are looking for at index 0.

Following loop starts at index 0, check the term if it is equal to current element. If it is, it returns liked, if it is not it returns an empty string. It does not iterate through the whole array.

for (var i = 0; i < likes.length ; i++) {
    if (likes[i] === term) {
        return "liked";
    } else{
        return "";
    }
}

Change your pipe to following

  transform(likes: any, term: any): any {
      return likes.indexOf(term) > -1 ? 'liked': '';
  }

answered Jun 17, 2018 at 0:49

Bunyamin Coskuner

8,8792 gold badges31 silver badges50 bronze badges

4 Comments

Mr Mohamed Over a year ago

you are simply amazing, thank you, you got few minutes, im trying to pass an array in there like <h2>{{ arr$ | contain:recipe.id}}</h2> , but i seem to fail big time?

Bunyamin Coskuner Over a year ago

@MohamedGabr is arr$ in format of number array? what's it's content?

Mr Mohamed Over a year ago

but how does this really iterates through all of element in likes? doesnt make sense

Bunyamin Coskuner Over a year ago

@MohamedGabr indexOf is a method of arrays. It returns the index of the item you pass into, otherwise returns -1.

Collectives™ on Stack Overflow

Creating a custom pipe in Angular 6 to return a value based on an array

2 Answers 2

13 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related