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 -

https://i.sstatic.net/MH5WA.png

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

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a ch ...

javascriptcss

Leveraging icons with Bootstrap 4.5

I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use t ...

javascriptcssbootstrap-4icons

Change the Angular Material 2 theme from light to dark with a simple click

I'm working on an Angular 2 Material project and I want to be able to switch the theme from dark to light with a single click of a button. Can anyone help me figure out how to achieve this? Any tips or advice would be greatly appreciated! ...

angulartypescriptmaterial-designangular-material2

Tips for sharing a React component with CSS modules that is compatible with both ES Modules and CommonJs for CSS modules integration

Some frameworks, like Gatsby version 3 and above, import CSS modules as ES modules by default: import { class1, class2 } from 'styles.modules.css' // or import * as styles from 'styles.modules.css' However, other projects, such as Crea ...

javascriptcssreactjs

What causes two elements with display: inline-block; position: absolute; to overlap instead of appearing side by side?

It is recommended to use position: relative; in order to achieve inline block behavior for both elements and prevent them from overlapping. This positions the elements inline next to each other as they are recognized as blocks. When using position: absolu ...

htmlcsscss-position

The dropdown menu extends beyond the boundaries of the page

I am attempting to incorporate a dropdown menu in the upper right corner. Here is what I currently have: https://i.sstatic.net/soHgc.png The dropdown menu that appears extends beyond the page boundaries. This is the code I am using: <link rel="st ...

htmlcssbootstrap-4

What could be the reason for Angular showing the raw HTML code instead of

I'm currently diving into Angular and encountering an issue where my HTML isn't properly displaying the values I've set. It appears to only show the raw HTML. Here's a snippet from my HTML page: <p>to-do-items works!</p> < ...

javascriptangular

Tips for transferring TimeZone Name from Angular to .NET API

Currently, the API I am working with accepts TimeZone names (such as America/Denver) as a string. In my Angular UI application, I automatically pass the browser timeZoneName to the API. However, when the API receives the string America/Denver, it interpret ...

.netangulardatetimetimezonetimezone-offset

Angular Error: Unable to access property 'users' on a null value

I am working on a component that takes in data through the @Input() decorator regarding a group. My objective is to generate a new array of objects during the initialization of the component based on the data from the group array. Below is the TypeScript c ...

angulartypescript

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

I am exploring ways to incorporate extra icons into the NavMenu.razor component of my Blazor version 8 application. In the earlier version, Blazor 7, there was an iconset setup located in wwwroot/css/, which allowed me to include additional icons simply by ...

cssblazoricons

The error message "result.subscribe is not a function" indicates that there was a problem

I encountered an issue with the following error message: Uncaught TypeError: result.subscribe is not a function Here's a screenshot of the error for reference: Despite attempting to handle the error, I'm still struggling. Below is the snippet o ...

httpangulartypescriptrequesthttp-post

Emphasis and dimension of form

I need help with a field that is supposed to have a black outline, similar to the one shown below: However, here is what I currently have in my code: .r{ height: 40px; font-size: 30px; width: 100px; font-family: 'proxima_novalight ...

htmlcssformsinputfield

Encountering an error message during the installation of 'ngx-toastr' within an Angular project

Whenever I attempt to install 'ngx-toastr', I encounter an error message. Additionally, my website is being created using Bootstrap. ERROR npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@">=16.0.0-0" from <a ...

node.jsangularnpm-install

Having trouble adjusting the appearance of the dropdown menu in Angular Material's Select component

I've been attempting to adjust the style of the overlay panel within an Angular Material's MdSelect component in order to change the default max-width property of 280px. I have tried various methods, such as using '!important' to overr ...

cssangulartypescriptsassangular-material2

Mastering the art of positioning images using CSS and HTML in email marketing

Currently in the midst of designing an email template for a new project. I have set up a table, with one row featuring some stripes and the next row showcasing a black bar to match the site's layout. My question is: Is there a way to incorporate an i ...

htmlcssoutlookgmail

Is a fixed div located inside a fluid grid container?

Having developed a website with a fluid 12 column grid, I am looking to lock the position of a div in the right hand column once it reaches the top of the page (using something like StickyJs or a similar tool). However, when the fixed position is applied, ...

jqueryhtmlcssfluid-layoutgrid-system

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...

javascripthtmlcss

The CSS menu appears more compact when viewed on a different page

Recently, I've been working on a website for practice and decided to include a menu. It functions perfectly on the first webpage, but appears slightly smaller on the second one. Here's the code snippet I used for the menu on the initial page: &l ...

htmlcssmenu

Sharing data between two components in Angular 7

The Address object values are not being retrieved as expected when requesting from the credit card component to a function called getAddress() in a config service that holds the value. Instead of the updated values, I am getting the initial values. Below i ...

angular

What is the most effective way to implement a CSS stylesheet on a particular individual element?

Just starting out in web development and I recently experimented with a CSS stylesheet on a basic HTML element. It worked great when I targeted the element by name like this: label { color: green; } However, I wondered if there was a way to apply sty ...

htmlcss