Add/Remove sub-header dynamically

ionic-v1
1

Hi,

I have a subheader that need to shown and hidden dynamically

Here’s my code:

> <ion-side-menu-content>
>   <ion-nav-bar class="bar-assertive-900">
>     <ion-nav-back-button></ion-nav-back-button>
>     <ion-nav-buttons side="left">
>       <button menu-toggle="left" class="button button-icon button-clear ion-navicon"></button>
>     </ion-nav-buttons>
>     <ion-nav-buttons side="right">
>       <div class="logo"><img src="img/logo_white.svg"/></div>
>       <button ng-click="toggleSearch()" class="button button-icon button-clear ion-ios-search-strong"></button>
>       <button ng-click="popover.show($event)" class="button button-icon button-clear ion-android-more-vertical"></button>
>     </ion-nav-buttons>
>   </ion-nav-bar>
>   <ion-header-bar ng-if="search.show" class="bar-subheader">
>     <div class="list list-inset">
>       <label class="item item-input"><i class="icon ion-search placeholder-icon"></i>
>         <input type="text" placeholder="Search"/>
>       </label>
>     </div>
>   </ion-header-bar>
>   <ion-nav-view name="menuContent" ng-class="{'has-subheader':search.show}"></ion-nav-view>
> </ion-side-menu-content>

ng-class doesn’t work with ion-nav-view any idea how to fix it?

P.S. the value of search.show is changing but the class never been assigned to ion-nav-view

2

Not that this directly answers your question but the documentation for sub-headers says the has-subheader class is supposed to be applied to the ion-content directive, not the ion-nav-view.

3

Hi, I did tried that, but doesn’t work, even I have to apply has-subheader to every ion-content

PS. my has-subheader class just add padding-top

4

has-subheader should just add the padding because that’s how it adjusts the contents location in the view to accommodate the sub header being present.

In looking over the ion-header-bar documentation I think you may need to move your header bar inside the ion views you would like it in. For example:

`

`