Need to slice the inner ngfor loop into 3 parts
<div class="row" *ngFor="let row of matrix; index as i">
<div class="col" *ngFor="let col of row; index as j">
<div *ngFor="let placeholder of placeholders | slice:i:j">
<ng-container [ngComponentOutlet]="placeholder.component" >
</ng-container>
</div>
</div>
</div>
There are a couple of ways around this:
$any
<p *ngFor="let item of data | slice:2:4">
{{ $any(item).parentName }}
</p>
Bracket notation
<p *ngFor="let item of data | slice:2:4">
{{ item['parentName'] }}
</p>
A function
slicedData(data : any[]) : any[] {
return data.slice(2,4)
}
<p *ngFor="let item of slicedData(data)">
{{ item['parentName'] }}
</p>
Related
I'm trying to display all the reply from this json :
https://www.reddit.com/r/AskReddit/comments/k8w43d/people_with_the_last_name_pepper_who_have.json
So, depending of the post im loading and the reply, my number of children will differ. How can I loop throught it until I reach the last reply with children (body[2].data.children) ?
Like this :
<div class="replies-box" *ngFor="let reply of comments.body[1].data.children">
<div class="reply-header">
<p class="reply-author"><b>From</b> : {{ reply.data.author }}</p>
<p class="reply-send"><b>Send</b> : {{ this.getDateReply(reply.data.created_utc) }}</p>
</div>
<div class="text-first-reply" [innerHTML]="this.getHtmlDecode(reply.data.body_html)">
</div>
</div>
I have only the first level of reply, is there a way to simply loop through them all ?
Thanks in advance.
I would use a recursion type of approach.
Develop a app-comment component and if comment has children, loop over the children and display the app-comment. That way it will loop over the comments until no more children
<div *ngIf='comment'>
<span *ngIf='comment.kind; else showComment'>Kind: {{ comment.kind }}</span>
<ng-template #showComment>
<span>{{ comment }}</span>
</ng-template>
<div>
<app-comment *ngFor='let child of comment.data?.children' [comment]='child'> </app-comment>
</div>
</div>
See this sample illustration
Simply use ngFor inside ngFor with help of ng-container (will not create extra dom elements)
<div class="replies-box">
<ng-container *ngFor="let commentBody of comments.body">
<ng-container *ngFor="let reply of commentBody.data.children">
<div class="reply-header">
<p class="reply-author">
<b>From</b> : {{ reply.data.author }}
</p>
<p class="reply-send">
<b>Send</b> : {{ this.getDateReply(reply.data.created_utc) }}
</p>
</div>
<div class="text-first-reply" [innerHTML]="this.getHtmlDecode(reply.data.body_html)">
</div>
</ng-container>
</ng-container>
</div>
I'd like to add row on each 2 elements of ngFor loop.But I couldnt handle it.
I have studentNames array like below
studentNames=[
{
name:"Jonas",
age:22,
number:"1234"
},
{
name:"Mathilda",
age:25,
number:"5432"
},
{
name:"Jacob",
age:20,
number:"4321"
},
{
name:"Ivan",
age:23,
number:"6984"
},
{
name:"Kate",
age:21,
number:"3432"
},
{
name:"James",
age:20,
number:"4312"
},
{
name:"Sean",
age:23,
number:"4321"
},
{
name:"Julia",
age:23,
number:"4321"
},
]
Here what I tried
<ng-container *ngFor="let item of studentNames;let i=index">
<div class="row" *ngIf="i%2==0">
<div class="col md-12">
{{item.name}}
</div>
</div>
</ng-container>
This only skipped when index is not even.
Here how I want to see them below(order doesnt matter only should be 2 by 2 per row).
Stackblitz example: https://stackblitz.com/edit/bootstrap-wpfukz?file=app%2Fapp.component.html
This is a bit more "hacky" approach but it's HTML-only:
<ng-container *ngFor="let item of studentNames;let i=index">
<div *ngIf="i%2==0">
<div class="row">
<div class="col md-12">
{{studentNames[i].name}}
</div>
<div class="col md-12">
{{studentNames[i + 1].name}}
</div>
</div>
</div>
</ng-container>
You can try like below. Use *ngFor exported value index and use half length of the array to continue the loop
<ng-container *ngFor="let item of studentNames; let j = index;">
<ng-container *ngIf="j < (studentNames.length / 2)">
<div class="row">
<div class="col md-6">
{{item.name}}
</div>
<div class="col md-6">
{{ studentNames[ j + (studentNames.length / 2) ].name }}
</div>
</div>
</ng-container>
</ng-container>
Working stackblitz
Note : Array length should be an even number ;)
Have a array of objects and to iterate through each object to display it on HTML.Need to add an line breaker if a specific key is repeated.
var arr = [{color: red},{fruit: grapes},{city: Bangalore} {ice-cream: chocolate},{color: yellow},{fruit: orange},{color: pink}]
Tried code
<div class="bx--row" *ngFor="let obj of arr; let i = index;">
<ng-container *ngFor="let item of obj | keyvalue">
<span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
<span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
</ng-container>
</div>
Expected output :
color: red
fruit:grapes
city: Bangalore
ice-cream: chocolate
//line breaker/space here before having key "color" repeating
color: yellow
fruit: orange
color: pink
unexpected output:
I am not exactly sure what you're after, but you could check if the property is color using *ngIf directive.
<div class="bx--row" *ngFor="let obj of arr; let i = index; let first = first">
<ng-container *ngFor="let item of obj | keyvalue">
<ng-container *ngIf="item.key === 'color' && !first">
<br />
</ng-container>
<span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
<span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
</ng-container>
</div>
Working example: Stackblitz
Update
<div class="bx--row" *ngFor="let obj of arr; let i = index; let first = first">
<ng-container *ngIf="obj.color && !first">
<br />
</ng-container>
<ng-container *ngFor="let item of obj | keyvalue">
<span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
<span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
</ng-container>
</div>
I developed a gallery of images separated by several categories.
I just want to display categories that contain images.
I have three categories: "new", "old", "try".
Of these three categories, only new and old have images. My problem is that all categories are appearing, even those that have no image (as is the case with try).
Is there a way to present only the categories that contain images?
How can I do this?
DEMO
code
<div *ngFor="let cat of Cats">
<div class="row ">
<span class="">{{cat}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of data; let j = index;">
<li class="mdc-image-list__item" *ngIf="product.Cat == cat">
<div class="mdc-image-list__image-aspect-container">
<ng-container *ngIf="product.image == null; else productImage">
<img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
</ng-container>
<ng-template #productImage>
<img [src]="product.image" class="mdc-image-list__image">
</ng-template>
</div>
</li>
</ng-container>
</ul>
</div>
The try should not be presented :(
You can wrap your category div in an <ng-container>, and then use *ngIf to check if your data array contains a product in a given category. The best way to achieve that is to have an array with product counts per given category.
Add this to your AppComponent class:
get counts() {
return this.data.reduce((obj, value) => {
if (value.Cat in obj) {
obj[value.Cat]++;
} else {
obj[value.Cat] = 1;
}
return obj;
}, {});
}
And then use this as your template:
<ng-container *ngFor="let cat of Cats">
<div *ngIf="counts[cat]">
<div class="row ">
<span class="">{{cat}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of data; let j = index;">
<li class="mdc-image-list__item" *ngIf="product.Cat == cat">
<div class="mdc-image-list__image-aspect-container">
<ng-container *ngIf="product.image == null; else productImage">
<img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
</ng-container>
<ng-template #productImage>
<img [src]="product.image" class="mdc-image-list__image">
</ng-template>
</div>
</li>
</ng-container>
</ul>
</div>
</ng-container>
You can write format function, write data as an object where the key is category, value is array of images and use keyvalue pipe.
For example:
component property: formattedData: {[key: string]: string[]} = {}
format function:
formatData(data: {image: string; cat: string}[]): void {
data.forEach((item: {image: string; cat: string}) => {
if (this.formattedData[item.cat]) {
this.formattedData[item.cat].push(item.image)
} else {
this.formattedData[item.cat] = [item.image]
}
});
}
call the format function in constructor:
constructor() {
this.formatData(this.data);
}
template:
<div *ngFor="let item of formattedData | keyvalue">
<div class="row">
<span class="">{{item.key}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let image of item.value;">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img [src]="image ? image : './assets/image-not-found.svg'" class="mdc-image-list__image" [ngClass]="{'imagenotfound': !image}">
</div>
</li>
</ng-container>
</ul>
</div>
I think it looks better because we have a little less logic in the template. You have only listed categories that have images.
I am wondering how I can only show specific values with the key-value pipe. So far I have tried to do item.value.form_name but that comes up as null when the property is set from my API. When I do item.value then it shows me all of the items in the object. I only want the form name and the organization to show.
Code:
<div class="form-details">
<div *ngFor="let item of form?.results | keyvalue">
<span class="col-6">{{item.value.id}}</span>
<span class="col-6">{{item.value.org}}</span>
</div>
</div>
How the data is being received
Try like this:
Working Demo
<div *ngFor="let item of form?.results | keyvalue">
<ng-container *ngIf="item.key == 'id' || item.key == 'org'">
<span class="col-6">{{item.value}}</span>
</ng-container>
</div>
you can try this
<div class="form-details">
<div *ngFor="let item of form?.results | keyvalue">
<span class="col-6">{{item.value.id == 'null' ? '' : item.value.id}}</span>
<span class="col-6">{{item.value.org == 'null'? '' : item.value.org}}</span>
</div>
</div>
<div class="form-details">
<div *ngFor="let item of results | keyvalue">
<div *ngIf="item.key == 'id' || item.key == 'org'">
<span class="col-6">{{item.value}}</span>
</div>
</div>
</div>
Try this, you can minimize the code with some thing like this.
<div *ngFor="let item of form?.results | keyvalue">
<ng-container *ngIf="item.key == ('id' || 'org')">
<span class="col-6">{{item.value}}</span>
</ng-container>
</div>