Hi Everyone,
I have a little issue passing asynchronous data into my builder’s component. In my angular component, I am calling a REST API, which returns a list of products. I want to pass the result ( products ) into my builder’s component.
I have written this logic but my state.productList is an empty array ( state.productList = ) . How can I get the resulting API call data, basically [state.productList] should be filled with the API result.
I hope this makes sense.
Thanks!
Hello @abhisheksoni,
Would you be able to confirm which angular version and builder SDK version you are using?
Here is an example on how to fetch data using HttpClient
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.fetchProducts();
}
fetchProducts() {
this.http.get<any>('your-api-url').subscribe(
(data) => {
// Assign the received data to your state
state.productList = data;
},
(error) => {
console.error('Error fetching products:', error);
}
);
}
}
You may also find help at the below links
Thanks for looking into this issue. I am using Angular 14 and Builder’s SDK is v3.0.1
As per your screenshot, I have a query - Where is this state coming from?
The component don’t know about it.
Can you tell me more clear example in which data is being passed into builders component after the data is fetched from an API?
Thanks!
Hello @abhisheksoni,
Here is the code example that passes async data to the builder component.
import { BuilderBlock } from '@builder.io/angular';
import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import './with-children';
@Component({
selector: 'custom-thing',
template: 'Hello: {{name}}',
})
export class CustomThing {
@Input()
name = '';
}
BuilderBlock({
tag: 'custom-thing',
name: 'Custom thing',
inputs: [
{
name: 'name',
type: 'string',
},
],
})(CustomThing);
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private http: HttpClient) {} // Inject HttpClient service
ngOnInit() {
this.fetchData();
}
fetchData() {
this.http.get<any>('https://randomuser.me/api?results=2').subscribe(
(response) => {
this.data = response; // Assign fetched data to 'data' variable
},
(error) => {
console.error('Error fetching data:', error);
}
);
}
title = 'app';
options: any = {
cacheSeconds: 1,
data: {
locale: 'en-US',
},
};
data = {
property: 'hello',
fn: (text: string) => alert(text),
};
context= {
myFunction: (text: string) => alert(text),
};
load(event: any) {
console.log('load', event);
}
error(event: any) {
console.log('error', event);
}
}
Make sure you import HttpClientModule in the app.module.ts file
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
