How to handle device back button when there is a nested comonent


#1

In my ionic app, there is a page which contain one component. The component will have one more component. When second component is open and i click device back button, i want to close the component not to pop the page. How can i acheive it?

For Example:
Let the Page be:-1:
page1.html:

<component1 *ngIf="!isSelectBox " >

page1.ts:
export class Page1Page{
isSelectBox:boolean=false;
}

Let the Component 1 be:
component1.html:

<component2 *ngIf="isAudio " >

component1.ts:
export class Component1Component{
isAudio:boolean=true;
}

let the componet 2 be:

    component2.html:
                         <html>
                     //some code here
                </html>

component2.ts:
export class Component2Component{
//some code here
}

Assume Component 2 is active. Now when I click the device back button it should close the component 2 but it is exiting from the current page i.e Page1. how can acheive my condition.