Loading items from array in Angular 2

Question

I would llike tot test the performance of three frontend frameworks. AngularJS Angular 2 and EmberJS.

Currently I am trying to load 1000 objects from a number array to test the performance. I have encountered dificulties with loading the items from the array into a html list when loading the page.

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input type="button" value="load items">
 <ul>
 <li  (load)="ngOnInit() "*ngFor="let number of numberArray">
 <span class="badge">{{number}}</span> 
 <li>
 </ul>`
})




export class AppComponent implements OnInit {
  ngOnInit(): void {
    var numberArray: Array<number> = [];

    for (var i = 0; i < 1000; i++) {
      numberArray.push(i);
    }
    console.log(numberArray);
  }

};

To clarify my problem: I want to load the 1000 object from my array when I load the page I look forward to your answer

You will have to expose the array to the view

Patrick Reck
– Patrick Reck

2017-06-09 09:54:15 +00:00
Commented Jun 9, 2017 at 9:54 — Patrick Reck
– Patrick Reck, Commented Jun 9, 2017 at 9:54

anoop · Accepted Answer · 2017-06-09 10:10:52Z

1

You have to bind numberArray to AppComponent class, so that it gets exposed to html.

So change var numberArray: Array<number> = []; to numberArray: Array<number> = []; ouside ngOnInit() function and then access via this

Do it like :

export class AppComponent implements OnInit {
numberArray: Array<number> = [];
  ngOnInit(): void {    
    for (var i = 0; i < 1000; i++) {
      this.numberArray.push(i);
    }
    console.log(numberArray);
  }    
};

answered Jun 9, 2017 at 10:10

anoop

3,8222 gold badges18 silver badges28 bronze badges

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

1 Comment

Charles Schoofs Over a year ago

Thank you very much

Dilanka Rathnayake · Accepted Answer · 2017-06-09 10:15:03Z

0

simply use your required html code inside a *ngIf as follows

<div *ngIf="numberArray.length > 0">
<input type="button" value="load items">
 <ul>
 <li  (load)="ngOnInit() "*ngFor="let number of numberArray">
 <span class="badge">{{number}}</span> 
 <li>
 </ul>
<div>

define numberArray variable as global variable

answered Jun 9, 2017 at 10:15

Dilanka Rathnayake

6622 gold badges11 silver badges32 bronze badges

Collectives™ on Stack Overflow

Loading items from array in Angular 2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related