Creating a for/in loop in an Angular 2 template

Question

Is there a way to iterate over the properties of a static (Typescript) class, inside of an Angular 2 template? In other words, I want a for/in loop which iterates over an object instead of an array (so a normal *ngFor won't work). As far as I can tell, there is no directive in Angular 2 to do this, so I am wondering what the best way is?

For reasons to do with the module importing, the object must be brought in as a static class, and that data has to imported and then iterated over inside of another Angular component's template.

The static class looks like this:

class staticClassExample {
  static string1 = ""
  static string2 = ""
  static string3 = ""
}

And this is imported into an Angular 2 component:

import { staticClassExample } from './example';

@Component({
   template: '
 // LOOP NEEDS TO GO HERE
'})

export class Example {

  dataToIterateOver: any;

  constructor (private _myService: MYSERVICE) 
    {
       this.dataToIterateOver = staticClassExample;
    }
}

Hello, what about creating an empty array and pushing each property of that static class in that array for instance. arrEmpty.push(exambleObj.string1) — ashley
– ashley, Commented Jul 13, 2017 at 16:24
Are you able to return within a static function an array of pairs? [{k: string1, v: ""}...] — lilezek
– lilezek, Commented Jul 13, 2017 at 16:24
@lilezek I can't use methods inside the class, that's why it's static (it's never actually called or run). — JazzyGreen
– JazzyGreen, Commented Jul 13, 2017 at 16:29
@ashley I could use a regular for-in loop inside of the constructor I suppose, and extract out the data into an array. I just wondered if there was another way to do it, in the HTML specifically? But you're right, I should probably just do that, thank you! — JazzyGreen
– JazzyGreen, Commented Jul 13, 2017 at 16:29
@JazzyGreen, did my solution help? You don't need an array to iterate an object properties — Max Koretskyi
– Max Koretskyi, Commented Jul 13, 2017 at 16:36

Max Koretskyi · Accepted Answer · 2017-07-13 18:27:06Z

2

ngFor directive works with iterables. You can turn any object into an iterable by implementing [Symbol.iterator] method that will return an iterator used by ngFor. Here is the plunker that demonstrates that and the code:

class A {
  static a = 3;
  static b = 4;

  static [Symbol.iterator] = function*() {
    yield ['a', this.a];
    yield ['b', this.b];
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div *ngFor="let p of cls; let i = index;">
        <span>Property: {{p[0]}} and value: {{p[1]}}</span>
    </div>
  `,
})
export class App {
  name:string;
  cls = A;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

edited Jul 13, 2017 at 18:27

answered Jul 13, 2017 at 16:27

Max Koretskyi

106k69 gold badges357 silver badges525 bronze badges

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

2 Comments

lilezek Over a year ago

I think this won't work as it must work for static class, not for a instance of the class.

Max Koretskyi Over a year ago

yeah, it will now, just added static

lilezek · Accepted Answer · 2017-07-13 16:27:30Z

0

Change

this.dataToIterateOver = staticClassExample;

to

Object.keys(this.dataToIterateOver).map((k) => {key: k, value: this.dataToIterateOver[k]});

which offers to your template an array of pairs key, value, which you can iterate now with ngFor.

answered Jul 13, 2017 at 16:27

lilezek

7,4552 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

Creating a for/in loop in an Angular 2 template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related