CODEWITHSUNDEEP
angularangular8angular10angular12
A V
A V

Reputation: 9

how to send large amount of data from parent to child in angular?

I've a parent component in which I'm getting an object via API call. I'm then using this object in a function to get the required data. I also need this exact data in the child. This data is very large & complex and so don't know how to send it via @Input().

Currently I'm getting the data by repeating the whole process again in the child component. It is taking too much time to render and also its not good practice.

I also tried sending the data via a service but the child component is getting rendered before it receives data from service. Here's the code-- PARENT COMPONENT

selectLanguage(id: number) {
**labelObj is coming via api**
    if (id == 2) {
      this.defaultLanguage = true;
      for (var i = 0; i < this.labelObj.length; i++) {
        if (this.labelObj[i].DefaultLanguage == '"CS+SR" - KPI') {
          this.CSSRKPILabel = this.labelObj[i].DefaultLanguage;
        }

        if (this.labelObj[i].DefaultLanguage == 'Country') {
          this.CountryLabel = this.labelObj[i].DefaultLanguage;
        }
        if (this.labelObj[i].DefaultLanguage == 'Dealer Outlet Code') {
          this.DealerOutletCodeLabel = this.labelObj[i].DefaultLanguage;
        }
        if (this.labelObj[i].DefaultLanguage == 'Switch To') {
          this.SwitchToLabel = this.labelObj[i].ConvertedLanguage;
        }
        if (this.labelObj[i].DefaultLanguage == 'Instant Feedback') {
          this.InstantFeedbackLabel = this.labelObj[i].DefaultLanguage;
        }
        if (this.labelObj[i].DefaultLanguage == 'Survey Feedback') {
          this.SurveyFeedbackLabel = this.labelObj[i].DefaultLanguage;
        }
        if (this.labelObj[i].DefaultLanguage == 'Service Reminders') {
          this.ServiceRemindersLabel = this.labelObj[i].DefaultLanguage;
        }
        if (this.labelObj[i].DefaultLanguage == 'Survey Analysis') {
          this.SurveyAnalysisLabel = this.labelObj[i].DefaultLanguage;
}
 }

Basically, I've to send the values of all these labels in the child component. TIA.

Upvotes: 0

Views: 1036

Answers (1)

Marko Eskola
Marko Eskola

Reputation: 818

Use property binding to send one single object containing the labels to the child component.

Your function should return all the label values in one object:

const returnedObject: ResultObjectType | undefined = undefined;

// Function code here where this.XXXLabel is returnedObject.XXXLabel

return returnedObject;

In the parent component property should be defined first and initialized like this in some point of code:

this.resultObject = selectLanguage(); // Function returns object containing all the labels

Parent component template:

<child-component [property]="resultObject">

Child component ts:

@Input()
property: ResultObjectType | undefined = undefined;

ResultObjectType is the type of the object and undefined is an example of initialization if ResultObject is not bound in the parent component.

Upvotes: 1

Related Questions