I am currently using ionic 4 and I am using the ion-select and ion-select-option tags in html side.
After looking at the documentations when I try to use the selected=true in the ion-select-option it doesn't default to that option chosen. Is there anything that i'm missing or doing wrong?
Here is how my code looks like in the HTML side. I only binded the ngModel on the ts side and nothing else
<ion-select class="ion-select" [(ngModel)]="dialCode">
<ion-select-option value="+1" selected=true>+1</ion-select-option>
<ion-select-option value="+852">+852</ion-select-option>
<ion-select-option value="+86">+86</ion-select-option>
</ion-select>
The issue is that you're binding the ion-select to the dialCode property
... [(ngModel)]="dialCode" ...
So instead of using selected=true, you need to initialize that property with the value that you want to be shown by default. So in your component you could do something like this for example:
// Angular
import { Component } from "#angular/core";
#Component({
selector: "app-home",
templateUrl: "home.page.html",
styleUrls: ["home.page.scss"]
})
export class HomePage implements OnInit {
public dialCode: string = '+1'; // <--- Initialize the property
constructor(...) {}
// ...
}
And then in the view:
<ion-select class="ion-select" [(ngModel)]="dialCode">
<ion-select-option value="+1">+1</ion-select-option>
<ion-select-option value="+852">+852</ion-select-option>
<ion-select-option value="+86">+86</ion-select-option>
</ion-select>
Related
I have a custom button and some ion-select options like below in html.
<ion-button (click)="openSelect()">open</ion-button>
<ion-select multiple=" true" #mySelect>
<ion-select-option> today </ion-select-option>
<ion-select-option> tommorow </ion-select-option>
<ion-select-option> weekend </ion-select-option>
</ion-select>
And the typescript is like this.
import { IonSelect } from '#ionic/angular';
#ViewChild('mySelect', { static: false }) selectRef: IonSelect;
openSelect() {
this.selectRef.open()
}
The result of this html is that the ion-select section expands to whole div but ignoring the button.
How can I apply ion-select to a button instead of its native art and even disable its original art and replace it with my custom button? thankyou.
Context : I have a list of courses followed by the authenticated user. I want to be able to show all the courses's title in the ion-title header, and show the details relative to the selected course in the page content.
The problem : I want to show only the current course name in ion-title without adding a label, and show the label "Courses List" only on the select modal header.I tried to remove the ion-label,but the select modal displayed without title..
This is what I want :
The header :
The select modal :
This is what I get :
When keeping ion-label
When removing ion-label
My code :
<ion-item lines="none">
<ion-label>Courses List</ion-label>
<ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
<ion-select-option *ngFor="let course of courses" [value]="course.id">
{{course.title}}
</ion-select-option>
</ion-select>
</ion-item>
A quick workaround is to set display:none to the ion-label and a placeholder with Course List to achieve what you are looking for.
<ion-item lines="none">
<ion-label style="display:none">Courses List</ion-label>
<ion-select placeholder="Courses List" (ionChange)="selectcourse($event)">
<ion-select-option *ngFor="let course of courses" [value]="course.id">
{{course.title}}
</ion-select-option>
</ion-select>
</ion-item>
First Time:
When one item selected:
You can use the default properties provided by ionic.
In your ts file, declare this:
import { Component } from '#angular/core';
#Component({
selector: 'app-CoursesComponent',
templateUrl: 'CoursesComponent.html',
styleUrls: ['./CoursesComponent.scss'],
})
export class CoursesComponent {
customActionSheetOptions: any = {
header: 'Courses List',
};
}
And then, in your html file:
<ion-item>
<ion-select placeholder="Select" [interfaceOptions]="customActionSheetOptions">
<ion-select-option value="Course1">Course 1</ion-select-option>
<ion-select-option value="Course2">Course 2</ion-select-option>
<ion-select-option value="Course3">Course 3</ion-select-option>
</ion-select>
</ion-item>
I have found out if you put the ion-label inside the selector tags and make the label 'fixed' using the position property with ionic labels it will do the job.
<ion-item lines="none">
<ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
<ion-label position="fixed">Courses List</ion-label>
<ion-select-option *ngFor="let course of courses" [value]="course.id">
{{course.title}}
</ion-select-option>
</ion-select>
</ion-item>
I have a long text to be translated in an Ionic 4 app. I am using angular ngx-translate (#ngx-translate v11.0.1).
To improve readability I would like to have the translation in multiples lines instead of one.
I have changed my i18n json, from this (en-US.json):
"common-questions-content" : "<b>Question 1?</b> Answer 1 <br> <b>Question 2?</b> Answer 2 <b>Question 3?</b> Answer 3",
To this:
"common-questions-content" : [
"<b>Question 1?</b> Answer 1 <br>",
"<b>Question 2?</b> Answer 2 <br>",
"<b>Question 3?</b> Answer 3"
],
Unexpectedly this works! But, it puts commas between every value of the array:
I load the translation service in my app.component.ts:
import {TranslateService} from '#ngx-translate/core';
...
private translateService: TranslateService,
...
this.translateService.use('en-US');
Finally I use it in my html page like that:
{{ 'common_questions' | translate }}
Is it possible to change this behavior and just show all the text without commas?
I would recommend you to have one single input per statement and without html tags int the translations such as :
in your en.JSON :
"QUESTION_1":"blabla",
"QUESTION_2":"blabla",
"QUESTION_3":"blabla",
"ANSWER_1":"blabla",
"ANSWER_2":"blabla",
"ANSWER_3":"blabla",
Then in your component, create two class properties of type array like so:
public questions : string[];
pulbic answers : string[];
constructor (private translate: TranslateService) {
translate.get(["QUESTION_1", "QUESTION_2", "QUESTION_3"]).subscribe(
values => {
this.questions = Object.keys(values).map(key => values[key]);
}
);
translate.get(["ANSWER_1", "ANSWER_2", "ANSWER_3"]).subscribe(
values => {
this.answers = Object.keys(values).map(key => values[key]);
}
);
}
Then in your html display, customize, add click events or whatever you need :
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-grid>
<ion-row *ngFor="let q of questions"><b>{{q}}</b></ion-row>
</ion-grid>
</ion-col>
<ion-col col-6>
<ion-grid>
<ion-row *ngFor="let a of answers">{{a}}</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
This is basic html implementation, but you see how much potential is left for you to use. you can define click events, animations, colors, selected items and so on..
A more cleaner solution which:
avoids creating unhanded subscriptions,
is reusable across different components
is to create a custom pipe:
import { Pipe, PipeTransform } from '#angular/core';
import { TranslatePipe } from '#ngx-translate/core';
#Pipe({
name: 'translateList',
})
export class TranslateListPipe extends TranslatePipe implements PipeTransform {
transform(key: any, length: number): any[] {
return [...Array(length).keys()].map((i) => super.transform(`${key}.${i}`));
}
}
And use it like so in any template with help of NgFor:
<div *ngFor="let item of 'TRANSLATION_KEY' | translateList:2">{{ item }}</div>
Where TRANSLATION_KEY is key that hols an array of 2 strings:
"TRANSLATION_KEY": ["hello", "world"]
This custom pipe extends ngx-translate's own TranslatePipe and uses super.transform(...) call under the hood, so all translation heavy lifting is still handled by ngx-translate.
I'm trying to get input text value and store it in a variable named input in ionic. But I tried and failed. Can anyone please tell me what I have faulty done?
This is my HTML
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" ></ion-input>
</ion-item>
</ion-list>
</ion-content>
and this is my home.ts in ionic
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
var input=document.getElementById('input').nodeValue;
document.getElementById('seven').innerHTML=input;
}
}
Actually you seems to be using angular not angularjs, use [(ngModel)]
<ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>
and inside the component,
name:string;
so whenever you need the value , you can use.
console.log(this.name);
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
</ion-item>
</ion-list>
</ion-content>
// ===
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
inputValue: string = "";
constructor(public navCtrl: NavController) {}
someFunction() {
// here you can use the 'this.inputValue' and get the value of the ion-input
}
}
we use the two way binding the value of ion-input with the class member inputValue,
about ngModel
whan you need to access on the value of the input, check the value of inputValue.
here you can see an exemple I wrote on StackBlitz
Two-way binding is a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.
Since this is a two way binding we have to use both the brackets - [ ( ) ]. Also ngModel is a directive which is used to bind the data both ways.
In Ionic 5 - The way to get the value of an ion-input value when focusing:
<ion-input (ionFocus)="onFocusPlace($event)"></ion-input>
onFocusPlace(event){
this.value = event.target.value;
}
i have an ionic2 app and i want to display an ion-tabs with multiple ion-tab from an array. This array i want to populate with a generic tab and pass it an array.
I have this component <multi-tab></multi-tab>:
<ion-tabs tabsPlacement="top" class="multi-tabs">
<ion-tab *ngFor="let tab of tabs" [tabTitle]="tab.title" [root]="tab.component"></ion-tab>
</ion-tabs>
And this is the ts file:
[some imports here]
export class Tab {
title: string;
component: any;
};
const tabs = [{title: 'Snacks', component: Snacks},
{title: 'Drinks', component: Drinks},
{title: 'Frozen', component: Frozen},
{title: 'Custom', component: customTab}];
#Component({
selector: 'multi-tab',
templateUrl: 'multitab.html'
})
export class multiTab {
tabs : Array<Tab>;
constructor(public modalCtrl: ModalController) {
this.tabs = tabs;
}
}
This is my custom tab component:
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items">
<h2>{{item.title}}</h2>
<p>Quantity: {{item.units}}</p>
<ion-icon name="trash" item-right color="indigo100" (click)="onDelete(item)"></ion-icon>
</ion-item>
</ion-list>
<ion-fab center bottom>
<button ion-fab mini color="pink200" (click)="onAdd()"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
And this the ts file:
[some imports]
const CustomItems = [{
'title': 'custom',
'units': 1
}];
#Component({
templateUrl: 'customTab.html'
})
export class customTab {
items : Array<Item>;
constructor(public modalCtrl: ModalController) {
this.items = CustomItems;
}
[some methods]
I want to use in all tabs the customTab and give it an array to initialize (the items array property) But the closest I've ever been is having this error:
Can't resolve all parameters for customTab(?)
when i tried:
constructor(public aux: Array<Item>) {
this.items = aux;
}
There are 2 options, either use the property rootParams (explained in depth here for example) or create a service that is injected in both components.
Both solutions have their merits, the first one is using the mechanism introduced explicitly for that purpose because ion-tabs are custom components and you can't use inputs and outputs. The second solution is the main mechanism of sharing data in angular applications (like a user session) but can seem as overkill for this small task.
There is an example of using rootParams in this commit.