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-buttons end>
            <button ion-button side="secondary" (click)="toggleToolbar()">      
                <ion-icon name="search"></ion-icon>
    <ion-toolbar *ngIf="toolbarVisible">
        [YOUR CONTENT]

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

export class MyApp {
    toolbarVisible: boolean = false;

        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

1 Like