I'm trying to override the behaviour of OK button on a multiple select component passing the [selectOptions]. The title and subtitle get overriden, but the buttons and the enableBackdropDismiss settings are ignored.
Anyone can help? Thanks in advance.
<ion-item>
<ion-label>Select roads</ion-label>
<ion-select [(ngModel)]="selectedRoads" multiple="true" [selectOptions]="selectOptions">
<ion-option *ngFor="let road of roads">{{road.description}}</ion-option>
</ion-select>
</ion-item>
this.selectOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Buy',
handler: () => {
console.log('Buy clicked');
}
}
],
enableBackdropDismiss:true
};
Related
I have two lists. One contains categories, which are used to group items from a secondary list.
What I am trying to do is to create a toggle, where you click on the name of a category, and then the items for that category will appear. I managed to create the toggle, but the issue is that when I click on a category, it toggles ALL of the other categories as well.
Is there a way of telling Vue to only toggle the items that belongs to the category that is clicked?
Here is my code.
<template>
<b-container>
<b-card class="my-4">
<b-card-title>
<i :class="icons.LIST"></i>
{{ $t('OverviewTitle) }}
</b-card-title>
<loading-message v-if="!quickListCategories"/>
<not-found v-else-if="!filteredQuickListCategories.length"/>
<b-card-text v-else v-for="(category, index) in filteredQuickListCategories"
:key="category.name">
<h5 v-b-toggle.collapse :class="{'mt-4': index}">
<i v-for="(icon, index) in category.icons" :key="index" class="fa-fw" :class="icon"></i>
{{ $t(category.text) }}
</h5>
<b-collapse id="collapse">
<b-list-group>
<b-list-group-item v-for="list in category.lists" :to="list.to">
<i class="fa-fw" :class="list.icon"/> {{ $t(list.text) }}
<div class="mx-4 d-flex w-100 justify-content-between">
<small>{{ $t(list.subText) }}</small>
</div>
</b-list-group-item>
</b-list-group>
</b-collapse>
</b-card-text>
</b-card>
</b-container>
</template>
<script>
import icons from '#/models/entity/icon';
import CommonInput from '#/components/common/CommonInput';
import LoadingMessage from '#/components/LoadingMessage';
import NotFound from '#/views/NotFound';
import {getQuickListCategories} from '#/models/company/quick-lists';
export default {
components: {
CommonInput,
NotFound,
LoadingMessage
},
data() {
return {
icons,
quickListCategories: null
};
},
created() {
this.$title(this.$t('OverviewTitle));
getQuickListCategories()
.then(quickListCategories => this.quickListCategories = quickListCategories)
.catch(() => {
this.quickListCategories = [];
this.$bvModalExt.msgBoxError();
});
}
};
</script>
const quickLists = [
{
icon: icons.LIST,
to: '/list/link1',
area: 'area A',
text: 'Text 1',
categoryName: 'CATEGORY 1',
},
{
icon: icons.LIST,
to: '/list/link2',
area: 'area B',
text: 'Text 2',
categoryName: 'CATEGORY 2',
},
{
icon: icons.LIST,
to: '/list/link3',
area: 'area C',
text: 'Text 3',
categoryName: 'CATEGORY 3',
}
];
const quickListCategories = [
{
icons: ['fas fa-hand-point-right', 'fas fa-store-alt'],
text: 'HEADER 1',
name: 'CATEGORY 1'
},
{
icons: ['fas fa-hand-point-right', 'fas fa-store-alt'],
text: 'HEADER 2',
name: 'CATEGORY 2'
},
{
icons: ['fas fa-hand-point-right', 'fas fa-store-alt'],
text: 'HEADER 3',
name: 'CATEGORY 3'
}
];
export function getQuickListCategories() {
return userService.getCurrentUserAreaPermissionMap().then(({data: userAreaPermissionMap}) =>
quickListCategories
.map(category => ({
...category,
lists: quickLists
.filter(list => list.categoryName === category.name &&
(!list.area || userAreaPermissionMap[list.area] && userAreaPermissionMap[list.area] !== 'NOT_ALLOWED'))
}))
.filter(category => category.lists.length));
console.log(this.lists)
}
How to hide native android keyboard when clicking on text box using IONIC 2? I have installed IONIC keyboard plugin from https://ionicframework.com/docs/native/keyboard/ link and uses this.keyboard.close();
But still keyboard is opening. Help me how to close the keyboard. I am basically showing DOB from the datepicker plugin in a TEXTBOXenter image description here.
This is the ts file(datepicker1.ts)
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DatePicker } from '#ionic-native/date-picker';
import { Keyboard } from '#ionic-native/keyboard';
#IonicPage()
#Component({
selector: 'page-datepicker1',
templateUrl: 'datepicker1.html',
})
export class Datepicker1Page {
public today:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private datePicker: DatePicker,private keyboard: Keyboard) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Datepicker1Page');
}
openDatepicker()
{
this.keyboard.close();
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
}).then(
date => {
this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
err => console.log('Error occurred while getting date: ', err)
);
}
}
And this is the datepicker1.html page
<ion-header>
<ion-navbar>
<ion-title>datepicker page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>DOB</ion-label>
<ion-input type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
</ion-item>
</ion-content>
You have missed to declare the today variable in the class and you missed to add disabled="true" in ion-input tag. Everything is working fine and I have tested it.
TS File
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Keyboard } from '#ionic-native/keyboard';
import { DatePicker } from '#ionic-native/date-picker';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public keyboard : Keyboard, public datePicker : DatePicker) {
}
today : any;
openDatepicker(){
this.keyboard.close();
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
}).then(
date => {
this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
err => console.log('Error occurred while getting date: ', err)
);
}
}
HTML File
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>DOB</ion-label>
<ion-input disabled="true" type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
</ion-item>
</ion-content>
1) import { DatePicker } from '#ionic-native/date-picker/ngx'; in app.module.ts and keyboard.page.ts
2) public keyboard : Keyboard, in your constructor inject
3) https://ionicframework.com/docs/native/keyboard Take reference from this Official site
openDatepickerStart(){
setTimeout(() => {
this.keyboard.hide();
}, 100);
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
}).then(
date => {
this.SelectDateModelDetails.get('StartTime').patchValue(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear())},
err => console.log('Error occurred while getting date: ', err)
);
}
how to insert radio button and text input inside Prompts alert in ionic 2.
it's work only with text input or radio button. but i want to add radio button group with radio buttons to select only one option and text input in one alert prompt.
my coding
let prompt = this.alertCtrl.create({
title: 'Add Course',
message: "Enter Course Detailes",
inputs: [
{
name: 'id',
placeholder: 'Course ID'
},
{
name: 'img',
placeholder: 'Image url'
},
{
name: 'title',
placeholder: 'Title'
},
{
name: 'Details',
placeholder: 'Details'
},
{
type:'radio',
label:'something1',
value:'something1'
},
{
type:'radio',
label:'something2',
value:'something2'
}
],
buttons : [
{
text: "Cancel",
handler: data => {
console.log("cancel clicked");
}
},
{
text: "Save",
handler: data => {
console.log("search clicked");
}
}
]
});
prompt.present();
According to the documentation:
Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs.
You should use a separate component with a modal controller
#Component(...)
class AddCourses {
courseForm:FormGroup
constructor(params: NavParams) {
}
//create the form reactive or template driven
}
In your parent page,
let coursesModal = this.modalCtrl.create(AddCourses, data);
coursesModal.present();
I want to search the title of the elements in the navigation using the searchbar.
I want to add a search function in the following code.
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
#Component({
selector: 'page-emergency',
templateUrl: 'emergency.html'
})
#Component({
templateUrl: 'emergency_details.html',
})
export class EmergencyDetailsPage {
item;
constructor(params: NavParams) {
this.item = params.data.item;
}
}
#Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>응급</ion-title>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)" icon-left>
<ion-icon [name]="'logo-' + item.icon" [ngStyle]="{'color': item.color}" item-left></ion-icon>
{{ item.title }}
</button>
</ion-list>
</ion-content>
`
})
export class EmergencyPage {
items;
constructor(public nav: NavController) {
this.items = [
{
'title': 'Angular',
'icon': 'angular',
'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
'color': '#E63135'
},
{
'title': 'CSS3',
'icon': 'css3',
'description': 'The latest version of cascading stylesheets - the styling language of the web!',
'color': '#0CA9EA'
}
]
}
openNavDetailsPage(item) {
this.nav.push(EmergencyDetailsPage, { item: item });
}
}
html
<ion-searchbar (ionInput)="getItems($event)" ></ion-searchbar>
<ion-list >
<ion-item *ngFor="let item of items " (click)="openNavDetailsPage(item)">
{{ item.title }}
</ion-item>
</ion-list>
tsfile
openNavDetailsPage(item) {
this.nav.push(EmergencyDetailsPage, item);
}
I might sound old, but i am new for ionic 2. i wrote a code in ionic 2 for checkbox and it is working well but how do i retrieve the count of the checked boxes
Below is the code i have.
checklist.ts code
import { Component } from '#angular/core';
import { NavController, NavParams, Alert } from 'ionic-angular';
#Component({
templateUrl: 'build/pages/checklist/checklist.html',
})
export class ChecklistPage {
checklist:any;
constructor(public nav: NavController, public navParams: NavParams) {
this.checklist = this.navParams.get('checklist');
}
addItem(): void {
let prompt = Alert.create({
title: 'Add Item',
message: 'Enter the name of the task for this checklist below:',
inputs:[
{
name: 'name'
}
],
buttons:[
{
text: 'Cancel'
},
{
text: 'Save',
handler: data => {
this.checklist.addItem(data.name);
}
}
]
});
this.nav.present(prompt);
}
toggleItem(item): void {
this.checklist.toggleItem(item);
}
removeItem(item): void {
this.checklist.removeItem(item);
}
renameItem(item): void {
let prompt = Alert.create({
title: 'Rename Item',
message: 'Enter the new name of the task for this checklist below:',
inputs: [
{
name: 'name'
}
],
buttons: [
{
text: 'Cancel'
},
{
text: 'Save',
handler: data => {
this.checklist.renameItem(item,data.name);
}
}
]
});
this.nav.present(prompt);
}
checkallItems(): void {
this.checklist.items.forEach((item) => {
if(!item.checked){
this.checklist.toggleItem(item);
}
});
}
uncheckItems(): void {
this.checklist.items.forEach((item) => {
if(item.checked){
this.checklist.toggleItem(item);
}
});
}
}
checklist.html
<ion-header>
<ion-navbar secondary>
<ion-title>{{checklist.title}} #(checkeditem)/{{checklist.items.length}}</ion-title>
<ion-buttons end>
<button (click)="checkallItems()">
<ion-icon name="checkbox"></ion-icon>
</button>
<button (click)="uncheckItems()">
<ion-icon name="refresh-circle"></ion-icon>
</button>
<button (click)="addItem()">
<ion-icon name="add-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list no-lines>
<ion-item-sliding *ngFor="let item of checklist.items" class="home-sliding-item">
<ion-item>
<ion-label>{{item.title}}</ion-label>
<ion-checkbox [checked]="item.checked" (click)="toggleItem(item)" class="checklist-item"></ion-checkbox>
</ion-item>
<ion-item-options>
<button light (click)="renameItem(item)">
<ion-icon name="clipboard"></ion-icon>Edit
</button>
<button danger (click)="removeItem(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
You can add a method in your ChecklistPage like this:
public getItemsCount(): number {
let count= 0;
for(let i=0; i<this.checklist.items.length; i++) {
if(this.checklist.items[i].checked){
count++;
}
}
return count;
}
Or following the checkallItems() method:
public getItemsCount(): number {
let count= 0;
this.checklist.items.forEach((item) => {
if(item.checked){
count++;
}
});
return count;
}
And then in your view:
<ion-title>{{checklist.title}} #{{getItemsCount()}}/{{checklist.items.length}}</ion-title>