We upgraded our app from v5 to v6, we have a page where we are displaying expandable items and we thought we would make use of the newly introduced ion-accordion, the problem is on page load all the items are collapsed, I want the first item expanded while all the other items are closed. Are there any attributes I can set on ion-accordion to achieve this?
if you set the value for with the name of the accordion the default will be the mentioned accordion Expanded
<!-- Multiple Accordions -->
<ion-accordion-group [multiple]="true" [value]="['colors', 'numbers']">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header">
<ion-label>Numbers</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>one</ion-label>
</ion-item>
<ion-item>
<ion-label>two</ion-label>
</ion-item>
<ion-item>
<ion-label>three</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
in this case Accordion "Colors" and "Numbers" are Expanded.
if you want only the first one delete numbers from [value]="['colors', 'numbers']"
After going through the official documentation I just found that you can have an item expanded by default using the value attribute on ion-accordion-group tag.
<ion-accordion-group value="colors">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
Note the value in ion-accordion is equal to that in ion-accordion-group.
Related
Vuejs 3, Ionic 6
My code
<ion-list>
<ion-item v-for="(city, index) in cityDataList" :key="index">
<ion-label>{{ city.name }}</ion-label>
<ion-checkbox slot="end"
#update:modelValue="city.isActive = $event"
:modelValue="city.isActive" :checked="city.isActive"
#ionChange="this.selectCity(city.id)" />
</ion-item>
</ion-list>
The Api returns a list of cities. Each has an isActive property. If the city has isActive true, then I expect to see a mark. But this is not happening.
link to documentation https://ionicframework.com/docs/api/checkbox#properties
Here is a visual screenshot.
OMG, this is becouse router-view has a key
<router-view :key="$route.fullPath"/>
I have an Angular Reactive from with multiple ion-checkboxes with the sameformControlName but they are not kept in sync when one is checked/unchecked.
<ion-item lines="none">
<ion-label color="dark">Client</ion-label>
<ion-checkbox formControlName="client" (click)="clientToggle()" slot="end"></ion-checkbox>
</ion-item>
public clientToggle() {
this.cubeForm.controls.client.setValue(!this.cubeForm.controls.client.value);
}
Changed the html to:
<ion-checkbox formControlName="client [checked]="cubeForm.controls['client'].value" slot="end"></ion-checkbox>
Im using ionic 3 for my mobile application. I have an issue with my item list, my issue is when i add a new item it does not show up at the top of the list, it always appears at the bottom , how to do that correctly?
Thanks
example
add Item -
first -A
second-B
its display
A
B
I want to know how can display this type
B
A
item list
<ion-list class="ion-addexe">
<ion-item *ngFor="let bill of Details">
<ion-label>
<p class="ion-lbl" style="position: relative;top:-0.2rem;">{{bill.billdescription}}</p>
</ion-label>
<ion-label>
<p class="ion-lbl" text-right style="position: relative;top:-0.2rem;">$ {{bill.billtotal}}</p>
</ion-label>
</ion-item>
</ion-list>
add item
<div>
<ion-item >
<ion-label id="ion-lbls">Select you want</ion-label>
<ion-select [(ngModel)]="addnewBill_category" okText="Add" cancelText="Close">
<ion-option *ngFor="let bill of Category" value="{{bill.billCategoryID}}">{{bill.CategoryName}}</ion-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Details</ion-label>
<ion-input type="text" value="" [(ngModel)] = "addnewBill_description" placeholder="Description" text-right></ion-input>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.addnewbill_Date" placeholder="MMM/DD/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label id="ion-lbls">Total ($)</ion-label>
<ion-input type="number" [(ngModel)]="addnewBill_amount" value="" placeholder="$0.0" text-right></ion-input>
</ion-item>
</div>
</ion-list>
First of all that is the correct way in which a ngFor works it displays the first element first and the next items at the bottom, because whenever you insert new items inside an array it follows the top to bottom approach. So basically you want to display your array items in reverse order that should be your question
The most simple and easy solution to this is by just using reverse() on your *ngfor. In your case it would be something like this:
<ion-item *ngFor="let bill of Details.reverse()">
...
<ion-item>
or one more solution is using a custom angular pipe which you could apply on the *ngFor and sort your array in reverse order.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value) {
if (!value) return;
return value.reverse();
}
}
and then in your html you can use that pipe like this:
<ion-item *ngFor="let bill of Details | reverse">
...
<ion-item>
I'm not sure to understand the error I'm getting while looping through an array of options to populate my select list.
Here is the error I get
Error in ./PhonePage class PhonePage - caused by:
If ngModel is used within a form tag, either the name attribute must be set or the
form control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Here is my html code
<form>
<h2>Quel est votre numéro de téléphone?</h2>
<ion-list>
<ion-grid>
<ion-row>
<ion-col width-33>
<ion-item>
<ion-select [(ngModel)]="optionList">
<ion-option *ngFor="let item of optionList" value="{{item.text}}">{{item.text}}</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
</form>
Prerak Tiwari's answer is correct.
Here is just a little tip: I see you bind your ion-select to "optionList" but this is just the list of options you want to show and need to create all ion-options.
You should bind the ion-select to a new parameter, because aftewards it will hold the selected ion-option.
If ngForm is used, all the input fields which has [(ngModel)]="" must have a attribute name with a value.
I am building a tabbed application in Ionic 2 which has five tabs one being the home page. The tabs work fine. I am trying to add a menu for each tab page other than the home page. I have duplicated and added the code below for each of the 4 pages in the home page just changing the menu id;s and the content id's. Everything works fine for the first page I access the subsequent pages I access just don't do anything. I thought this would be quite simple but already have spent days looking for a solution. The docs just refer to different menus on one page not different menus on several pages. Newbie so guess its simple. Help please.
<ion-header>
<ion-navbar color="dark">
<button ion-button menuToggle="menujoinus">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>JOIN US</ion-title>
</ion-navbar>
</ion-header>
<ion-menu [content]="joinuscontent" id="menujoinus">
<ion-content>
<ion-list>
<button ion-button block icon-right color="secondary" menuClose="menujoinus">Close
<ion-icon name="close"></ion-icon>
</button>
<button ion-item icon-left (click)="openPageFieldguides()">
<ion-icon name="compass"></ion-icon>
Field Guides
</button>
<button ion-item icon-left (click)="openPageVolunteers()">
<ion-icon name="clipboard"></ion-icon>
Volunteers
</button>
<button ion-item icon-left (click)="openPageOwner()">
<ion-icon name="key"></ion-icon>
Owners
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #joinuscontent [root]="rootPage"></ion-nav>
It's a bit confusing but you need to add all the menus to the app component - not any of the sub pages - and then reference whichever you need from the sub page using the MenuController. In some cases you may need to disable/enable menus on the sub page but depends on the situation. Take a look at http://ionicframework.com/docs/api/components/app/MenuController/ and the "Multiple Menus on the Same Side" and "Multiple Menus on Different Sides" for more information.
An example:
<!-- Menu 1 -->
<ion-menu id="menu-one" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 1</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Menu 2 -->
<ion-menu id="menu-two" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #nav [root]="rootPage"></ion-nav>
And on the sub page:
import { Component } from '#angular/core';
import { MenuController } from 'ionic-angular';
#Component({
selector: 'sub-page',
templateUrl: 'sub-page.html'
})
export class SubPage {
constructor(public menuCtrl: MenuController) {
// menuCtrl.enable(false, 'menu-one');
menuCtrl.enable(true, 'menu-two');
}
toggleMenu() {
this.menuCtrl.toggle();
}
}
The gotcha is the doSomething() method needs to be on the app component, not the sub page component.