I'm Trying to hide/show elements of a ion-list depending of a boolean variable which is changed when a button is clicked.
The problem is that if I try with *ngIf="{{editMode}}" the ionic serve --lab shows blank screen on browser.
<ion-item-sliding *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-item>
<ion-icon item-left name="rose" *ngIf="{{editMode}}"></ion-icon>
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</ion-item>
And if i try with *ngIf="'editMode'" the result of click on button is nothing.
When I click on a nav bar button the boolen variable is modified to true/false.
What would be wrong?
Check here
You have to do *ngIf="editMode"
*ngIf="'editMode'" - Here you are just taking the string editMode which is truthy and button will not work.
Related
When I click on the label of an ion-item the checkbox is triggered.
I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.
I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120
However, it is not working for Ionic 4.
<ion-item>
<ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
<ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
</ion-label>
<ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked">
</ion-checkbox>
</ion-item>
I'd like to have two behaviors:
- When clicking in the Checkbox trigger just the checkbox.
- When clicking on the label or the icon open a modal to edit my document.
I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
Explanation
The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;
Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.
ion-item ion-label {
overflow: visible;
}
I found another solution. I added another hidden checkbox in the item.
<ion-item *ngFor="let task of tasks;let i of index;" padding margin>
<ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
<!-- another checkbox otherwise item clicks triggers checkbox click -->
<ion-checkbox hidden=true ></ion-checkbox>
<ion-label >
{{task.Name}}
</ion-label>
<ion-reorder slot="end"></ion-reorder>
You can also wrap the checkbox in a slotted div, which appears to break the link between the item and the checkbox.
<ion-item (click)="itemHandler()">
<ion-icon />
<ion-label>Label</ion-label>
<ion-checkbox (click)="checkboxHandler()" />
</ion-item>
If you put the click handler on the ion-item then it will handle clicks from anywhere on the ion-item. However, that includes clicks from the checkbox, so you have to make sure to also call event.stopPropagation() in the checkbox click handler.
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I have a list of items in my app. This is the code
<ion-list>
<ion-item-sliding #item *ngFor="let productSize of productSizes">
<ion-item>
... some stuff
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="RemoveItem(productSize)">X</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
When the user slides left, there is a button delete that shows up and lets the user to delete the item.
I want to do this without the remove button. When he slides left and releases the mouse or touch, delete the item.
You can use the expandable option combined with the (ionSwipe) event.
So your options will look like this:
<ion-item-options side="right" (ionSwipe)="RemoveItem(productSize)">
and your button:
<button ion-button color="danger" expandable (click)="RemoveItem(productSize)">X</button>
Check out the docs here (under Expandable Options).