Mixing
Angular Custom Pipe for filtering Arrays
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
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
add a comment |
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
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
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 '18 at 23:30
add a comment |
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
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
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
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
edited Nov 21 '18 at 23:19
javaland235
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
asked Nov 21 '18 at 22:53
javaland235javaland235
6117
6117
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 '18 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 '18 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 '18 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 '18 at 23:30
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 23:37
ArneArne
571212
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 at 23:53
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 23:37
ArneArne
571212
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 at 23:53
add a comment |
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 '18 at 23:37
ArneArne
571212
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 at 23:53
add a comment |
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 '18 at 23:37
ArneArne
571212
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 '18 at 23:37
ArneArne
571212
answered Nov 21 '18 at 23:37
ArneArne
571212
answered Nov 21 '18 at 23:37
ArneArne
571212
answered Nov 21 '18 at 23:37
ArneArne
571212
571212
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 at 23:53
add a comment |
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 at 23:53
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 at 23:53
thanks a lot. Turning it into an impure pipe really solved this issue.
– javaland235
Nov 21 '18 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.
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 '18 at 23:30