Creating an array dynamically in a template

Question

Say I have a simple component with a single property which holds an array of numbers:

class AppComponent {
    numbers: number[] = [1, 2, 3, 4, 5]
}

I want to display the odd numbers apart from the even numbers. Here's the template I currently have:

<div *ngFor="let number of numbers">
    <div>
        <h1>Odd Numbers</h1>
        <ul></ul>
    </div>
    <div>
        <h1>Even Numbers</h1>
        <ul></ul>
    </div>
</div>

The numbers should be listed as li items in the uls.

Also, if the array contains only even numbers, the 2nd div shouldn't be displayed.

Is this possible without storing 2 separate parts of the array?

angular 5, this is just plain js functions to achieve what you want, but you can convert it to ts easily (if you use ng 2+) — Hussein
– Hussein, Commented Apr 22, 2018 at 10:48
this will do just convert var to let and remove function keyword — Hussein
– Hussein, Commented Apr 22, 2018 at 10:50

Shashank Vivek · Accepted Answer · 2018-04-22 11:20:18Z

2

Check this out :

<div *ngFor="let number of numbers;let i = index">
    <div *ngIf="(number%2 !== 0)" id="odd">
        <h1 *ngIf="i===0">Odd Numbers</h1>
        <ul>{{number}}</ul>
    </div>
</div>

<div *ngFor="let number of numbers;let i = index">
    <div *ngIf="(number%2 === 0)" id="even">
        <h1 *ngIf="i===1">Even Numbers</h1>
        <ul>{{number}}</ul>
    </div>
</div>

I would strongly suggest you to break the html further and create child component which can handle the array logic and render accordingly.

Implementing such logic will mess up your html code. As you are saying, you are not supposed to implement this logic on the component itself which has the number:number[]. Thats the core essence of component based pages

edited Apr 22, 2018 at 11:20

answered Apr 22, 2018 at 10:53

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

7 Comments

Eyal Over a year ago

By your design, I'd have the h1 header "Odd Numbers" for every single odd number. I'd like to have a single header and all the odd numbers as li elements inside the ul.

Shashank Vivek Over a year ago

@AnDrOiD : in the same *ngFor iteration ?

Eyal Over a year ago

Didn't understand your question, sorry.

Shashank Vivek Over a year ago

It seems a bad approach if you are trying to do that in same *ngFor loop asyou'll have to write unnecessary code in html(which can be easily written on ts file) or without splitting the array in component itself

Eyal Over a year ago

Your answer works but it'd be nice if I wouldn't have to loop the array twice. My question is a simplified version of my original problem which contains a very long array.

|

Wand Maker · Accepted Answer · 2018-04-22 17:16:07Z

0

Given your markup, it seems you will have to process odd and even elements of array in separate loops. You can set up getters for odd and even numbers in your component, and use them in the template.

Component:

export class AppComponent {
  numbers: number[] = [1, 2, 3, 4, 5]

  get odds() {
    return this.numbers.filter( n => n % 2 == 1 )
  }

  get evens() {
    return this.numbers.filter( n => n % 2 == 0 )
  }
}

Template:

<div>
  <div>
      <h1>Odd Numbers</h1>
      <ul>
         <li *ngFor="let number of odds">
           {{number}}
         </li>
      </ul>
  </div>
  <div>
      <h1>Even Numbers</h1>
      <ul>
        <li *ngFor="let number of evens">
           {{number}}
         </li>
      </ul>
  </div>
</div>

edited Apr 22, 2018 at 17:16

answered Apr 22, 2018 at 17:04

Wand Maker

18.8k9 gold badges58 silver badges90 bronze badges

1 Comment

Eyal Over a year ago

Looks like the most elegant solution yet. Why is such trivial thing not possible without looping the array twice?

Collectives™ on Stack Overflow

Creating an array dynamically in a template

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related