ionic 3 ion-radio checked when string is equal to something - ionic-framework

I'm currently working on a client page that reads from a SOAP some values and I'm trying to check a ion-radio if the value read from the call is equal to m or f. This is my code:
<ion-col col-2 style="margin-top:1%">
<ion-label>
<strong class="sexClass">{{'longRegister.sex' | translate }}</strong>
</ion-label>
<div radio-group formControlName="gender" style="margin-top:-10%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" value="F" checked="customer.SESSO == 'f'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" value="M" checked="customer.SESSO == 'm'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>
</ion-col>
My DB table that I read is like this: [SESSO] char NULL,
Thanks in advance.
Traian

Fixed using [value] and [checked], now my code looks like this:
<div radio-group formControlName="gender" style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" [value]="F" [checked]="customer.SESSO == 'f' "></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO"
class="radio-privacy in-middle">
<ion-radio color="dark" [value]="M" [checked]="customer.SESSO == 'm' "></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>

Related

IONIC 5, unable to pass values to TS file with ngModel

need some help with IONIC 5..i want to add on click function to each of the ion item...i want a form to appear below when any of the raio item is clicked
I have tried to use (ng-click)="selection(item.id)"
and also tried
none seem to work as expected.
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
Use (click)="method you want"
And in ionic 5, using text-center is deprecated,i think you can use class="ion-text-center" instead
In yours ts file:
export yourclass{
selectedValue:any;
}
In you html file:
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio [(ngModel)]="selectedValue" value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center >
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio [(ngModel)]="selectedValue" value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
<div *ngIf="selectedValue=='value u want from radio"></div>
I was finaly able to get it done for IONIC 5 using the method below
ON .ts file i did it like this, using (ionChange)="segmentChanged($event)" on the ion-radio-group
category:any = "day";
then on HTML..hope it helps someone
<ion-label>Select Biller</ion-label>
<div class="cat-holder">
<ion-radio-group (ionChange)="segmentChanged($event)"
[value]="category">
<div class="rad-item" text-center >
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport" name="transport" ></ion-radio>
</ion-item>
<ion-label>Dstv</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/gotv.png" alt="">
<ion-radio value="Gotv" name="gotv" ></ion-radio>
</ion-item>
<ion-label>Gotv</ion-label>
</div>
</ion-radio-group>
</div>

Change ion-col breakpoint in *ngFor

Hello i want to change the ion-col breakpoint and width while i display rows from my db.
I want rows with item.type= 'B' to be col-12 but rows with item.type A,C,D to be col-6. Any idea?
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let item of items;" >
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
you can achieve this using size attribute in ionic 4.
<ion-col *ngFor="let item of items;" [size]="item.type == 'B' ? 12 : 6 ">
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
refrence https://ionicframework.com/docs/layout/grid#all-breakpoints
for ionic 3 you can use this code
<ion-grid>
<ion-row *ngFor="let item of items;">
<ng-container *ngIf="item.type == 'B'">
<ion-col col-12 >
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ng-container>
<ng-container *ngIf="item.type != 'B'">
<ion-col col-6 >
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
You can use this technique:
https://angular.io/api/common/NgIf
If you read through you will see something called the else block:
<div class="hero-list" *ngIf="heroes else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>
So in your case it would be
<div *ngIf="item.type=='B' else sixRow">
...
</div>
<ng-template #sixRow>
...
</ng-template>

Wrong value when ion-radio changed

I'm getting a strange error when trying to change the radio button value and posting it in my soap writeData. For example I'm trying to change the gender from M to F, I console.log it and the value in result of the change is like this: rb-1-0
This is my code:
<div radio-group formControlName="gender" style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" [value]="F" [checked]="customer.SESSO == 'f'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO"
class="radio-privacy in-middle">
<ion-radio color="dark" [value]="M" [checked]="customer.SESSO == 'm'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>
This code should work fine for a normal radio button group, please customize the CSS as required.
<ion-list radio-group style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-item>
<ion-label>Female</ion-label>
<ion-radio color="dark" value="F" [checked]="customer.SESSO == 'F'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio color="dark" value="M" [checked]="customer.SESSO == 'M'"></ion-radio>
</ion-item>
</ion-list>

Remove right margin / padding from ionic layout

Hello I just did a fresh install of ionic, actually just learning it however when I loaded it my browser I saw something I didn't like.
There appears to be a right margin I cannot get rid of, I have tried and tried but nothing seems to work. How do I remove it?
This is my html:
<ion-header> <ion-navbar primary>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Welcome, Person</ion-title> </ion-navbar> </ion-header>
<ion-content class="no-padding no-margin">
<ion-grid class="data-table no-padding no-margin">
<ion-row class="header no-padding no-margin">
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Customer</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Invoice #</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Type</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Amount</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Method</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">No. of Tickets</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Date & Time</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
</ion-row>
</ion-grid>
<h3>Ionic Menu Starter</h3>
<p>
If you get lost, the docs will show you the way. </p>
<button ion-button secondary menuToggle>Toggle Menu</button> </ion-content>
This was a fresh ionic installation so it was like that before I even added my custom css.
I have a similar issue which <ion-card></ion-card> has left and right margins, it didn't help when I set no-margin, then I checked Overriding Ionic Varialbles and now the issue solved, you can check the site yourself and do your modification.
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$card-ios-margin-left: 0;
$card-ios-margin-right: 0;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$card-md-margin-left: 0;
$card-md-margin-right: 0;
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
$card-wp-margin-left: 0;
$card-wp-margin-right: 0;
See attachedf image, left side is the original ion-card and right side is the one with settings(black part are the phone frame).
You could not implement custom padding if you want to inherit it from parent so:
<ion-content no-padding>
If you have to do with ion-card try this css:
width: 100% !important;
margin: 0 !important;
padding: 0 !important;

verify of ionic code structure

Can anybody please verify this code in pure ionic-2 format.
Since I am bit confuse to check properly.
If This is not good format then What it could be?
`<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br/>accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login" >
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text"
[(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password"
[(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
if you using visual studio than use command Alt + shift + f to format the html code
<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br />accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login">
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text" [(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password" [(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
Perfect right dear.
Alt + shift + f in visual studio code
and if you don't use visual studio code
you can format online if your code doesn't leak information in third party page