Ionic header clickable

i want to design a screen like this… i searched but i am not getting please help me how to design pop over like this ?

Hi akshaytaywade,

if I do get it right, this could help you.

Add a toolbar section to your header with an ngIf condition the check wether it should be displayed or not.
Add a button to your header (in my case a search icon, yours would be a plus I think)

<ion-header>
    <ion-navbar>
        <ion-buttons end>
            <button ion-button side="secondary" (click)="toggleToolbar()">      
                <ion-icon name="search"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Pagetitle</ion-title>
    </ion-navbar>
    <ion-toolbar *ngIf="toolbarVisible">
        [YOUR CONTENT]
    </ion-toolbar>
</ion-header>

Define a variable in your class and a function the catch the tap event on your button

export class MyApp {
    toolbarVisible: boolean = false;

    constructor(){
        ...
    }
    toggleToolbar(){
        this.toolbarVisible = this.toolbarVisible ? false : true;
    }
}

When you tap the plus button, it toggles the toolbarVisible variable and the ngIf condition shows or hides the toolbar.

Best regards
Greg

1 Like