How to clear previous values from ngOnchanges based on selection in Angular4

Question

In my app component I have an accordion ,User selected menu's ID will be passed to the child component by using ngOnChanges ,From the child component calling the API based on the app component selected menu's ID .

Accordion structure Category,Group,Subgroup

Here What I wan to do is ,When a user selected a category ,group and subgroup That Id is passed to child component and API also get called .

Let us assume the first selected ID's respectively (100,101,102)

Now the User select another group under the same category ,Now the API get called by passing with wrong ID's (100,200,102),Here the user not selected any subgroup but the value is taken from the previous value.

So how can I do the following

1,clear the subgroup value when user select the new group.
2,Clear the group value when user select the new Category.

Stackblitz File :

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-exbr5f?file=app%2Fchild%2Fchild.component.ts

Edit :

ngOnChanges(changes: SimpleChanges) {

    if (changes['C_code'].currentValue != "") {
      this.a = changes['C_code'].currentValue ;
      if (this.a != changes['C_code'].previousValue) {
        this.G_code = "";
        this.SG_code = "";
      }
    }

    if (changes['G_code'].currentValue != "") {
      this.b = (changes['G_code'].currentValue);
      if (this.b != changes['G_code'].previousValue) {
        this.SG_code = "";
      }
    }

  }

Stackblitz File :

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-9i1xzr?file=app/child/child.component.ts

score 0 · Answer 1 · answered May 07 '18 at 07:19

You could do this in your AppComponent, by setting the respective values back to null/empty in the event hooks like this:

changeGroupCode(event: any) {
    this.groupCode = event;
    this.subGroupCode = null;
}

Then in your child component you check for null/empty string on every value before calling the API.

How to clear previous values from ngOnchanges based on selection in Angular4

1 Answers1