I am using IONIC3. And I have one ion-select with multiple. Now whatever I am selecting
that is showing in comma separated value. But I want to display in this format like if 2 are selected then it should show
'2 of 6 Selected'
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true">
<ion-option>Bacon</ion-option>
<ion-option>Black Olives</ion-option>
<ion-option>Extra Cheese</ion-option>
<ion-option>Mushrooms</ion-option>
<ion-option>Pepperoni</ion-option>
<ion-option>Sausage</ion-option>
</ion-select>
</ion-item>
Can anyone please help me how to do this.
Here is solution :
component.html
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true" [selectedText]="textToDisplay" (ionChange)="onSelectChange($event)">
<ion-option *ngFor="let option of options">{{option}}</ion-option>
</ion-select>
</ion-item>
component.ts
export class HomePage {
toppings:any;
selectedOptions:any=[];
options=[
"Bacon",
"Black Olives",
"Extra Cheese",
"Mushrooms",
"Pepperoni",
"Sausage"
];
textToDisplay:string='';
constructor(public navCtrl: NavController) {
}
onSelectChange(selectedValue: any) {
this.textToDisplay = "Selected "+selectedValue.length+" of "+this.options.length;
}
}
Here is the stackblitz link.
Related
I am getting the number values from the ion-select and input a number in the ion-input. How can I display the selected value and the input value from the original page to another page?
I am using ionic 4
<ion-item>
<ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad"
name="userCount" (keypress)="numberOnlyValidation($event)"></ion-input>
</ion-item>
<ion-item (click)="openSelect()">
<ion-input [(ngModel)]="selectedCode"></ion-input>
</ion-item>
<ion-item style="display: none">
<ion-select #select1 [(ngModel)]="selectedCode">
</ion-select>
</ion-item>
Here's one solution. Assume the input is in home.page and the values will be routed to page2.page.
Update app-routing.module.ts and add a new route
{
path: 'page2/:code/:numpad',
loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
},
Then you will want to take the values from home.page and navigate to page 2. There are a few different way to do this. In the example below I'm just using ionChange to call a function to route to page2.
home.page.ts
<ion-item>
<ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad" name="userCount"></ion-input>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="selectedCode" (ionChange)="valueChangedSoRouteToPage2()">
<ion-select-option *ngFor="let user of users" [value]="user.id">{{user.first + ' ' + user.last}}</ion-select-option>
</ion-select>
</ion-item>
Then in home.page.ts you can do something like this
valueChangedSoRouteToPage2() {
console.log('changed');
console.log(this.selectedCode);
console.log(this.numpad);
this.router.navigateByUrl('/page2/' + this.selectedCode + '/' + this.numpad);
}
Last step - update page2.page.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-page2',
templateUrl: './page2.page.html',
styleUrls: ['./page2.page.scss'],
})
export class Page2Page implements OnInit {
page2Code;
page2Numpad;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.page2Code = this.activatedRoute.snapshot.paramMap.get("code");
this.page2Numpad = this.activatedRoute.snapshot.paramMap.get("numpad");
console.log('code: ' + this.page2Code);
console.log('numpad: ' + this.page2Numpad);
}
}
Hope this helps.
I am trying to add a country code where when you press on the selector under the "country" label, in the second picture, you get a list like the first picture with the country names and the flags next to it then you would be redirected to the second picture with the selector displaying the selected country flag and the country code. I tried to use
Html
<ion-row>
<ion-col>
<ion-item (click)="openSelect()">
<div class="ion-text-left">
<ion-label position="stacked">البلد</ion-label>
<ion-input [(ngModel)]="selectedCode"></ion-input>
</div>
</ion-item>
<ion-item style="display: none">
<div class="ion-text-left">
<ion-label >البلد</ion-label>
<ion-select #select1
[(ngModel)]="selectedCode">
<ion-select-option *ngFor="let c of countries" value="{{c.flag}}{{c.code}}">{{c.flag}}{{c.name}}</ion-select-option>
</ion-select>
</div>
</ion-item>
</ion-col>
.TS
#ViewChildren('select1') select1: Select;
countries: any = [
{
code: '+91',
flag: [./in.png],
name: 'India'
},
{
code: '+1',
flag: [./US.png]
name: 'America'
}
];
openSelect() {
setTimeout(() => {
this.select1.open();
}, 150);
}
for selecting the country code value you can use [value] property of ion select option
and for displaying the selected value you can use [selectedText] property of ion select in ionic 4/5
you can find official documentation here
<ion-select formControlName="country" [selectedText]="signupform.controls.country.value" name="country" #countryselect id="countryselect">
<ion-select-option *ngFor="let country of countries" [value]="country.id">
{{country.name}}
</ion-select-option>
</ion-select>
I am trying to set the value of the attendance.studentName using value on ion-input. But I am getting an error.
I want to push the value of the ion-input and ion-select to firebase.
<!-- When I delete the ngModel it works -->
<ion-input disabled="true" value="{{student.name}}" [(ngModel)]="attendance.studentName" > {{student.name}} </ion-input>
<ion-select item-end [ngModel]="attendance.status">
<ion-option value="Present">Present</ion-option>
<ion-option value="Absent">Absent</ion-option>
<ion-option value="Late">Late</ion-option>
</ion-select>
</ion-item>
**EDIT **
I am fetching the value of the input from firebase and i dont want the user to edit it so I disabled it. Then i fetch the input using the ngModel.
Here's my code..
TS
import { Student } from '../../models/students/students.model';
import { Attendance } from '../../models/attendance/attendance.model';
export class CheckAttendancePage {
studentList$: Observable<Student[]>
attendance: Attendance = {
studentName: '',
status: ''
}
constructor(private afDatabase: AngularFireDatabase, private studentsList: StudentListService, private attendanceList: AttendanceListService,
public navCtrl: NavController, public navParams: NavParams) {
this.studentList$ = this.studentsList
.getStudentList()
.snapshotChanges()
.map(
changes => {
return changes.map(c => ({
key: c.payload.key, ...c.payload.val()
}))
}
)
}
addAttendance(attendance: Attendance){
console.log(attendance)
}
HTML
In .ts file need to setup attendance object
attendance:any={'studentName': '', .'status':''}
in constructor you can set this value
this.attendance.studentName = your firbase name
In .html file
<ion-item>
<ion-input disabled="true" [(ngModel)]="attendance.studentName" type="text">
</ion-input>
<ion-select item-end [(ngModel)]="attendance.status">
<ion-option value="Present">Present</ion-option>
<ion-option value="Absent">Absent</ion-option>
<ion-option value="Late">Late</ion-option>
</ion-select>
</ion-item>
Setting value of attendance.studentName in constructor
constructor(private firebaseDB: AngularFireDatabase){
this.firabase= this.firebaseDB.list('/users');// your route
this.attendance.studentName= this.firabase.name;
}
Setting value of attendance.studentName in user define method suppose its name Dbcall
First of all inject public navCtrl: NavController in constructor
Dbcall(){
this.attendance.studentName= database student value
this.navCtrl.setRoot(this.navCtrl.getActive().component);
}
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 want to make the first item in the list to be always checked but checked="true" does not seem to be working
<ion-item>
<ion-label class="label">Change City</ion-label>
<ion-select checked="true" [(ngModel)]="cityName"(ionChange)="getCity()">
<ion-option class="option" *ngFor="let city of City" value='{{city.cname}}' >{{city.cname}}</ion-option>
</ion-select>
</ion-item>
you should remove checked="true" from ion-select and try to checked from the .ts file like this:-
export class MyClass {
constructor() {
this.cityName= '**your city name**';
}
}
Note:- checked="true" not working because you used this in
ion-select so, inside the ion-select all option are occur.So it can't
get which option you want to check from ion-select.