I have this ion-option inside a ion-list:
<ion-select [(ngModel)]="year">
<ion-option checked="true">
{{year}}
</ion-option>
<ion-option *ngFor="#year of years">
{{year}}
</ion-option>
</ion-select>
And inside the Page/Component I set:
this.year = '2016';
this.day = 30;
this.month = 'Jan';
Visually it's not checked, technically, it is.:
These are the options:
As it seems it must be a number not string...
How can I solve this?
I think what you are trying to accomplish is something like this:
<ion-select [(ngModel)]="yearModel">
<ion-option *ngFor="#year of years" value="{{year}}">
{{year}}
</ion-option>
</ion-select>
This will show the list of years in your years array, and will check the one you have in yearModel (I used a different variable name for clarity).
For example if you do this.yearModel="2016" in you page file, it will check the year 2016.
Related
I have an ionic vue select which I am populating with an array and using a v-for to loop through the data. I want to pass the selected value when I open the select menu and click OK. Instead of that 5 being passed on I want to pass whatever value is selected in the v-for in this case whatever value is in drop[1] I want to pass that into my emitData function. Below is my code:
<template>
<ion-list>
<ion-item>
<ion-select #ionChange="emitData(5)" id="" placeholder="Select Topic">
<ion-select-option aria-checked="true" v-for="drop in dropData" v-bind:key="drop[1]" :value="drop[1]">{{ drop[0] }}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Is there a way to achieve this?
I would like ask for some assistance regarding on how to use ion-textarea. I am new in Ionic and experiencing a lot of new things in using this. Please refer to the image below on how I will fix this issue. Instead of showing scrollbar in the right side. The text was shown outside the text area. Hope you can help me. Thank you
Here's my code I used:
<ion-col size-md = "12">
<ion-textarea class = "italic" rows="10" cols="5" maxlength = "200" placeholder="Please provide additional comments here..." [(ngModel)]="postFeedback.explanation"></ion-textarea>
</ion-col>
Please refer to Ionic documentation for this or any future questions regarding the natural behavior of ionic.
To answer your question: try using autoGrow = "true" as follows :
<ion-col size-md = "12">
<ion-textarea class = "italic" rows="10" cols="5" autoGrow="true" maxlength = "200" placeholder="Please provide additional comments here..." [(ngModel)]="postFeedback.explanation"></ion-textarea>
</ion-col>
I am running angular app, I have autocomplete field ,I want adjust position of this . I referred official document enter link description here under method ,
updatePosition -
Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.
I am not sure how to use
This is my template.html
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
As shown the pic below I want the mat-option to move little towards left
As shown in this pic, class highlighted always gets style applied to left:779px but I want to remain atv 775px
I was able to style this using
.mat-autocomplete-panel {
position:relative;
right:3px;
}
We have created a component using Angular material's autocomplete. To display the options, we are traversing through an array of 51 objects. I am applying a CSS class to the already selected option. The isAccountingTypeSelected method determines whether the option was selected or not.
The method gets called 51*28 = 1428 times. I don't seem to understand the reason? It should only be called 51 times, shouldn't it?
<mat-form-field class="full-width">
<input type="text" matInput #autoCompleteInput [formControl]="autocompleteForm" [matAutocomplete]="auto" placeholder="Choose Accounting Type" aria-label="Number">
<span matSuffix class="close-icon hover" *ngIf="autoCompleteInput.value" (click)="clearAll($event)"></span>
<span matSuffix class="arrow-drop-down-icon hover" (click)="openPanel()"></span>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="accountingTypeSelected($event)">
<mat-option *ngFor="let accountingType of filteredAccountingTypes | async" [value]="accountingType.code">
<span class="accounting-type-options" [class.selected]="isAccountingTypeSelected(accountingType.code)">
{{ accountingType.name + ' (' + accountingType.code + ')' }}
</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
isAccountingTypeSelected(code: string): boolean {
console.log('I was called');
if (this.selectedAccountingTypes.find((accountingType: AccountingType) => accountingType.code === code)) {
return true;
}
return false;
}
Angular uses changedetection lifecycle multiple times to check if the function has changed for [class.selected] or ngClass. If you use function, it will call multiple times. For this reason the use of function is not advised when you bind, instead you should calculate the values in your component.ts file and just bind the values to ngClass or [class].
Example: Stackblitz
N.B: We know when we change selected value it triggers a event change, we can calculate it and attach the calculation result to the [class.my-class] or ngClass.
Angular is gonna evaluate that expression every time it checks for changes, which in your case might be the css being added to your span elements.
Calling methods from the template in a for loop is not the best approach because they are called very often. You should instead store the result in a property and bind to this property instead.
It is a bind problem. Angular checks more times the result value. You can try with ChangeDetectionStrategy.CheckOnce
Your ngFor loop needs track a specific id so it won't re-render for nothing. Try this:
<mat-option *ngFor="let accountingType of filteredAccountingTypes | async; trackBy: trackByCode"[value]="accountingType.code">
</mat-option>
Then you add this function:
trackByCode(index: number, accountingType: yourType): string {
return accountingType.code;
}
I am using developing an PWA with Ionic 4. while using ion-select for selecting multiple values like this.
<div class="form-group">
<ion-item>
<ion-icon slot="start" name="briefcase"></ion-icon>
<ion-label floating color="primary">Business Unit *</ion-label>
<ion-select multiple="true" placeholder="Select Business" (ionChange)="onBuSelectChange($event)"
formControlName="businessUnit" class="form-control"
[ngClass]="{'is-valid' : submitted && f.businessUnit.errors}">
<ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID">
{{unit.BusinessUnitDesc}}
</ion-select-option>
</ion-select>
<h1 *ngIf="submitted && f.businessUnit.errors && f.businessUnit.errors.required" floating>*</h1>
</ion-item>
</div>
I am getting following output where user is only able to see text of first selected value of ion-options.
I tried overriding css with the following with no success.
.select-text {
-ms-flex: 1;
flex: 1;
min-width: 190px;
font-size: inherit;
text-overflow: ellipsis;
white-space: pre-line;
overflow: hidden;
}
This is late, but I was facing the same problem in my project, The selected options didn't fit inside select item.
The way I was able to solve it is creating an additional element just to show the results (I use popover interface for ion-select element). I know this is not quite a solution, but still it works and looks decent. Maybe someone else can suggest a better way, I would prefer cleaner solution, but for now this is the only way I could handle this.
This is my solution based on your example:
<div class="form-group">
<ion-item>
<ion-icon slot="start" name="briefcase"></ion-icon>
<ion-label floating color="primary">Business Unit *</ion-label>
// I render select hidden
<ion-select multiple="true" placeholder="Select Business" formControlName="businessUnit" interface="popover" #select>
<ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID">
{{unit.BusinessUnitDesc}}
</ion-select-option>
</ion-select>
// And this is visualization part. I chose chips for values visualization as it looks nicer
<ion-item lines="none" (click)="select.open()"> // <- here I use open() function to trigger open command of select
<ion-icon slot="end" name="caret-down-outline" class="attributi__icon"></ion-icon>
<ion-label color="tertiary" class="attributi__label">Business units</ion-label>
</ion-item>
<ng-container *ngFor="let unit of listBusinessUnit">
// here I use formControlgetter to get the current value ofselect and show only the selected items
<ion-chip *ngIf="businessUnit.value.includes(unit.id)" color="dark" outline="true">{{unit.BusinessUnitDesc}}</ion-chip>
</ng-container>
</ion-item>
</div>
And this is the result, but on my project where I use it.
(I don't have enought reputation to post images so here are the links)
Here are the chips
And here is select popup
try this on your css, this work for me.
ion-select::part(text) {
white-space: normal !important;
word-wrap: break-word !important;
}
you can refer to this :
https://ionicframework.com/docs/api/select#styling-select-element