angular - send data to child component

Question

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 spinner property should be manage in children, not into the parent component. — Emilien
– Emilien, Commented Jan 6, 2020 at 14:14

Maihan Nijat · Accepted Answer · 2020-01-06 14:22:54Z

1

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

providers: [NgxSpinnerService]

answered Jan 6, 2020 at 14:22

Maihan Nijat

9,36313 gold badges69 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charly Sosa · Accepted Answer · 2020-01-06 14:11:43Z

1

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

answered Jan 6, 2020 at 14:11

Charly Sosa

5753 silver badges5 bronze badges

Comments

Ling Vu · Accepted Answer · 2020-01-06 15:14:33Z

0

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

answered Jan 6, 2020 at 15:14

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

2 Comments

Maihan Nijat Over a year ago

Exactly what I said.

Ling Vu Over a year ago

Yes, because this is the issue.

Aditya Vashishtha · Accepted Answer · 2020-01-06 16:37:00Z

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.

Collectives™ on Stack Overflow

angular - send data to child component

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related