Angular 2 - @Input - Await async method

Question

Plunkr below

I'm having a problem with Angular's @Input and inputs : [''].

The problem is that I have a person object. This object contains the id (person.id). Now I need to initialize this in the constructor of the 'parent' page: (note: simplified for plunkr, not actual code but same problem).

import { Component } from '@angular/core';
import { Child } from './child.ts';

@Component({
  template: `
    <p>current id: {{person.id}}</p>
    <child-component [input_id]="person.id"></child-component>
  `,
  directives: [Child]
})
export class Parent {
  public person: any;

  constructor() {
    //not neccessary here but it is for production
        this.person = {id: -5, name: ''} 

        this.setPerson()
    }

    setPerson(){
      //just to fake a async method (production will be http.get)

      setTimeout(() => {
        this.person = {id: 3, name: 'test'}
      }, 500);
    }
}

Where I try to send the person.id to the child-component which looks like this:

import { NavController } from 'ionic-angular/index';
import { Component, OnInit , Input} from "@angular/core";


@Component({
  selector: 'child-component',
  template: `
    <div>child:
      <p>Passed id: {{passed_id}}</p>
      <p>Some var: {{someVar}}</p>
    </div>
    `,
    inputs: ['passed_id']
})
export class Child implements OnInit {
  @Input passed_id: number;
  public someVar: number;

  constructor(private nav: NavController) {

    }

    ngOnInit(){
      //cant make into ngAfterViewChecked
      //because that executes too much and the call here
      //will be a heavy http call
      this.someVar = this.passed_id;
    }
}

The problem here is: at first the binding will happen immediately, setting the passed_id to -5. This also sets someVar to -5.

I want to wait untill the passed_id is changed to 3 (by the Parent.setPerson()) and then make a heavy async (http) call.

Now I know I could use angular's ngAfterViewChecked but this executes a lot since I'm working with different kind of 'tabs' and if possible I'd like a spinner to show in the time that passed_id is -5 till its 3. NgAfterViewChecked would execute this many times, showing the spinner many times.

Just wondering if theres a different way to fix this then a if(!check){while(true){ if(this.passed_id != -5){ this.http.get('..')...; break; }}}

http://plnkr.co/edit/nJY29LMzUy0MjlDg2mjv?p=preview

Günter Zöchbauer · Accepted Answer · 2016-10-26 12:14:34Z

5

You can use ngOnChanges() instead of ngOnInit()

ngOnChanges(changes) {
  if(this.passed_id != -5) {
    this.http.get(...)
  }
}

You can also make passed_id a setter

_passed_id:number;
@Input set passed_id(value:number) {
  this._passed_id = value;
  if(this.passed_id != -5) {
    this.http.get(...)
  } 
}

answered Oct 26, 2016 at 12:14

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

Ivafo Over a year ago

setter would probably be the best option for me, thanks!

Herr Derb Over a year ago

and for the spinner part: just add a *ngIf='passed_id==-5' to show the spinner, and a *ngIf='passed_id!=-5' show the content in your html

Günter Zöchbauer Over a year ago

Just set an isSpinner to true or false depending on the passed value and use <spnner *ngIf="isSpinner"></spinner> to show it depending on the value (not exactly sure what you try to accomplish though).

Ivafo Over a year ago

already had the spinner part, still thanks for taking the time to explain :). (trying to create a timeline with actions the person took which loads when the user visits the profile of a person -- bit like instagram)

Collectives™ on Stack Overflow

Angular 2 - @Input - Await async method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related