Angular Custom Pipe for filtering Arrays
up vote
2
down vote
favorite
I have an array of Requirement objects and array of product objects. Every requirement has one to many relationship with products i.e. one requirement has multiple products. every product object has a requirement object in it and from this requirement object we can find out which requirement it belongs to by accessing requirement.id
value.
Now I have this HTML template
<div class="row" *ngFor="let requirement of requirements; let i= index">
<div class="col-md-12" style="margin-bottom: 15px;">
<h3 style="display: inline">{{requirement.title}}</h3>
<table class="table table-bordered table-hover">
<tr>
<th>Product Name</th>
<th>Unit Cost</th>
<th>Qty</th>
<th>Unit</th>
<th>Total Cost</th>
<th>Product Profit</th>
<th>Product VAT</th>
<th>Total Price</th>
</tr>
<tr *ngFor="let product of products | productFilter: requirement">
<td>{{product.name}}</td>
<td>{{product.unitCost}}</td>
<td>{{product.qty}}</td>
<td>{{product.unit}}</td>
<td>{{product.totalCost | number:'.'}}</td>
<td>{{product.profit | number:'.'}}</td>
<td>{{product.vat | number:'.'}}</td>
<td>{{product.totalPrice | number:'.'}}</td>
</tr>
<tr>
<td colspan="7"><strong>Sub-Total</strong></td>
<td><strong>{{requirement.requirementTotal}}</strong></td>
</tr>
</table>
</div>
</div>
The template loops through every requirement and then it fills up the products table for each requirement. I am using a custom pipe to filter the products for each requirement.
Here is the code for my custom pipe
@Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(products: Product, requirement: Requirement): Product {
const filteredProducts = products.filter(product => product.requirement.id === requirement.id);
return filteredProducts;
}
}
But it is not giving me the intended result. I have two requirements in the requirements array and 4 products in the products array. each requirement has 2 products. But each time I load the page, only 2 products from any one requirement get displayed while other two products don't show up in the table.
Please note that previously I got my intended result using *ngIf on each
<td>
element of my table using the below code
<td *ngIf = "product.requirement.id===requirement.id">{{product.name}}</td>
How can I solve this issue. Please help
angular angular-pipe
add a comment |
up vote
2
down vote
favorite
I have an array of Requirement objects and array of product objects. Every requirement has one to many relationship with products i.e. one requirement has multiple products. every product object has a requirement object in it and from this requirement object we can find out which requirement it belongs to by accessing requirement.id
value.
Now I have this HTML template
<div class="row" *ngFor="let requirement of requirements; let i= index">
<div class="col-md-12" style="margin-bottom: 15px;">
<h3 style="display: inline">{{requirement.title}}</h3>
<table class="table table-bordered table-hover">
<tr>
<th>Product Name</th>
<th>Unit Cost</th>
<th>Qty</th>
<th>Unit</th>
<th>Total Cost</th>
<th>Product Profit</th>
<th>Product VAT</th>
<th>Total Price</th>
</tr>
<tr *ngFor="let product of products | productFilter: requirement">
<td>{{product.name}}</td>
<td>{{product.unitCost}}</td>
<td>{{product.qty}}</td>
<td>{{product.unit}}</td>
<td>{{product.totalCost | number:'.'}}</td>
<td>{{product.profit | number:'.'}}</td>
<td>{{product.vat | number:'.'}}</td>
<td>{{product.totalPrice | number:'.'}}</td>
</tr>
<tr>
<td colspan="7"><strong>Sub-Total</strong></td>
<td><strong>{{requirement.requirementTotal}}</strong></td>
</tr>
</table>
</div>
</div>
The template loops through every requirement and then it fills up the products table for each requirement. I am using a custom pipe to filter the products for each requirement.
Here is the code for my custom pipe
@Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(products: Product, requirement: Requirement): Product {
const filteredProducts = products.filter(product => product.requirement.id === requirement.id);
return filteredProducts;
}
}
But it is not giving me the intended result. I have two requirements in the requirements array and 4 products in the products array. each requirement has 2 products. But each time I load the page, only 2 products from any one requirement get displayed while other two products don't show up in the table.
Please note that previously I got my intended result using *ngIf on each
<td>
element of my table using the below code
<td *ngIf = "product.requirement.id===requirement.id">{{product.name}}</td>
How can I solve this issue. Please help
angular angular-pipe
The way I sorted my products is different from yours. But to give you an idea is to see the answer below and my profile. Hope this helps. stackoverflow.com/questions/41387316/…
– harold_mean2
Nov 21 at 23:30
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I have an array of Requirement objects and array of product objects. Every requirement has one to many relationship with products i.e. one requirement has multiple products. every product object has a requirement object in it and from this requirement object we can find out which requirement it belongs to by accessing requirement.id
value.
Now I have this HTML template
<div class="row" *ngFor="let requirement of requirements; let i= index">
<div class="col-md-12" style="margin-bottom: 15px;">
<h3 style="display: inline">{{requirement.title}}</h3>
<table class="table table-bordered table-hover">
<tr>
<th>Product Name</th>
<th>Unit Cost</th>
<th>Qty</th>
<th>Unit</th>
<th>Total Cost</th>
<th>Product Profit</th>
<th>Product VAT</th>
<th>Total Price</th>
</tr>
<tr *ngFor="let product of products | productFilter: requirement">
<td>{{product.name}}</td>
<td>{{product.unitCost}}</td>
<td>{{product.qty}}</td>
<td>{{product.unit}}</td>
<td>{{product.totalCost | number:'.'}}</td>
<td>{{product.profit | number:'.'}}</td>
<td>{{product.vat | number:'.'}}</td>
<td>{{product.totalPrice | number:'.'}}</td>
</tr>
<tr>
<td colspan="7"><strong>Sub-Total</strong></td>
<td><strong>{{requirement.requirementTotal}}</strong></td>
</tr>
</table>
</div>
</div>
The template loops through every requirement and then it fills up the products table for each requirement. I am using a custom pipe to filter the products for each requirement.
Here is the code for my custom pipe
@Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(products: Product, requirement: Requirement): Product {
const filteredProducts = products.filter(product => product.requirement.id === requirement.id);
return filteredProducts;
}
}
But it is not giving me the intended result. I have two requirements in the requirements array and 4 products in the products array. each requirement has 2 products. But each time I load the page, only 2 products from any one requirement get displayed while other two products don't show up in the table.
Please note that previously I got my intended result using *ngIf on each
<td>
element of my table using the below code
<td *ngIf = "product.requirement.id===requirement.id">{{product.name}}</td>
How can I solve this issue. Please help
angular angular-pipe
I have an array of Requirement objects and array of product objects. Every requirement has one to many relationship with products i.e. one requirement has multiple products. every product object has a requirement object in it and from this requirement object we can find out which requirement it belongs to by accessing requirement.id
value.
Now I have this HTML template
<div class="row" *ngFor="let requirement of requirements; let i= index">
<div class="col-md-12" style="margin-bottom: 15px;">
<h3 style="display: inline">{{requirement.title}}</h3>
<table class="table table-bordered table-hover">
<tr>
<th>Product Name</th>
<th>Unit Cost</th>
<th>Qty</th>
<th>Unit</th>
<th>Total Cost</th>
<th>Product Profit</th>
<th>Product VAT</th>
<th>Total Price</th>
</tr>
<tr *ngFor="let product of products | productFilter: requirement">
<td>{{product.name}}</td>
<td>{{product.unitCost}}</td>
<td>{{product.qty}}</td>
<td>{{product.unit}}</td>
<td>{{product.totalCost | number:'.'}}</td>
<td>{{product.profit | number:'.'}}</td>
<td>{{product.vat | number:'.'}}</td>
<td>{{product.totalPrice | number:'.'}}</td>
</tr>
<tr>
<td colspan="7"><strong>Sub-Total</strong></td>
<td><strong>{{requirement.requirementTotal}}</strong></td>
</tr>
</table>
</div>
</div>
The template loops through every requirement and then it fills up the products table for each requirement. I am using a custom pipe to filter the products for each requirement.
Here is the code for my custom pipe
@Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(products: Product, requirement: Requirement): Product {
const filteredProducts = products.filter(product => product.requirement.id === requirement.id);
return filteredProducts;
}
}
But it is not giving me the intended result. I have two requirements in the requirements array and 4 products in the products array. each requirement has 2 products. But each time I load the page, only 2 products from any one requirement get displayed while other two products don't show up in the table.
Please note that previously I got my intended result using *ngIf on each
<td>
element of my table using the below code
<td *ngIf = "product.requirement.id===requirement.id">{{product.name}}</td>
How can I solve this issue. Please help
angular angular-pipe
angular angular-pipe
edited Nov 21 at 23:19
asked Nov 21 at 22:53
Econ_newbie
356
356
The way I sorted my products is different from yours. But to give you an idea is to see the answer below and my profile. Hope this helps. stackoverflow.com/questions/41387316/…
– harold_mean2
Nov 21 at 23:30
add a comment |
The way I sorted my products is different from yours. But to give you an idea is to see the answer below and my profile. Hope this helps. stackoverflow.com/questions/41387316/…
– harold_mean2
Nov 21 at 23:30
The way I sorted my products is different from yours. But to give you an idea is to see the answer below and my profile. Hope this helps. stackoverflow.com/questions/41387316/…
– harold_mean2
Nov 21 at 23:30
The way I sorted my products is different from yours. But to give you an idea is to see the answer below and my profile. Hope this helps. stackoverflow.com/questions/41387316/…
– harold_mean2
Nov 21 at 23:30
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
Why wouldn't you just use an *ngIf on the tr and be done? I'd honestly solve it by presorting the data using a map, but I see no reason why a single *ngIf on the tr wouldn't work.
Anyhow, your pipe doesn't work because you for your purpose would need an impure pipe, and you explicitly have to identify the pipe as such. See https://angular.io/guide/pipes#pure-and-impure-pipes
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
Why wouldn't you just use an *ngIf on the tr and be done? I'd honestly solve it by presorting the data using a map, but I see no reason why a single *ngIf on the tr wouldn't work.
Anyhow, your pipe doesn't work because you for your purpose would need an impure pipe, and you explicitly have to identify the pipe as such. See https://angular.io/guide/pipes#pure-and-impure-pipes
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
add a comment |
up vote
1
down vote
Why wouldn't you just use an *ngIf on the tr and be done? I'd honestly solve it by presorting the data using a map, but I see no reason why a single *ngIf on the tr wouldn't work.
Anyhow, your pipe doesn't work because you for your purpose would need an impure pipe, and you explicitly have to identify the pipe as such. See https://angular.io/guide/pipes#pure-and-impure-pipes
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
add a comment |
up vote
1
down vote
up vote
1
down vote
Why wouldn't you just use an *ngIf on the tr and be done? I'd honestly solve it by presorting the data using a map, but I see no reason why a single *ngIf on the tr wouldn't work.
Anyhow, your pipe doesn't work because you for your purpose would need an impure pipe, and you explicitly have to identify the pipe as such. See https://angular.io/guide/pipes#pure-and-impure-pipes
Why wouldn't you just use an *ngIf on the tr and be done? I'd honestly solve it by presorting the data using a map, but I see no reason why a single *ngIf on the tr wouldn't work.
Anyhow, your pipe doesn't work because you for your purpose would need an impure pipe, and you explicitly have to identify the pipe as such. See https://angular.io/guide/pipes#pure-and-impure-pipes
answered Nov 21 at 23:37
Arne
499212
499212
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
add a comment |
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
thanks a lot. Turning it into an impure pipe really solved this issue.
– Econ_newbie
Nov 21 at 23:53
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421568%2fangular-custom-pipe-for-filtering-arrays%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The way I sorted my products is different from yours. But to give you an idea is to see the answer below and my profile. Hope this helps. stackoverflow.com/questions/41387316/…
– harold_mean2
Nov 21 at 23:30