angular 2 ngfor show component in array

Question

i have an array of components, i want to show the existing components in that array but it doesnt work, i suspect that a new component is created and showed in the ngfor and not the one in the array because i do see new components get created but with a default value and not the current value that get passed to them, what am i doing wrong?

html:

<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()>

  <div *ngFor="let lineCounter of visualDivArray">
    <app-visual-text-div></app-visual-text-div>
  </div>

</div>

typescript:

if(this.visualDivArray.length < currentDivIndex+1){
  let newv = new VisualTextDivComponent()
  this.visualDivArray.push(newv);
  console.log("creating new " + this.visualDivArray.length);
}

this.visualDivArray[currentDivIndex].setData(textValue);

What do you mean with "existing components in that array". Angular doesn't render components from an array. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 25, 2016 at 19:21
@GünterZöchbauer so i cannot have an array and populate it with components instances and make it render by ngfor? — dvrer
– dvrer, Commented Dec 25, 2016 at 19:24
Don't think so. new VisualTextDivComponent() doesn't give you a component, only a instance of the components class. Perhaps this approach provides some ideas stackoverflow.com/questions/36325212/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 25, 2016 at 19:26
@GünterZöchbauer thanks for the referance :), i could make the components add him self in his constructor to an array and then i could manipulate it but its "up side down". — dvrer
– dvrer, Commented Dec 25, 2016 at 19:31
Why don't you have an array of plain objects, iterate over these objects, and pass the object as input to your app-visual-text-div component? That's how angular is supposed to be used: your model contains data, not components, and data is passed as input to components. — JB Nizet
– JB Nizet, Commented Dec 25, 2016 at 19:50

ppovoski · Accepted Answer · 2016-12-25 23:37:22Z

Have your VisualTextDivComponent create an array of objects. Pass that array to the ngFor. Then pass each item of the array into your app-visual-text-div component like this:

<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()>
  <div *ngFor="let lineCounter of visualDivArray">
    <app-visual-text-div [curLineCounter]="lineCounter"></app-visual-text-div>
  </div>   
</div>

curLineCounter or some better name, is a variable in the app-visual-text-div component.

AppVisualTextDiv.ts

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

@Component({
  selector: 'app-visual-text-div',
  templateUrl: './AppVisualTextDiv.html'
})
export class AppVisualTextDiv{  
  @Input() curLineCounter: {
    'id': number,
    'someValue': string,
  };
}

AppVisualTextDiv.html

<div id="{{curLineCounter.id}}">
  <span>{{curLineCounter.someValue}}</span>
</div>
<!-- or whatever your use case provides -->

Collectives™ on Stack Overflow

angular 2 ngfor show component in array

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related