angular - send data to child component

I have a parent component, and three child components

I send data in these three components, and i use setTimeout to control the time for sending the data

The first component lasts 5000 milliseconds

The second component lasts 10000 milliseconds

The third component lasts 15000 milliseconds

In each child component i used a spinner, this spinner hides when the data arrives to the component

The problem is that when the data arrives to the first component, all the spinners for the other components hide too

export class AppComponent {
  public dataOne: string;
  public dataTwo: string;
  public dataThree: string;

  constructor() {
    setTimeout(() => {
      this.dataOne = "one";
    }, 5000);

    setTimeout(() => {
      this.dataTwo = "two";
    }, 10000);

    setTimeout(() => {
      this.dataThree = "three";
    }, 15000);
  }
}

<one [data]="dataOne"></one>
<two [data]="dataTwo"></two>
<three [data]="dataThree"></three>

export class OneComponent implements OnChanges {
  @Input() data: string;

  constructor(private spinner: NgxSpinnerService) {
    this.spinner.show();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes["data"] && changes["data"].currentValue) {
      this.spinner.hide();
      console.log(changes["data"].currentValue);
    }
  }
}

stackblitz

The problem is the ngxSpinnerService because it is a singleton service. The documentation reads as follows:

If you want multiple ngx-spinner instance, just add name attribute with ngx-spinner component. But in this case, you've to pass that particular name of a spinner in show/hide method.

Regards

Add NgxSpinnerService in the provider list for each child component as:

providers: [NgxSpinnerService]

Just add an instance as provider in each component instance like so:

@Component({
  selector: "one",
  templateUrl: "./one.component.html",
  providers: [NgxSpinnerService] // <---- ADD THIS
})
export class OneComponent implements OnChanges {
  @Input() data: string;

  constructor(private spinner: NgxSpinnerService) {
    this.spinner.show();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes["data"] && changes["data"].currentValue) {
      this.spinner.hide();
      console.log(changes["data"].currentValue);
    }
  }
}

For your reference: https://stackblitz.com/edit/angular-1hqv61

A very simple solution would be to add counter ,on each change update the counter and when the counter goes to 3 that means all 3 child components have been successfully got there inputs from parent:-

Component({
  selector: "one",
  templateUrl: "./one.component.html",
  providers: [NgxSpinnerService] // <---- ADD THIS
})
export class OneComponent implements OnChanges {
  @Input() data: string;
dataChangeCounter =0;

  constructor(private spinner: NgxSpinnerService) {
    this.spinner.show();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes["data"] && changes["data"].currentValue) {
dataChangeCounter += 1;
if(dataChangeCounter ===3){
      this.spinner.hide();
}
    }
  }
}

This is only valid if you have only that one input property,it won't work for multiple input property ,if you need to add more input properties you will have to change the code slightly.