await fetch Angular between components via Input

Question

I'm making a request with fetch to the reqres api users in app.component, then i share data to his child component (hello.component) via Input. I get the correct user names in child template, I'm trying to print the users in console but i get an empty array. It's there a way to 'await' the response of another component? i guess this is an asynchronous issue. Here is the link: https://stackblitz.com/edit/angular-ivy-b3m1kp?file=src%2Fapp%2Fhello.component.ts

Thanks in advance.

app.component:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public usuarios;

  constructor(){
   this.usuarios = [];
  }

ngOnInit(){
  this.getUsers();
}

getUsers(){
  fetch('https://reqres.in/api/users')
    .then(data => data.json())
    .then(users => {
        this.usuarios = users.data;
        console.log(this.usuarios);

    });
}

}

hello.component:

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

@Component({
  selector: 'hello',
  template: `<h1 *ngFor="let user of usuarios">Hello {{user.first_name}} </h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent{
  @Input() usuarios;

  ngOnInit(){
    console.log(this.usuarios);
  }
}

app.component.html:

<hello [usuarios]="usuarios"></hello>

The Stackblitz link you provided prints array of items to the console. — sidthesloth
– sidthesloth, Commented Sep 9, 2020 at 19:20
Use ngOnChanges to detect changes in usuarios array. As the operation is async, the array would be empty at initialization. You can also look into EventEmitters if you do not want to use onChanges. — Berk Kurkcuoglu
– Berk Kurkcuoglu, Commented Sep 9, 2020 at 19:23
yes, its the response from app.component fetch, if i print usuarios in console in hello.component (child component) i get an empty array — sonEtLumiere
– sonEtLumiere, Commented Sep 9, 2020 at 19:23

Berk Kurkcuoglu · Accepted Answer · 2020-09-09 19:34:21Z

1

As the fetch operation is asynchronous, usuarios array would be empty upon initialization for the child. To detect the value changes move logic which will use the fetched results to ngOnChanges. Like this:

 ngOnChanges(changes: SimpleChanges) {
    const { previousValue, currentValue } = changes.usuarios;
    if (previousValue !== currentValue) {
      console.log(this.usuarios);
    }
  }

Having a condition to check if the value has changed inside ngOnChanges is essential, otherwise the logic will be constantly triggered.

edited Sep 9, 2020 at 19:34

answered Sep 9, 2020 at 19:32

Berk Kurkcuoglu

1,5231 gold badge9 silver badges13 bronze badges

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

Comments

Sunil Choudhary · Accepted Answer · 2020-09-09 19:33:40Z

0

<hello *ngIf="usuarios.length>0" [usuarios]="usuarios"></hello>
<p>
  Start editing to see some magic happen :)
</p>

answered Sep 9, 2020 at 19:33

Sunil Choudhary

3441 silver badge6 bronze badges

Collectives™ on Stack Overflow

await fetch Angular between components via Input

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