Display content of a list in Angular 2? - html

Question

I am new in Angular. I am creating a component in which I am creating a list of int. An example of the content of the list is 13,14,15,22,23,24.
I want to display this content on screen in a specific way. I want the continiously integeres to be in one line and the others in the second line. For example I want this:
13:00, 14:00, 15:00 button
22:00, 23:00, 24:00 button
I am trying this but I don't want a continious list, I want two parts of the list.
<ul>
<li *ngFor="let int of listindexdisabled">{{int}}:00 </li>
</ul>
Can someone help?

Answer 1

Why don't we try to set up two loops with a SlicePipe to iterate on a portion ( 13 -> 15 and second loop 2 -> 24 )?
If you have non dynamic list and you list will always need to be cut at a certain index , this should help you
https://angular.io/api/common/SlicePipe
<ul>
<li *ngFor="let int of listindexdisabled | slice:0:3">
{{int}}:00
</li>
</ul>
<ul>
<li *ngFor="let int of listindexdisabled | slice:3:6">
{{int}}:00
</li>
</ul>
otherwise , i think that this should works
<ul>
<ng-container *ngFor="let int of listindexdisabled">
<li *ngIf="int < 22">
{{int}}:00
</li>
</ng-container>
</ul>
<ul>
<ng-container *ngFor="let int of listindexdisabled">
<li *ngIf="int > 21">
{{int}}:00
</li>
</ng-container>
</ul>

Answer 2

You can try this below code
<ul>
<li *ngFor="let int in listindexdisabled">{{int}} : 00</li>
</ul>

Answer 3

Here is a sample of what you could do: repro on Stackblitz
And in case stackblitz is not working, here is the code :
.html :
<ul *ngFor="let chunk of displayedValues">
<li>
<span *ngFor="let value of chunk">{{value}}:00 - </span>
</li>
</ul>
.ts :
import { Component, OnInit } from '#angular/core';
import { getAttrsForDirectiveMatching } from '#angular/compiler/src/render3/view/util';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
values = [13,14,15,18,19,22,23,24];
displayedValues = [];
ngOnInit(){
this.customChunk();
}
customChunk(){
let array = [];
this.values.forEach(val => {
if(array.length === 0
|| val === array[array.length-1] + 1){
array.push(val);
} else {
this.displayedValues.push(array);
array = [];
}
});
// add the last chunk
this.displayedValues.push(array);
}
}
The idea is to rework your array into an array of chunk made by numbers that follow themselves. Then you just have to do a loop inside a loop to display your values.