How to change default color for radio button using ionic?

Ionic Framework ionic-v3
1

I am new to the ionic 2,now i am using the radio button but on clicking the button it should change its default color blue to green,how can i change it using scss.
below is html code:

    <ion-list>
<ion-item (click)="toggleLanguages()" class="content">      
   Language
    <ion-icon name="add" item-right *ngIf="languageShow"></ion-icon>
    <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
</ion-item>


<div *ngIf="languageHide" >

  <!-- All radio's in a radio group -->

  <ion-list  radio-group [(ngModel)]="selectedLanguage"  
(ionChange)="doSomething($event)" class="ramu">

    <ion-item *ngFor="let language of languageArray" class="radio1">
      <ion-label >{{language.language_name}}</ion-label>
      <ion-radio  item-left [value]="language" ></ion-radio> 
    </ion-item>

  </ion-list >

Below is scss code:

 .content{
   color:white !important;
   background: $balaji;
 }

 .radio1{
    background: $balu;
    color:black !important;
 }

.ramu.radio{
    color:$green-color !important;
   }

 .ramu{
     display:inline;
  }

below is the screen shot what i had got:

image

below is the screen shot actually i want to get:

image
sede menu Language expanded.png360×640 25.6 KB

2

You could change it through the color attribute?

	<ion-item>
		<ion-label>Go</ion-label>
		<ion-radio color="secondary" checked="true" value="go"></ion-radio>
	</ion-item>

So the color is actually a predefined one from the colors array as defined in your variables.

1 Like
3

Can we make it dynamically? Based on radio button changes (ON/OFF) need to change the color of the button dynamically… Is it possible?

4

Sure:

    <ion-item>
      <ion-label>Go</ion-label>
      <ion-radio [color]="myColor" value="go" (ionSelect)="toggleColor()"></ion-radio>
    </ion-item>

then declare myColor:

myColor: string = 'secondary';

and the function:

toggleColor() {
    this.myColor = 'danger';
}
2 Likes
5

The initial color declaration is not working and also else conditions value not reflecting

if(this.isToggledone == true)
{
console.log("True Color Updated: ");
this.myColorone = ‘green’;
}else {
console.log("False Color Updated: ");
this.myColorone = ‘danger’; // This is not working… It showing default color of ionic
}

6

I don’t see any initial declaration? BTW you should shorten your code like this:

if(this.isToggledone) {
    this.myColorone = 'green'
}
else {
   this.myColorone = 'danger'
}

Also green should be a color that’s in your colors map in your variables.scss (under themes). Else this approach won’t work, since [color] attribute binds to that array with colors.

7

I have declared myColorone string inside the component class like below.

public myColorone: string; // initial declaration

The green is working as per the expectation. but the danger is not working. I have shorten the code like above.

8

Could you please post your component over here? Entirely. And your variables.scss file? Because I tested my small example and it actually works as advertized.

9

Sure. Please find below.

Component

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;

@Component({
selector: ‘page-const-app’,
templateUrl: ‘const-app.html’,
})
export class ConstAppPage {

   public isToggledone: boolean;
   public isToggledtwo: boolean;
   public isToggledthree: boolean;
   public isToggledfour: boolean;
   public isToggledfive: boolean;

   public varscolor: string;
   public myColorone: string;
   public myColortwo: string;
   public myColorthree: string;
   public myColorfour: string;
   public myColorfive: string;

constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.isToggledone = false;
    this.isToggledtwo =  false;
    this.isToggledthree =  false;
    this.isToggledfour = false;
    this.isToggledfive = false;
   // this.varscolor = "#f53d3d";
   // this.myColorone = 'danger';
   // this.myColortwo = 'danger';
   // this.myColorthree = 'danger';
   // this.myColorfour = 'danger';
   // this.myColorfive = 'danger';

}

  public notify1() {
       console.log("Toggled: "+ this.isToggledone); 
       
       if(this.isToggledone)
       {
           console.log("True Colors Updated: ");
           this.myColorone = 'green';
       }else {
           console.log("False Colors Updated: ");
           this.myColorone = 'danger';
       }
       
  }

  public notify2() {
       console.log("Toggled: "+ this.isToggledtwo); 
       console.log("Two Color Updated: ");
       this.myColortwo = 'green';
  }

  public notify3() {
       console.log("Toggled: "+ this.isToggledthree); 
       console.log("Three Color Updated: ");
       this.myColorthree = 'green';
  }

  public notify4() {
       console.log("Toggled: "+ this.isToggledfour); 
       console.log("Four Color Updated: ");
       this.myColorfour = 'green';
  }

  public notify5() {
       console.log("Toggled: "+ this.isToggledfive); 
       console.log("Five Color Updated: ");
       this.myColorfive = 'green';
  }

