I have this code in ionic to ask for the postal and city of the user:
<ion-row>
<ion-col col-5>
<ion-item no-padding>
<ion-input type="number" class="input-without-icon"
[placeholder]="'reportDetails.contactData.label.postalCode' | translate"
[(ngModel)]="viewModel.model.contactData.postalCode"
(ngModelChange)="viewModel.update()"
[disabled]="viewModel.model.isSubmitted"></ion-input>
</ion-item>
</ion-col>
<ion-col col-7>
<ion-item no-padding>
<ion-input type="text" [placeholder]="'reportDetails.contactData.label.city' | translate"
[(ngModel)]="viewModel.model.contactData.city"
(ngModelChange)="viewModel.update()"
[disabled]="viewModel.model.isSubmitted"></ion-input>
</ion-item>
</ion-col>
</ion-row>
Now I added a service that returns a list of cities to the given postal. The number of cities can be from 0 to 5.
If the count is 1 the city name should be filled into the city input immediately. If the count is > 1 there should be a select where I can chose between the cities. Any suggestions how to achieve this?
you can use ngif for this.
*ngIf="cities?.length>0". if length is greater than
Related
Hi I have a select box in ionic 2 as.
//home.html
<ion-item>
<ion-label>Select City</ion-label>
<ion-select [(ngModel)]="city" (ionChange) ="getDoors()">
<ion-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</ion-option>
</ion-select>
</ion-item>
//home.ts
getDoors(){
console.log(this.cities);
}
But when I am changing option it throw an error, Error trying to diff '1'
can anyone let me know the issue here
Thanks advance
There are 2 methods through which you can get the value of the selected Item.
Method 1
//home.html
<ion-item>
<ion-label>Select City</ion-label>
<ion-select [(ngModel)]="city" (ionChange) ="getDoors($event)">
<ion-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</ion-option>
</ion-select>
</ion-item>
//home.ts
getDoors($event){
console.log($event);
}
Method 2
By using ngModel
//home.html
<ion-item>
<ion-label>Select City</ion-label>
<ion-select [(ngModel)]="selectedcity" (ionChange) ="getDoors($event)">
<ion-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</ion-option>
</ion-select>
</ion-item>
//home.ts
selectedcity: city
getSelectedCity(){
return this.selectedcity;
}
Perhaps it's because you named your ngModel city and your *ngFor uses city as well. Might cause a conflict. I would change your ngModel to
[(ngModel)]="selectedCity"
I am using ionic 2 and I would like to get a result like this:
For now, I have a simple ion-list :
<ion-list radio-group formControlName="type">
<ion-col col-4 >
<ion-item>
<ion-label>Breakfast</ion-label>
<ion-radio value="breakfast" ></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Diner</ion-label>
<ion-radio value="diner" checked="true">
</ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Lunch</ion-label>
<ion-radio value="lunch" checked="true">
</ion-radio>
</ion-item> </ion-col>
my result :
thanks
You need to implement Ionic Segment to get the expected result.
have a look Ionic-Segment
I want to display label and input on left side sequentially and button/icon on right side.
i have tried with using grid as
<ion-grid>
<ion-row>
<ion-col width-10>
<ion-icon name="phone-portrait"></ion-icon>
</ion-col>
<ion-col width-70>
<ion-input type="text" placeholder="Mobile no"></ion-input>
</ion-col>
<ion-col width-10>
<ion-icon name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
It display's it inline but the input box slightly goes below.
also tried with item-left and item-right properties. but cant able to do.
Try this:
<ion-item>
<ion-icon item-left name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-right name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
You will probably have to override some of the css in the elements of ion-grid otherwise.
UPDATE From ionic#3.4.0 :
Thanks to #keldar for the comment. According to the docs,directional properties item-left and item--right are deprecated and you would need to use item-start and item-end which would allow to support both Right to Left and Left to Right.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
ion-row has several attributes (see Row). The one that looks suitable for you is align-items-center.
So, you can try this:
<ion-grid>
<ion-row align-items-center>
...
if you add new col, it mean that will be another column and you don't have unspecified the dimensions of these
When you add
you can insert one ion-item to insert everything on the same line without static sizes.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
I am trying to make a custom item containing 3 inputs in a list in ionic 2, but it's not working. When I put only 1 input, there's no problem. But if I put other tag with "
<ion-item *ngFor="let pergunta of avaliacao; let i=index">
<ion-row>
<ion-input placeholder="Pergunta" [(ngModel)]="pergunta.descricao" clearInput></ion-input>
</ion-row>
<ion-row>
<ion-textarea [(ngModel)]="pergunta.opcoes"></ion-textarea>
</ion-row>
<ion-row>
<ion-label>Obrigatória</ion-label><ion-checkbox [(ngModel)]="pergunta.obrigatoria"></ion-checkbox>
</ion-row>
</ion-item>
I did it. It seems I can't put several input inside ion-item. Just replaced ion-item for div
I'm trying to align a combo and an input text with ionic2.
When i use ion-item inside a ion-grid, it always occupies 50% of the page, without respecting the configured size.
Any idea how to do this?
<ion-row>
<ion-col width-30>
<ion-item>
<ion-select [(ngModel)]="type">
<ion-option value="work">work</ion-option>
<ion-option value="home">home</ion-option>
<ion-option value="cel">cel</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col width-70>
<ion-item>
<ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
</ion-item>
</ion-col>
</ion-row>
https://plnkr.co/edit/BwdCrwECIXV6krWZBCzl?p=preview
Just like you can see in Ionic2 docs these are the values you can use to set the width of the columns:
Explicit Column Percentage Attributes
width-10 10%
width-20 20%
width-25 25%
width-33 33.3333%
width-50 50%
width-67 66.6666%
width-75 75%
width-80 80%
width-90 90%
That's why if you try to use width-30 or width-70, nothing will change. Instead, you can align those two fields by using width-33 and width-67 like you can see in this working plunker.
There, if you inspect the ion-col element in the browser, you'll see this style rule being applied:
ion-col[width-33], ion-col[width-34] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
And
ion-col[width-66], ion-col[width-67] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.6666%;
-ms-flex: 0 0 66.6666%;
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
Which was not happening with width-30 and width-70.
Try giving ion-item as the parent tag for ion-row
<ion-item>
<ion-row>
<ion-col width-30>
<ion-select [(ngModel)]="type">
<ion-option value="work">work</ion-option>
<ion-option value="home">home</ion-option>
<ion-option value="cel">cel</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col width-70>
<ion-item>
<ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
</ion-col>
</ion-row>
</ion-item>