angular2 displaying computed data in template

Question

I am just starting to use Angular2 and engaged the following problem. Template (Main Component):

<span *ngFor="#data of dataset" >
    <data-widget [data]="data"></data-widget>
</span>

Template (Widget Component):

<div>{{someCompValue}}</div>

The value of someCompValue is need to be created from set of properties inside the data member variable.

Where should I inject the code to compute the someCompValue? I tried to do it inside constructor() but that moment the data is not yet assigned (=null).

Nikos Paraskevopoulos · Accepted Answer · 2016-04-22 10:52:36Z

2

Use ngOnInit (ref):

Initialize the directive/component after Angular initializes the data-bound input properties.

So in the component:

@Component(...)
export class DataWidget {
    @Input data: Xxxx;

    constructor() { ... }

    ngOnInit() {
        // this.data should be set and ready to use here
    }
}

EDIT: Looking at the answer from Günter Zöchbauer, a note: use ngOnInit if the data is to be calculated only once at component initialization; use ngOnChanges (as per Günter's answer) if data is to be calculated at the beginning and recalculated every time the inputs change.

answered Apr 22, 2016 at 10:52

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

Comments

tilo · Accepted Answer · 2017-07-27 17:32:02Z

2

@Component({
  selector: 'data-widget',
  template`<div>{{someCompValue}}</div>`})
class DataWidget {
  @Input() data;
  ngOnChanges(change)  {
    this.someCompValue = doCalculationBasedOnData();
  }
}

Collectives™ on Stack Overflow

angular2 displaying computed data in template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related