Ionic 2 ion-Searchbar ionClear not firing on button click - ionic-framework

I have a searchbar in my toolbar as follows:
<ion-toolbar color="clarity">
<ion-searchbar
[(ngModel)]="searchText"
[showCancelButton]="false"
(ionInput)="onInput($event)"
(ionClear)="onClear($event)">
</ion-searchbar>
</ion-toolbar>
and a function in the corresponding TS file:
onClear(event){
this.searchText = "";
}
But the 'onClear' event never gets hit when the searchbars little 'x' is clicked.. why is that?


Change it to (ionCancel) You're probably using an outdated ionic guide


After #Ivario18 suggested I change the clear to (ionCancel), I added the (ionCancel) as well as the (ionClear):
<ion-toolbar color="clarity">
<ion-searchbar
[(ngModel)]="searchText"
[showCancelButton]="false"
(ionInput)="onInput($event)"
(ionClear)="onClear($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
</ion-toolbar>
Now the clear is working...


I found that I was able to use just the (ionCancel) if I include the [showCancelButton]="true". Without it, the cancel didn't work at all, and the (ionClear) seemed to be breaking my infinite-scroll directive.

Related

Why is the ion-back-button not shown?

The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?
the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<!-- navigation button-->
<ion-menu-button></ion-menu-button>
<!-- optional back button-->
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ pageTitle | translate}}
</ion-title>
</ion-toolbar>
</ion-header>
In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?
I used
this.navCtrl.navigateForward('/term/' + term);
to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?

If there is no page in Stack then
<ion-back-button></ion-back-button>
will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.
<ion-back-button defaultHref="logout"></ion-back-button>
you need to be learned from here
https://ionicframework.com/docs/api/back-button

It will not visible if there will be no previous overlay/page to show
So you can set css
ion-back-button {
display: block;
}
Then add click event on element
<ion-back-button (click)="close()">
<ion-icon name="close"></ion-icon>
</ion-back-button>
Add on .ts file
click() {
this.modalCtrl.dismiss();
}

For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear

Is it root page? if so ion-back-button will not show up.
Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.

So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.
But still when clicking not loading to the href.

Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).
<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>
Added the Router Object to the constructor of this component
constructor(public router: Router) { }
If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.

Just need to add the color in scss file to show up.
ion-back-button{
--color: black;
}
And also don't forget to indicate the href, adding it html file
<ion-buttons slot="start">
<ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>

Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.
My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.
Changing
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>
To
<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...
fixed my issue.

Ionic remove back button and display Menu button

I am new to Ionic and i would like to remove the back button and only display the menu button on all my pages. Where can i do this?

You need to add attribute persistent="true" to ion-menu
Like that.
<ion-menu side="left" [content]="content" persistent="true"></ion-menu>
then menuToggle button will be available on all views.
You can find more details here in the docs.
For hiding back button you can try this code:
<ion-header>
<ion-navbar hideBackButton >
<ion-title>PageTitle</ion-title>
</ion-navbar>
</ion-header>
I tested in my project. It works fine.

Ionic 2/3 Back Button appears next to menu

In my app I have at every page the "hideBackButton" on true. This works except on one page where that button appears next to the menu button (see screenshot). This back button hasn't any functionality here.
Is there a way to hide it? Perhaps by a css hack? Any help would be great.
There are pages where the back button should be visible, so I can't hide it in the entire app.

One way to hide the back button would be to set that page as the root page, instead of just pushing it. So instead of
this.navCtrl.push(ThePage)
try with
this.navCtrl.setRoot(ThePage)
That's one way to do it. If you don't want to change that, you can replace the ion-navbar for an ion-toolbar. So instead of
<ion-header>
<ion-navbar>
<ion-title>
Events Feed
</ion-title>
</ion-navbar>
</ion-header>
You can hide the back button with this:
<ion-header>
<ion-toolbar>
<ion-title>
Events Feed
</ion-title>
</ion-toolbar>
</ion-header>
I'd prefer the first fix, but I'm not sure of what are the requirements on your end.

Ionic Make Ion-header-bar appear above Ion-Side-Menu

I'm using the Ionic framework and I just got the template project side-menu from them. I was wondering if it's possible to put the ion-header-bar appear above the ion-side-menu.
This is how it is right now:
This is how I want it to be:
Any ideas?

You could use an alternative drawer component for your side menu, for example:
https://github.com/beaver71/ionic-ion-drawer
Basic usage is:
<drawer side="left">
<ion-content>
....
</ion-content>
</drawer>
Here is a working example: http://codepen.io/beaver71/pen/BKpRjM/

Ionic Framework list scrolling

I have my simple application using Ionic Framework.
It looks like :
Here the list code :
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap" href="#/bands/{{auth.profile.name}}/{{band.id}}">
My problem is, when I try to scroll the list up and down, it always shows blur on the selected list, and it makes the view when doing scrolls is not smooth enough.
I can solve that blur problem, but I lose the list ng-click and href capabilities, like
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap">
How to resolve that blur problem without losing ng-click and href capabilities, in order to make scrolls are smoother?

Try using ui-sref instead of href. If this doesn't work create an anchor link inside your ion-item and redirect through it. Hopefully this will solve your problem.