Adjust the color of the text in Ionic based on the condition

My current solution involves highlighting text in a small slider after a user tap, but it feels very makeshift.

<ion-slide *ngFor="let loopValue of values">
<div *ngIf="viewValue == loopValue">
    <b>
        {{loopValue}}
    </b>
</div>
<div *ngIf="viewValue != loopValue">
    {{loopValue}}
</div>
</ion-slide>

In this code snippet, I highlight the selection by making the slide content bold. However, I would prefer to use Ionic's predefined primary or secondary colors to highlight the user tap. How can I achieve this?

cssangularionic-frameworkionic3

Answer №1

Customizing Colors in Ionic Framework
To customize colors in Ionic 4, you can utilize the color property of the ion-text tag. Your code would then resemble something like this:

<ion-slide *ngFor="let loopValue of values">
  <ion-text [color]="viewValue == loopValue ? 'primary' : 'light'">
   {{loopValue}}
  </ion-text>
</ion-slide>



In Previous Versions (Ionic 3)
In Ionic 3, since there is no specific ion-text tag, you should opt for using ion-item instead.
Below is an example scenario (you can also find a demo on StackBlitz):

<ion-slides>
  <ion-slide *ngFor="let loopValue of values">
    <ion-item [color]="viewValue == loopValue ? 'primary' : 'light'">
      {{loopValue}}
    </ion-item>
  </ion-slide>
</ion-slides>

This implementation allows for dynamic color changing without the need to duplicate tags using *ngIf. The color assignment within the color property is dependent on the ternary operator.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with NPM: Unable to locate the reference to 'Many' and the namespace '_' from the lodash library

I've been incorporating lodash into my angular2 project. Here are the commands I used: $ npm install --save lodash $ npm install --save @types/lodash Upon installing lodash, warning messages popped up for both the main library and the types: https: ...

angulartypescriptnpmlodashnpm-install

Dynamic gallery with customizable features (HTML/CSS)

Seeking guidance on creating a seamless html/css gallery without any spacing between each gallery element. All elements are identical in size, housed as list items within a ul inside a div. Media queries have been established to adjust site and image siz ...

htmlcssgalleryanimated

The impact of CSS on AJAX controls

Struggling to understand why the AJAX control is behaving strangely in relation to this CSS file. Interestingly, removing the CSS file fixes the display issue. CSS File .tdMain { width:452px; font-family:Arial; font:bold,small; } .tdInput { ...

cssasp.netajax

Encountering a frustrating issue while setting up cordova and ionic: receiving an ECONNRESET error and unable

Attempting to install Ionic using npm install -g cordova ionic on my Windows 7 x64 laptop has proven challenging, as I keep encountering an ECONNRESET error. Despite trying multiple solutions found on Stack Overflow, none have been successful. I've a ...

node.jscordovanpmionic-framework

Implement a dynamic card display using Bootstrap to ensure optimal responsiveness

Does anyone know how to create a card view using Bootstrap in HTML and CSS? https://i.sstatic.net/3hIsf.png I've been trying to replicate the image above with no success. Here is the code I have so far: <link href="https://stackpath.bootstrap ...

htmlcssbootstrap-4

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

Troubleshooting Angular4 and TypeScript Compile Error TS2453: A Comprehensive

I'm facing an issue in my Angular4 project build process which I find quite perplexing. The error seems to be related to the import of certain components such as Response, Headers, and Http from @angular. Whenever I attempt to build my project, it thr ...

angulartypescript

Use jQuery to assign a unique CSS class to every third ul element on the page

Currently, I have a large number of li elements that I am iterating through and grouping in sets of 5. However, I need to assign a unique class to every third group in order to achieve the following structure: <ul class="class1"> ...

jquerycssloops

Preventing the lengthy timer task in the latest Chromium Developer Tool

Currently, I am facing a challenge in my Ionic project. The updated Chrome browser is not allowing me to broadcast events as it did before due to the recent update that defers long running tasks. View Code And Screenshot Does anyone have a solution to wor ...

angularjsgoogle-chromeionic-frameworkchromium

Using Javascript to display an element when scrolling within a specific container and each item of an array reaches the top

I'm just starting out with JavaScript and I'm attempting to create a scrollable div that includes items from an array. As the user scrolls and each item reaches the top, I want a hidden element to be displayed. Here's what I have so far: ...

javascripthtmlcssscrolladdeventlistener

Encountered difficulties when compiling the Angular application

When attempting to compile my Angular application, I encounter the following issue: Failed to compile. ./node_modules/@angular/material/esm5/core.es5.js Module not found: Error: Can't resolve '@angular/cdk/a11y' in '/media/DATOS/CBA ...

angular

What is the best way to retrieve the Object key for the connected object in angularFire2?

When I search the database using a user key, I check if an associated object exists: let url = ``/userMember/${userKey}``; const userMemberRef = this.af.database.object(url, { preserveSnapshot: true }); userMemberRef.subscribe(data => { if(data.val ...

angularangularfire2

Position the final offspring adjacent to the one that came before it using Flexbox

I am trying to figure out how to position the last child (CVV) next to the previous one (Expiry), so they are on the same row: .form-col-1--cc { display: flex; flex: 30%; flex-direction: column; text-align: right; align-items: flex-end; } < ...

htmlcssflexbox

Error messages are being generated by Angular CLI due to an unclosed string causing issues with the

After incorporating styles from a Bootstrap theme into my Angular 8 project and updating angular.json, I encountered a compile error displaying the following message: (7733:13) Unclosed string 7731 | } 7732 | .accordion_wrapper .panel .panel-heading ...

cssangular

Managing various situations using observables

Currently facing a coding dilemma: I have an observable that I need to subscribe to and certain requirements must be met: 1 - The registerUser function should only execute after processing the callback data. 2 - If registerTask returns data, I receive an ...

angulartypescript

Retrieve all contacts with a minimum of one telephone number using the ngCordova Contacts plugin

I am using the ngcordova contacts plugin in my app to retrieve contact information. I am wondering if there is a way to only fetch contacts that have at least one phone number. The code snippet I currently have retrieves my Google contacts, but it include ...

androidangularjscordovaionic-frameworkngcordova

What is the best way to search for specific data in a MongoDB database?

When using angular2 in conjunction with meteor, the data contains the following information: { "_id" : "DxEraKtfYavoukdCK", "name" : "Aaron", "capacity" : 20, "available_capacity" : 15, "location" : "1" } { "_id" : "yMhEggaGmS7iio9P4", "name" : "Benard ...

mongodbangular

npm WARNING: The package @angular-devkit/[email protected] is in need of a peer dependency xxxx, however no installation for this dependency has

Attempting to launch an angular project and encountering the following errors: $ npm install npm WARN @angular-devkit/[email protected] requires a peer of @angular/compiler-cli@^14.0.0 but none is installed. You must install peer dependencies yoursel ...

javascriptnode.jsangularnpm

Encountering a Compilation Issue in Angular 4

After executing npm install bootstrap@next in my new Angular project, I encountered a compilation error. As a beginner with Angular, I'm seeking assistance on this issue. Compilation Error: ./node_modules/ansi-html/index.js Module build failed: ...

angularintellij-ideacompiler-errors

Changing the color of an SVG as I scroll to the bottom of the page

On my React page, I am looking to change the color of an SVG element from black to white at the bottom of the page. Is there a React-specific method for accomplishing this task? The div container located at the bottom of the page is not the parent div fo ...

cssreactjssvg