Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this -

How can I achieve this effect on ion-card?

Here is my HTML code - 

<ion-grid>
    <ion-row>
      <ion-col>
        <ion-card (click)="showDetails()">
          <ion-card-content>
            <ion-label class="header">Aluminium</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>

            <ion-label class="header">Nickle</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-label class="header">Copper</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-label class="header">Alumina</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

This is the CSS for my page - 

page-crm {
    .dx-texteditor.dx-editor-outlined {
        background: #fff;
        border: 1px solid #ddd !important;
        border-radius: 4px;
        font-weight: 600;
        font-size: 16px !important;
        margin-bottom: 10px;
    }

    .header{
        font-weight: 700;
        font-size: 20px !important;
        color: #4D4D4D !important;
    }
    .month{
        color: #808080 !important;
        font-weight: 500;
        margin: 5px;
    }
    .card-content{
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 10px;
    }
   .card{
    box-shadow: 0px 2px 10px #cccccc !important;
   }
   .listContainer{
    box-shadow: 0px 2px 10px #cccccc !important;
   }

}

I tried using .card.activated but it didn't work. I want to add a border or change the shadow color to blue as shown in the image to indicate that the user has selected the card.

cssangularionic-frameworkionic3

Answer №1

Revise your HTML markup with the following updates: 

<ion-row>
  <ion-col>
    <ion-card (click)="onClickCard(1)" [class.active]="selectedCard == 1">
      <ion-card-content>
        <ion-label class="header">Aluminium</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
  <ion-col>
    <ion-card [class.active]="selectedCard == 2" (click)="onClickCard(2)">
      <ion-card-content>

        <ion-label class="header">Nickle</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col>
    <ion-card [class.active]="selectedCard == 3" (click)="onClickCard(3)">
      <ion-card-content>
        <ion-label class="header">Copper</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
  <ion-col>
    <ion-card [class.active]="selectedCard == 4" (click)="onClickCard(4)">
      <ion-card-content>
        <ion-label class="header">Alumina</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>

Include the code below in your TypeScript file:

Define a variable named selectedCard = 0

Add the method below to update selectedCard

onClickCard(ind){
this.selectedCard = ind
}

Then, incorporate the code below in your CSS file: 

card.active {
border: 1px solid #ddd !important;
}

Test the provided code and adjust the CSS as needed.

Answer №2

If you want to remove the selection from a card that is currently selected, you can use the following code:

onClickCard(index){
if(index == this.selectedCard){
   this.selectedCard = 0
} else {
  this.selectedCard = index
}
}

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

Show a few values as a string in Angular using Typescript

I am working with JSON data and I want to know how to display hobbies without including the word "all" in an Angular/TypeScript application. { "Name": "Mustermann1", "Vorname": "Max1", "maennlich& ...

htmlangulartypescript

Tips for testing nested HTTP calls in unit tests

I am currently in the process of unit testing a function that looks like this: async fetchGreatHouseByName(name: string) { const [house] = await this.httpGetHouseByName(name); const currentLord = house.currentLord ? house.currentLord : '957'; ...

javascriptangulartypescriptunit-testingjasmine

Can an Angular 9 application access an uploaded file through an HTTP request from the $_FILES array?

I'm currently facing an issue when attempting to send a file to a PHP server using an HTTP request in Angular 9. The problem lies in the fact that the server is not able to receive the uploaded file in $_FILES. Below is the code snippet I have written ...

phpangularposthttprequest

What is the best way to ensure the font size is responsive in Laravel's welcome.blaze.php file?

On a large screen, the word "LaravelProject" and its links have ample space which I prefer. A newly created Laravel project appears differently on a small screen. When replacing "Laravel" with "LaravelProject," the wor ...

cssvue.jsbootstrap-4

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Adjusting the width of columns in a flex layout using Bootstrap 4

On mobile, I am attempting to rearrange some elements in a different order. Currently, this is what I have: https://i.stack.imgur.com/fY3PQ.png Below is the HTML code: <main> <div data-color="yellow"></div> <div class="wrapper"& ...

cssbootstrap-4flexbox

Move the angular component to an external location

Is there a way to extract a component from my Angular application 'A' and store it separately in order to easily reload it into another Angular application 'B' with the same node_modules and run it? Essentially, I'm looking to crea ...

angularcomponentsruntimestore

Troubleshoot Issue with Installation of angular2-jwt.js and Provide Solutions for Error Code

I am currently following the installation guidelines to install Respond CMS from Github. My progress has hit a snag while attempting to copy files to the public folder using gulp. and it's the third command in step 2. This brief error message aris ...

angulargulprespondcms

Utilizing MySQL Data in an Angular 2 Front-End Component within an Electron Desktop Application

Being new to Electron, this is my first attempt at creating a desktop app. One section of the application simply displays current forecasts based on customer data retrieved using standard database queries. I've opted to use a local MySQL database to ...

mysqlnode.jsangularelectron

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...

htmlcssangularjsangularangular-material2

Adjusting the text color based on the dynamically set background color

If I have a calendar where each entry has a unique background color assigned to it (one color per user), including both light and dark colors that users can choose from, how can I set the text color to match the background style? Where should I begin wit ...

phpjqueryhtmlcss

Switching icon with jQuery upon clicking

I'm just starting to learn jQuery and I'm working on changing the font icon class when clicked to display a drop down. Right now, it changes the icon and drops down the content as expected. However, I'm facing an issue where I want the icon ...

javascriptjqueryhtmlcssfont-awesome

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Why does obj[i] become undefined inside the .then() function? obj = [{'id': 1, 'name': 'john', 'age': '22', 'group': 'grA'}, {'id': 2, 'name': 'mike', &apo ...

javascriptangulartypescriptangular6

Having trouble getting my Angular 2 project up and running

After downloading a MEAN stack project from bitbucket, I attempted to run the front end (Angular 2) locally by navigating to the angular folder and using the command ng serve. However, I encountered the following error: "The serve command requires to be ...

angularmean-stack

Is there a way to replace my website's link colors using classes?

Struggling to change the default link colors on my site. Despite researching similar issues, I can't seem to make it work. This is how I've set the base link colors: a:link, a:visited, a:hover { color: #0279aa } Below is my style override for ...

htmlcss

The positioning of the menu icons varies

When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing su ...

javascriptjqueryhtmlcsswordpress

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

javascripthtmlcssbuttonsvg

Different node types can utilize jsplumb to modify their edge paintstyles

Currently, I am utilizing jsPlumb within my Angular application to establish connections between various elements. In this scenario, I have three distinct node types: subservice, entryAssets, and exitAssets. My objective is to apply different connection st ...

angularjsplumb

How can I use "Lite-Server" with NPM start to showcase my index.cshtml file on the browser?

Currently, I am trying to navigate the world of Visual Studio Code and figure out how to run/compile my project. Starting a new project in Visual Studio was simple enough, but now that I'm working with Visual Studio Code, I find myself struggling to s ...

asp.net-mvcangularvisual-studio-code

Create a CRUD interface in Angular 5 using automated generation techniques

Is there a framework available that can assist in creating CRUD view files from a database table within an MVC project, with Angular as the front-end? I have spent hours searching on Google but still haven't found a solution. All I came across were i ...

asp.net-mvcangularcrud