Within my application, I have a main component along with three sub-components.
I am passing data to these three sub-components and using setTimeout to manage the timing of the data being sent.
The first sub-component displays for 5000 milliseconds.
The second sub-component displays for 10000 milliseconds.
The third sub-component displays for 15000 milliseconds.
Each sub-component contains a spinner that hides once the data has been received by that specific component.
The issue I'm facing is that when the data arrives at the first component, all the spinners in the other components disappear as well.
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);
}
}
}