Parent dropdown passes selected value to child component for triggering various API calls

Question

Parent dropdown passes selected value to child component for triggering various API calls

Can anyone assist me with sending http requests to service methods based on a dropdown selection using Rxjs Observables in Angular? I am passing the selected value from the dropdown to a child component. Thank you for your help.

child-component.ts

@Input() Type;
private data: any;

constructor(private apiService: ApiService){
switch(this.Type){
  case 't1': this.apiService.getAllByT1(this.Type).subscribe(result =>   {
    this.data = result;
  });
  break;
  case 't2': this.apiService.getAllByT2(this.Type).subscribe(result =>   {
    this.data = result;
  });
  break;
  case 't3': this.apiService.getAllByT3(this.Type).subscribe(result =>   {
    this.data = result;
  })
}

ngOnInit(){
}

parent-component.html

<select [(ngModel)]="Type" class="form-control" (change)='onOptionsSelected($event)'>
<option id="1" value="t1">t1</option>
<option id="2" value="t2">t2</option>
<option id="3" value="t3">t3</option>
</select>

<app-child [Type]="Type" (getAPI)="onOptionsSelected($event)"></app-child>

angular typescript rxjs

Answer 1

Answer №1

To effectively process the @Input() Type in Angular, it's important to avoid placing that logic in the constructor. This is because Angular has not yet set up any data bindings at that point. Instead, it's recommended to handle any @Input() variables in either the ngOnInit() or ngOnChanges() lifecycle hooks.

The documentation describes ngOnInit() as "A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive".

For processing changes in data-bound properties, utilizing the ngOnChanges() (documentation link) lifecycle hook would be more appropriate since it is triggered when any data-bound property of a directive changes.

It's advisable to transfer your code from the constructor to the ngOnChanges() method for better handling and responsiveness.

child-component.ts

@Input() type;
private data: any;

constructor(private apiService: ApiService){
}

ngOnInit(){
}

ngOnChanges() {
    if (this.type) {
        switch(this.type) {
            case 't1': 
            this.apiService.getAllByT1(this.type).subscribe(result => {
                this.data = result;
            });
            break;
            case 't2': 
            this.apiService.getAllByT2(this.type).subscribe(result => {
                this.data = result;
            });
            break;
            case 't3': 
            this.apiService.getAllByT3(this.type).subscribe(result => {
                this.data = result;
            });
            break;
        }
    }
}

Answer 2

To effectively process the @Input() Type in Angular, it's important to avoid placing that logic in the constructor. This is because Angular has not yet set up any data bindings at that point. Instead, it's recommended to handle any @Input() variables in either the ngOnInit() or ngOnChanges() lifecycle hooks.

The documentation describes ngOnInit() as "A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive".

For processing changes in data-bound properties, utilizing the ngOnChanges() (documentation link) lifecycle hook would be more appropriate since it is triggered when any data-bound property of a directive changes.

It's advisable to transfer your code from the constructor to the ngOnChanges() method for better handling and responsiveness.

child-component.ts

@Input() type;
private data: any;

constructor(private apiService: ApiService){
}

ngOnInit(){
}

ngOnChanges() {
    if (this.type) {
        switch(this.type) {
            case 't1': 
            this.apiService.getAllByT1(this.type).subscribe(result => {
                this.data = result;
            });
            break;
            case 't2': 
            this.apiService.getAllByT2(this.type).subscribe(result => {
                this.data = result;
            });
            break;
            case 't3': 
            this.apiService.getAllByT3(this.type).subscribe(result => {
                this.data = result;
            });
            break;
        }
    }
}

Parent dropdown passes selected value to child component for triggering various API calls

Answer №1

Similar questions

Safari experiencing issues with video player controls not functioning properly

The error message "Undefined value received instead of a string or boolean in Vuetify and nuxt.js rules" indicates that the expected data type was not provided

Error encountered while attempting to build Ionic 5 using the --prod flag: The property 'translate' does not exist on the specified type

Is there an alternative to RequestOptionsArgs that I can use in this function?

Self-referencing type alias creates a circular reference

Retrieve a designated text value from a Promise

Struggling to locate the module in React Native with TypeScript configuration

Struggling to effectively organize data routing within Angular? Let's tackle the challenges of

Updating input values in Angular reactive forms

Angular is detecting an incorrect value in the mask

Expandable rows within an Angular Material table (mat-table) feature a distinct gap, even when rows are collapsed

Running several angular 2 applications and an API on a single server using nginx

Prevent all dates from being selected except for the last day of every month in the Angular Material Calendar component

The execution of *ngSwitchCase in Angular seems to be faulty

What is the functionality of angular's @Attribute decorator?

In Angular 2, the validation fires once data has been submitted

Incorporate a personalized button within the actions column of ng2-smart-table for Angular 2 development

Angular Material sidebar small version with dropdown menus

Attempting to simulate the behavior of Angular2 Token during testing

Access the JSON data containing sub array values and showcase them on an HTML page by utilizing ngFor