ionViewDidLoad() {
console.log(‘ionViewDidLoad ConstAppPage’);
}

}

variables.scss

// Ionic Variables and Theming. For more info, please see:
// CSS Utilities for App Theming and Platform Style Configuration

// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: “…/assets/fonts”;

// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;

//$red: #e74c3c;

@import “ionic.globals”;

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic’s source scss files.
// To view all the possible Ionic variables, see:
// Overriding Ionic Sass Variables

//$background-md-color: #f53d3d;

//.toggle-icon
//{
//background-color: #f53d3d;
//}

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It’s highly recommended to change the default colors
// to match your app’s branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The “primary” color is the only required color in the map.

$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
green: #71e238,
customss: #e00404,
custom1: #19b698,
custom2: #7761a7,
custom3: #ea6153,
custom4: #4aa3df,
red: #e74c3c
);

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic’s
// default are overridden.

@import “ionic.theme.default”;

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// Ionicons v3: Open-Source Application Icons for iOS and Android

@import “ionic.ionicons”;

// Fonts
// --------------------------------------------------

@import “roboto”;
@import “noto-sans”;

**Html:-**


<ion-header>

  <ion-navbar padding hideBackButton="true">
    <img src="assets/img/Smart_Scheduler_Logo.png">
  </ion-navbar>
  <ion-navbar >
  	 <div class="scrollmenu"> 
   		<a (click) = dashPage()>Dashboard</a>
    	<a (click) = streamPage()>Stream</a>
		  <a (click) = adapterPage()>Adapter</a>
		  <a class="circle">Constant</a>
		  <a (click) = releasePage()>Release</a>
	   	<a (click) = monitorPage()>Monitor</a> 
     </div>  
  </ion-navbar>
</ion-header>


<ion-content >	 
  <ion-card >
  
  <ion-item>
    <ion-label> <span class="font-capp">SS Engine</span></ion-label>
    <ion-toggle  [color]="myColorone" [(ngModel)]="isToggledone" (ionChange)="notify1()" disabled="false"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label> <span class="font-capp">Logging Status</span></ion-label>
    <ion-toggle   [color]="myColortwo"  [(ngModel)]="isToggledtwo" (ionChange)="notify2()" ></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label > <span class="font-capp">Event Based Scheduling</span> </ion-label>
    <ion-toggle   [color]="myColorthree"  [(ngModel)]="isToggledthree" (ionChange)="notify3()" ></ion-toggle>
  </ion-item>

   <ion-item>
    <ion-label > <span class="font-capp">System Email Notification </span></ion-label>
    <ion-toggle   [color]="myColorfour"  [(ngModel)]="isToggledfour" (ionChange)="notify4()" ></ion-toggle>
  </ion-item>
  
 <ion-item>
    <ion-label > <span class="font-capp">Disable all jobs on Error</span></ion-label>
    <ion-toggle   [color]="myColorfive"  [(ngModel)]="isToggledfive" (ionChange)="notify5()" ></ion-toggle>
  </ion-item>
  
  </ion-card>


</ion-content>
10

Looking at the source, it appears that the color attribute of a toggle only takes effect when the toggle is in a checked state. When it’s unchecked, it’s consistently $toggle-md-track-background-color-off / $toggle-md-handle-background-color-off;.

11

That’s true and why a perhaps misread the question if it comes down to the off state. But I’m guessing it’s not the case. It should work for toggling the on state, just tested it again.

@PrabakarKaruppasamy uses (ionChange) which I believe should be (ionSelect). You asked about radio buttons, not toggles (but it shouldn’t matter except that you should use (ionChange) instead of (ionSelect) indeed).

Do you also need to change the color of the off state as well?

12

Yes. we need to change the color of the off state as well. Is there any work around?

13

Yes, there is. Your best bet would be to just use a class for the off state, or an ngClass if you need to change the off state dynamically.

attach the class to the toggle like this:

    <ion-item>
      <ion-label>Go</ion-label>
      <ion-toggle [color]="myColor" (ionSelect)="toggleColor()" class="myClass"></ion-radio>
    </ion-item>

Then create the class to control the colors of that toggle:

.myClass .toggle-icon {
	background-color: purple; // this changes the background, ie the grey stripe.
	.toggle-inner {
		background-color: yellow; // this changes the backgroundcolor of the toggle dot.
	}
}

If you want to control the class name dynamically, use ngClass instead. To finish the answer off, if you want to change all default toggle colors use the CSS utilities found in the docs:

14

Hi,
In your Sass configuration you can change $radio-ios-color-on value.

1 Like