While testing on the Bluestacks Android simulator, I noticed that the natural responsiveness of Ionic buttons is not working as expected. I want to ensure that going forward, the button color changes when clicked. Should I achieve this with CSS or some other method? The documentation for Ionic is unclear about it.
Below is my button:
<button ion-button block (click)="addEvent();">Add Event</button>
To implement this functionality in your component.ts file:
Start by declaring a variable:
buttonFill: string = '#000'; //Default fill color
Update your HTML as shown below:
<button ion-button block (click)="updateColor();" [ngStyle]="{'background-color': buttonFill}">Update Color</button>
In your function, make the required changes:
updateColor(){
this.buttonFill = '#345465'; //desired color
/*
YOUR FUNCTION CODE HERE
*/
}
An alternative approach to achieve this, in a more ionic manner, is by utilizing the color attribute as demonstrated below:
@Component({...})
export class HomePage {
public ionicNamedColor: string = 'primary';
constructor() {}
public toggleNamedColor(): void {
if(this.ionicNamedColor === 'primary') {
this.ionicNamedColor = 'secondary'
} else {
this.ionicNamedColor = 'primary'
}
}
}
When implementing in your view:
<button (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor">Click me!</button>
Note that you need to include the desired colors in the predefined named color variables from your variables.scss:
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
In case you prefer not using the named color variables, an option would be to directly modify the button's background color like so:
@Component({...})
export class HomePage {
public hexColor: string = '#000000';
constructor() {}
public toggleBackgroundColor(): void {
if(this.hexColor === '#000000') {
this.hexColor = '#dddddd'
} else {
this.hexColor = '#000000'
}
}
}
To implement this in your view:
<button (click)="toggleBackgroundColor()" ion-button [style.background-color]="hexColor">Click me!</button>
Please explore both methods further in this plunker.
Here is the HTML code snippet I am working with:
<ion-item class="text" *ngFor="let item of question.data.answers; let i = index;">
<button (click)="itemClicked(item, item, i, question.key, question.data)" [class.incorrect]="!item.correct && whatISelected == i" [ngStyle]="item.correct ? {'background-color': buttonColor } : null " > {{ item.answer }}</button>
And this is the corresponding part in my component:
// Variables declared before constructor initialization
selectedItem: string
whatISelected: string
buttonColor: string
itemClicked(item, answer, iSelect, key, question) {
// Storing selectedItem for each item
this.hasAnswered = true;
if ( answer.correct ) {
this.selectedItem = answer.correct;
this.buttonColor = '#32db64'
} else {
this.whatISelected = iSelect
this.buttonColor = '#32db64'
}
}
<div *ngIf="showButton1" (click)="buttonClicked('button1')" class="button1" >My Button 1</div>
<div *ngIf="!showButton1" (click)="buttonClicked('button2')" class="button2" >My Button 2</div>
public buttonClicked(buttonName){
if(buttonName === 'button1'){
this.showButton1 = false;
}else{
this.showButton1 = true;
}
}
I'm currently integrating cashfree into my react native app for processing payments. Here is a snippet of the code I'm using: import { CFPaymentGatewayService, CFErrorResponse, } from 'react-native-cashfree-pg-sdk'; import { CFDr ...
Working with Angular 5, I am attempting to develop a dynamic component. One of the components is a simple directive named MyColumnDef (with the selector [myColumnDef]). It is used in the following: parent.compontent.html: <div> <my-table> ...
I have a query related to my Ionic 3 project. Upon running npm audit, I found 10 vulnerabilities that need to be fixed. However, both fixes require Angular 7, and I am aware that Ionic 3 only supports Angular 5. My question is, is there a way to address t ...
Currently, I am in the process of developing a cost function for a game where players are given a set of resources in their hand. The resources can be categorized into different types such as Fire, Air, Water, Earth, Good, Evil, Law, Chaos, and Void. Thes ...
I am currently working on a component that is supposed to display a maximum of x cards in each row, with the overflow (x+) scrolling in the horizontal direction. The challenge I am facing is getting exactly x cards to appear in one row, as shown in the ima ...
I am currently working with NestJS 10 and TypeORM 0.3.17. In my src/config/data-source.ts file, I have the following code snippet... import * as dotenv from 'dotenv'; import * as dotenvExpand from 'dotenv-expand'; import { DataSource } ...
1. A Puzzle to Solve I am faced with the challenge of implementing a dynamic language change flow for my blog. Here is an overview of how I envision it: The user initiates a language change by clicking a button that triggers an event (Subject). This eve ...
I have been looking at various questions, but unfortunately, none of them have provided the help I need. The typescript method I am currently working with is as follows: transferAmount(transfer: Transfer): Observable<number> { return this.http .po ...
Is it possible to make API calls from TypeScript and use "async-await" with it? I am currently in the process of converting React code to TypeScript. Currently utilizing Axios for making HTTP Requests ...
One of the advantages of TypeScript is the ability to target different versions of Javascript globally - allowing for seamless switching between transpiling ES3, ES5, or ES6. For browsers like IE that require ES3 support, it serves as the lowest common de ...
I have developed a Snap-to-Component Directive that functions perfectly in Firefox but encounters issues in Chrome. I have checked canIUse and it should be compatible, so I am seeking insights, especially regarding cross-browser compatibility. Your input i ...
Is there a way to retrieve the JSON data sent during the nodejs finish event? This is how I send the JSON data: oResponse.json({ version: "1.0.0", author: "Someone", contributors: "also Someone" }); I would like ...
I am fetching a large object from my server using an Angular 2 service when the website loads. The structure of the data I need to fetch is as follows: { Edu: [...], Exp: [...], Links: [...], Portfolio: [...], Skills: [...] } Here&apo ...
Is it possible to decorate a nested property within a class? Let's explore with an example: function log(name: string = 'DecoratedProp') { return function logHandler(target: any, field: any) { // get the key ...
My task involves populating a table with data. Specifically, I am focusing on coloring the data in the first year column according to certain conditions. The desired outcome is as follows: +--------+------------+------+------+ | YEAR | 2022 | 2021 ...
I have a webpage located at URL root, which has been developed using React. Now, I am looking to create an API endpoint on the root as well. `http://localhost:3000/` > directs to the React page `http://localhost:3000/foo` > leads to the Next API end ...
When creating data validation APIs, I have a common approach where I include two functions - one that returns a boolean value and another that throws an error. The throwing function typically has a void return type. interface MyType { numberField: num ...
Following the Angular 2 style guideline 04-10 Create and Import Barrels can be challenging, as it may lead to unexpected file loading issues. When running my app, I noticed that Angular attempts to load a non-existent file named "my-component-name-here.js" ...
As a newcomer to Angular, I am trying to ensure that I am following best practices in my project. Here is the scenario: Employee service: responsible for all backend calls (getEmployees, getEmployee(id), saveEmployee(employee)) Employees components: displ ...
I'm encountering an issue with adding icons that I've designed in Figma to my web application. Some of the icons are displaying correctly while others are not. Here is the code snippet I am using to add the icons: .dx-icon-info { mask-image: ...