Forum | Appery.io

I am looking at the Angular Bootstrap Pizza 2 (https://devcenter.appery.io/tutorials...) where the search is implemented. This is bootstrap and I want to do something similar in Ionic with a "Search" icon on the header, when clicked expands into a search input box, or drops a search input box into the ng-view area. I am unable to add Form or Input ionic component to the header.

Any samples, or how I can do this.

Any other better looking way to implement this?

Thanks a lot for any response.

Hello -

At this point visual builder in Ionic has two containers fields inside the Header and these fields accepts only Buttons. But in our future release we will make a possibility to add an Input component as well.

Any idea when is this release due, any further info if you have is appreciated. Thanks for the response Illya.

Just keeping this open for discussion on any creative ways to implement search - where there is a input that can be accessed throughout the app. And when text is entered, based on which screen you are in, executes a filter for the set on the screen.

Hello,

And when text is entered, based on which screen you are in, executes a filter for the set on the screen

You can call any function in the unput attribute ng-change
e.g.: ng-change=myFun()

also you can create your own directive

Hello, I also have the need to add a search input in the header, would it be possible to implement this feature?

Thank you so much,
Frank

Hello Frank,

You can drag'n'drop the input component to the header

Hi Serhii,

Thanks. It does work. I just found that if insert an input component inside the header, the header text (e.g. {{activeScreen.name}}) disappears. Is is possible to have both at the same time? I'd like to have them both on the index page and use variables to control which one to show in different pages.

Thank you,
Francesca

Please add a botton to the right top corner on the index header and an input component - to the right top

And use a custom CSS for that:
pre.bar-header button{
width:50%;
}

.bar-header button:hover,
.bar-header.bar-light button.activated{
background:#ffffff;
}/pre

thanks. I am now using a button to display the header title