Sending data from a Parent component to a Child Component in Angular using the Pass API with an array return

Question

Sending data from a Parent component to a Child Component in Angular using the Pass API with an array return

Within this context, I am endeavoring to transmit the values of the bookingInfo array (assigned as

this.bookingInfo = bookings.responseObj.txnValues;

) to my child component. The current setting pertains to my parent component.

 @Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = ['33.5M', '67.9M', '90.9M', '09.9M'];
  names = ['cancellations', 'Bookings', 'Modifications', 'Revenue' ];
  bookingInfo = [];

  ngOnInit() {

     this.getBookingInfo();
    }

  getBookingInfo() {
          const params = [];
          params.push({code: 'dateType', name: 'BOOKING'});
          params.push({code: 'fromDate', name: '2019-01-01'});
          params.push({code: 'toDate', name: '2019-12-31'});

          this.ServiceHandler.getTxnInfo([], params).subscribe(
            bookings => {
              this.bookingInfo = bookings.responseObj.txnValues;
              console.log(this.bookingInfo);
          });
      }

}

The file for my dashboard component is named dashboard.component.html.

<app-summary-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfo"></app-summary-chips>

This serves as the child component.

@Component({
  selector: 'app-summary-chips',
  templateUrl: './summary-chips.component.html',
  styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {
  @Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() data: [];

  ngOnInit() {

   console.log('line chart: ', this.lineChart);
    console.log(this.data);
  }

}

This corresponds with the content in summary-chips.component.html

<div class="l-content-wrapper c-summary-chip oh" >
  <div class="c-summary-chip__value">{{value}}</div>
  <div class="c-summary-chip__txt">{{name}}</div>

  <div id= "{{lineChart}}" class="c-summary-chip__graph ">
  </div>
</div>

However, upon executing console.log(this.data); within the child component, it displays an empty array.

arrays angular typescript

Answer 1

Answer №1

The process of setting the data or assigning a value to data is not happening where it should be. To successfully set data to a variable, you must first initialize or set the data that is being passed from the parent component.

UPDATE

You are attempting to pass asynchronous data to a child component. There are various solutions to achieve this. For instance, you can utilize ngOnChanges instead of ngOnInit:

ngOnChanges() {
    console.log(this.data);
}

Alternatively, you can use *ngIf to postpone the initialization of the posts components:

<app-summary-chips *ngIf="bookingInfo" [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfo"></app-summary-chips>

Answer 2

The process of setting the data or assigning a value to data is not happening where it should be. To successfully set data to a variable, you must first initialize or set the data that is being passed from the parent component.

UPDATE

You are attempting to pass asynchronous data to a child component. There are various solutions to achieve this. For instance, you can utilize ngOnChanges instead of ngOnInit:

ngOnChanges() {
    console.log(this.data);
}

Alternatively, you can use *ngIf to postpone the initialization of the posts components:

<app-summary-chips *ngIf="bookingInfo" [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfo"></app-summary-chips>

Answer 3

Answer №2

Due to the time it takes for your service handler to fetch data, the this.bookingInfo variable will be updated after a delay, resulting in no initial value being displayed in the child component.

To resolve this issue, consider implementing the change detection strategy. For more information on how to do this, please refer to the resources provided below:

https://example.com/angular/change-detection

https://example.com/api/core/ChangeDetection

Once you have implemented this solution, any updates to this.bookingsInfo will trigger the ngOnChanges() method in the child component, providing both the previous and new values of this.bookingsInfo rather than just the initialization with onInit().

Answer 4

Due to the time it takes for your service handler to fetch data, the this.bookingInfo variable will be updated after a delay, resulting in no initial value being displayed in the child component.

To resolve this issue, consider implementing the change detection strategy. For more information on how to do this, please refer to the resources provided below:

https://example.com/angular/change-detection

https://example.com/api/core/ChangeDetection

Once you have implemented this solution, any updates to this.bookingsInfo will trigger the ngOnChanges() method in the child component, providing both the previous and new values of this.bookingsInfo rather than just the initialization with onInit().

Answer 5

Answer №3

If you're encountering an empty list in your child component, it may be due to the list updating within a subscription, which doesn't trigger the child component in Angular to detect property changes.

A quick solution is to pass the observable itself to the child component and then subscribe to the value changes within the child.

Code snippet from your dashboard component:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = ['33.5M', '67.9M', '90.9M', '09.9M'];
  names = ['cancellations', 'Bookings', 'Modifications', 'Revenue' ];
  bookingInfoObservable;

  ngOnInit() {
     this.getBookingInfo();
    }

  getBookingInfo() {
          const params = [];
          params.push({code: 'dateType', name: 'BOOKING'});
          params.push({code: 'fromDate', name: '2019-01-01'});
          params.push({code: 'toDate', name: '2019-12-31'});

          this.bookingInfoObservable = this.ServiceHandler.getTxnInfo([], params)
      }
}

Snippet from your dashboard template:

<app-summary-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfoObservable"></app-summary-chips>

Code for your child component:

@Component({
  selector: 'app-summary-chips',
  templateUrl: './summary-chips.component.html',
  styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {
  @Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() data: [];
  bookingInfo = [];

  ngOnInit() {

   console.log('line chart: ', this.lineChart);
   this.data.subscribe(
            bookings => {
              this.bookingInfo = bookings.responseObj.txnValues;
              console.log(this.bookingInfo);
          });
  }

}

You can access a working example of this on Stackblitz. Hopefully, this will assist you in resolving your issue.

Answer 6

If you're encountering an empty list in your child component, it may be due to the list updating within a subscription, which doesn't trigger the child component in Angular to detect property changes.

A quick solution is to pass the observable itself to the child component and then subscribe to the value changes within the child.

Code snippet from your dashboard component:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = ['33.5M', '67.9M', '90.9M', '09.9M'];
  names = ['cancellations', 'Bookings', 'Modifications', 'Revenue' ];
  bookingInfoObservable;

  ngOnInit() {
     this.getBookingInfo();
    }

  getBookingInfo() {
          const params = [];
          params.push({code: 'dateType', name: 'BOOKING'});
          params.push({code: 'fromDate', name: '2019-01-01'});
          params.push({code: 'toDate', name: '2019-12-31'});

          this.bookingInfoObservable = this.ServiceHandler.getTxnInfo([], params)
      }
}

Snippet from your dashboard template:

<app-summary-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfoObservable"></app-summary-chips>

Code for your child component:

@Component({
  selector: 'app-summary-chips',
  templateUrl: './summary-chips.component.html',
  styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {
  @Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() data: [];
  bookingInfo = [];

  ngOnInit() {

   console.log('line chart: ', this.lineChart);
   this.data.subscribe(
            bookings => {
              this.bookingInfo = bookings.responseObj.txnValues;
              console.log(this.bookingInfo);
          });
  }

}

You can access a working example of this on Stackblitz. Hopefully, this will assist you in resolving your issue.

Sending data from a Parent component to a Child Component in Angular using the Pass API with an array return

Answer №1

Answer №2

Answer №3

Code snippet from your dashboard component:

Snippet from your dashboard template:

Code for your child component:

Similar questions

Initiating a GET request to retrieve the file generated by the server

"Discover the process of looping through a collection of IWebElements, storing them in an array, and displaying them in the console using

Creating Angular unit test modules

Currently experimenting with implementing malloc functionality in C through functions

Is there a way to efficiently insert the data array into 8 tables simultaneously?

TypeScript - Variable is inferred to have type 'any' in certain locations where its type cannot be accurately determined

Updating dropdown value from a different dropdown selection in Angular 17

Tips for stopping table column width growth when an icon is inserted into a cell dynamically

Move to the following array when clicking PHP (using Ajax, perhaps?)

Precisely outline the function type that operates on an object, makes changes to its values, and then outputs the object in TypeScript

Provider not found: ConnectionBackend – NullInjectorError

What is the correct approach to managing Sequelize validation errors effectively?

Angular 4: Triggering Scroll Event when Select Dropdown Reaches End

Issue involving interface implementation (#6634) when transitioning from legacy code to Fortran 90/95

Transforming a byte[] BGRA array into a more efficient and faster option (JAVA)

The router fails to navigate upon clicking after transitioning from beta to rc5 as a module

What sets template-driven and reactive forms apart in practice?

Angular2 encounters an error when processing a custom HTTP request

Child Route Handling Based on Conditions (Angular)

Performing multiple asynchronous tasks using RxJS by running Array.prototype.map in parallel batches or queues