How to get value from API in ngOnInit method to use as a default values for Reactive Forms? Angular

Question

How can I get data from an API in ngOnInit. I used *ngIf in html but it doesn't work. I would like to get for now in console the data from an API and now I received undefined. I attached the code. I will appreciate any help. Thanks!

<div>
    <app-comp [body]="body" *ngIf="this.body"></app-comp>
</div>

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AgreementsService {

  constructor(private http:HttpClient) { }

 // Uses http.get() to load data from a single API endpoint
 getBodyService(): Observable<any> {
  return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgreementsService } from '../home/agreements/agreements.service';
import { AgreementsComponent } from './agreements/agreements.component';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
  public body;
  public bodyData: boolean = false;

  constructor(private _agreementsService: AgreementsService) {

  }

  ngOnInit() {

    this.getBody();
    console.log(this.body);

  }

  getBody() {
    return this._agreementsService.getBodyService().subscribe(
      data => {
        this.body = data
      },
      err => console.error(err),
      () => console.log('done loading foods')
    )
  }

}

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor, May 13 '19 at 17:34
Please read through the proposed duplicate. It is critical that you understand how to work with asynchronous calls in javascript (and by extension typescript). Once you understand this your "development life" will become much easier. — Igor, May 13 '19 at 17:35
I need to use this value in ngOnInit to have default value for a form — ryy77, May 13 '19 at 17:54
Create your form **inside** the subscribe callback. Or create it before, but populate it from **inside** the subscribe callback. Just like, if you need some information that I can provide on a document, you can prepare the whole document now, then send me a mail, and only when you finally receive my response, you can update the document with the information I provided, asynchronously, when your email client notifies you of my response. — JB Nizet, May 13 '19 at 17:58
@AndreiGhervan Please read the link Igor posted. You can handle the returned observables within the callback at the `subscribe()` block. You know what I mean? — wentjun, May 13 '19 at 17:59
@AndreiGhervan Is there any data return from this code ? ```return this._agreementsService.getBodyService().subscribe( data => {``` — Tony Ngo, May 14 '19 at 03:53

How to get value from API in ngOnInit method to use as a default values for Reactive Forms? Angular

0 Answers0