how to change pressed item background color in ion-list with Ionic3 using localstorage
No need of localstorage
for this.
You can use below two methods to fulfil your requirement.
- Using
ngStyle
- Using
ngClass
Solution using
ngStyle
- Keep boolean attribute as
isClicked
for every element indivs
array and change it's value on click on list item and setngStyle
according toisClicked
.
Example
TS
export class ExamplePage {
divs;
constructor() {
this.divs = [
{ name: '1', isClicked: false},
{ name: '2', isClicked: false},
{ name: '3', isClicked: false},
{ name: '4', isClicked: false},
{ name: '5', isClicked: false},
{ name: '6', isClicked: false},
];
}
onItemClick(div) {
if (div.isClicked) {
div.isClicked = false;
} else {
div.isClicked = true;
}
}
}
HTML
<ion-item
*ngFor="let div of divs" (click)="onItemClick(div)"
[ngStyle]="{ background: div.isClicked ? '#FF5733': '#33FF93'}">
{{ div.name }}
</ion-item>
Working Example
How to change only one ion-item color in ion-list when clicked?
Take a Variable and check index of your *ngFor
if item gets clicked change color.
.ts
selectedItem: any;
.html
<ion-item *ngFor="let exercise of exercisesArray; let i = index" (click)="onClick(exercise); selectedItem = i" [ngStyle]="{color: selectedItem == i ? YourNewColor : null}">
{{exercise.title}}
</ion-item>
update you selectedItem
variable when Item gets clicked and check it in your ngStyle
to apply new Color.
Change ion-item background color in Ionic 4.0
Use this special ionic CSS rule:
ion-item{
--ion-background-color:#fff;
}
ion list change the color of an item when is pressed
In order to do so, you'd need to set the following sass variables (in your variables.scss
) file:
$list-ios-activated-background-color: #d9d9d9;
$list-md-activated-background-color: #f1f1f1;
$list-wp-activated-background-color: #aaa;
These are the default colors, so change them as needed on your end.
And then make sure your items are buttons (they won't look like buttons, is just to use their clickable properties and styles):
<ion-list>
<button ion-item *ngFor="let tag of tagList; let i=index (click)="addSelectedTag(i)">
<h2> {{tag.val().name}}</h2>
</button>
</ion-list>
Changing background color of Ionic ion-item in CSS
Ionic is injecting an element inside the <ion-item>
giving the element a structure of:
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffff
background, so you can't see your background color.
Apply the background color to the .item-content
element, as @ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link>
to it in the header, with the following:
.item .item-content {
background-color: transparent !important;
}
Here's the working demo.
Ionic 4 update ion-item background programmatically
Set the background of item and the item-native class to transparent using css4 variable; and then set the background style of the ion-item using [ngStyle] depending on the boolean value returned. Example below
.item {
--background: transparent !important;
}
.item .item-native {
--background: transparent !important;
}
Then the HTML will look thus:
<ion-item [ngStyle]="{'background':(true)?'#32db64':'#f53d3d'}">
<ion-label class="ion-text-center">{{variable}}</ion-label>
</ion-item>
Change background color of ion-item on click
See the official documentation here (look at "using Css" or "javascript") : https://ionicframework.com/docs/theming/css-variables#ionic-variables
What you are looking for is changing this variable in your theming (or custom css)
--background-activated : Background of the button when activated
Like :
.fancy-button {
--background-activated: red;
}
I would not go for an angular solution if you only want to change the color of it. It's a Style related issue and as such you should solve it with the solutions provided by ionic for this specific usecase. Doing otherwise's only going to make you code more heavy to read and less performant.
But if you want to apply multiple class to you component after it's been clicked, then you need to use [ngClass]
Related Topics
Html5 Number Input - Always Show 2 Decimal Places
How to Prevent Autoplay in Iframe HTML Content
How to Make a Gap Between Two Div Within the Same Column
Selecting an Option in a Dropdown List Using Request Parameters
Favicon Not Showing Up in Google Chrome Browser
How to Make HTML Table Cell Editable
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Embed Pdf File With Responsive Width
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width
How to Force Div Contents to Stay in One Line With HTML and CSS
Using HTML Anchor Link #Id in Angular 6
Angular Detect When Scroll Reached Certain Point
How to Embed HTML Formatting Inside of a <Textarea> Tag
How to Do a Post Request in HTML Without Opening a New Tab
How to Set Maximum Height for Table-Cell
How to Prevent a User from Entering Negative Values in HTML Input