CODEWITHSUNDEEP
angular
Aravind
Aravind

Reputation: 79

How do I get the data from my component into html in Angular before the page gets displayed?

I am trying to display values retrieved from my api in the component. By the time the API responds with the data, my page is getting displayed and I am never able to show the list of elements. Could you let me know how I can solve this and display the values in my html page?

Here is my api call

public searchTeamInfo(term: string): Observable<TeamInfo> {

        return this.http.get<TeamInfo>(`/api/${term}`);
    }

I am calling the api in my component.

 public associatedPodNames: Array<TeamInfo>;
 associatedTeamIds: [
                            "12345",
                            "45454",
                            "43543543"
                        ]

ngOnInit() {
             this.getTeamInfo();
            }

public getTeamInfo(): Array<IPodDetails> {
     for (let i = 0; i < this.associatedTeamIds.length; i++) {
    this.searchService.searchTeamInfo(this.associatedTeamIds[i]).subscribe(res => {
                                    this.associatedPodNames.push(res);
                                    console.log(this.associatedPodNames);

                                 },
                            );
                       }

            }

I am trying to display the values in my html page using the below code.

<ng-container *ngFor="let pods of associatedPodNames">
    pods
</ng-container>

I am able to see result in my console, the list of associatedPodNames. Here is the sample result.

[{podId: "12345", podName: "sample1", podType: "Project Pod"},
{podId: "45454"podName: "sample2"podType: "Project Pod"},
{podId: "43543543", podName: "sample3", podType: "Delivery Pod"}]

The associatedPodnames shows as empty even though I see the pod information in the console. How do I fix this?

Upvotes: 0

Views: 492

Answers (4)

Kaushik
Kaushik

Reputation: 114

 associatedTeamIds: [
                            "12345",
                            "45454",
                            "43543543"
                        ]

ngOnInit() {
             this.getTeamInfo();
            }

public getTeamInfo(): Array<IPodDetails> {
     for (let i = 0; i < this.associatedTeamIds.length; i++) {
    this.searchService.searchTeamInfo(this.associatedTeamIds[i]).subscribe(res => {
                                    this.associatedPodNames = this.associatedPodNames.concat(res);
                                    console.log(this.associatedPodNames);

                                 },
                            );
                       }

            }

Upvotes: 0

Patricio Vargas
Patricio Vargas

Reputation: 5522

if you want to render the results you need to use the JSON pipe and you need to use {{}} to bind your data.

The JSON pipe will show the entire structure of the object on your HTML e.g

<ng-container *ngFor="let pods of associatedPodNames">
    {{pods | json}}
</ng-container>

or

use the properties of the object:

<ng-container *ngFor="let pods of associatedPodNames">
    {{pods.podId}}
</ng-container>

You can use any property you want to display that is inside of the Object you want to render

Angular Docs https://angular.io/guide/displaying-data

FYI there are several way to bind data into your HTML

Property Binding,Event Binding and Two-Way Data Binding.

Upvotes: 1

Andy G
Andy G

Reputation: 19367

You have pods referring to each object within the container. You need an angular expression {{ }} within the container to display output values:

<ng-container *ngFor="let pods of associatedPodNames">
    <p>{{pods.podName}}</p>
</ng-container>

Upvotes: 1

RLoris
RLoris

Reputation: 526

You need to use double curly braces like this : {{ pods.property }} to bind one way content

Upvotes: 1

Related Questions