Ways to bring attention to a bootstrap card when it is clicked

I'm a beginner with bootstrap and we have a set of cards that we want to highlight when clicked. The structure of the cards is as follows:

<div class="container">
    <div class="row">
        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body text-dark">
                <h5 class="card-title">title</h5>
                <p class="card-text">Quick text</p>
            </div>
        </div>

        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body text-dark">
                <h5 class="card-title">title</h5>
                <p class="card-text">Quick text</p>
            </div>
        </div>
        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body text-dark">
                <h5 class="card-title">title</h5>
                <p class="card-text">Quick text</p>
            </div>
        </div>
    </div>
</div>

We're looking to highlight a card when clicked. Any guidance on how to achieve this?

Check out the code on stackblitz.

Your assistance would be greatly appreciated.

angulartypescriptbootstrap-4.1.x

Answer №1

Custom Styling in Angular:

.highlight {
  background-color: yellow;
}

Implementing Custom Styling in Angular: 

<div class="container">
    <div class="row">
        <div class="card" [ngClass]="{'highlight':checkIfCardIsClicked(1)}"
    (click)="setcurrentlyClickedCardIndex(1)">
            <div class="card-header">Header</div>
            <div class="card-body text-dark" >
                <h5 class="card-title">title</h5>
                <p class="card-text">Quick text</p>
            </div>
        </div>

        <div class="card" [ngClass]="{'highlight':checkIfCardIsClicked(2)}" 
    (click)="setcurrentlyClickedCardIndex(2)">
            <div class="card-header">Header</div>
            <div class="card-body text-dark">
                <h5 class="card-title">title</h5>
                <p class="card-text">Quick text</p>
            </div>
        </div>
        <div class="card" [ngClass]="{'highlight':checkIfCardIsClicked(3)}"
    (click)="setcurrentlyClickedCardIndex(3)">
            <div class="card-header">Header</div>
            <div class="card-body text-dark">
                <h5 class="card-title">title</h5>
                <p class="card-text">Quick text</p>
            </div>
        </div>

    </div>
</div>

Angular Component Logic:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  public currentlyClickedCardIndex: number = 0;

  public setcurrentlyClickedCardIndex(cardIndex: number): void {
    this.currentlyClickedCardIndex = cardIndex;
  }

  public checkIfCardIsClicked(cardIndex: number): boolean {
    return cardIndex === this.currentlyClickedCardIndex;
  }
}

Highlighting clicked cards in Angular helps to keep track of user interactions.

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

Deleting a parent item along with its child elements in the ngrx state management library

I am currently exploring ngrx store and grappling with where to place my logic, specifically whether looping through an array should be handled in the reducer or the component. I have an array of objects called Item that need to be manipulated - particular ...

angularngrx-storengrx-reducers

Ways to organize JSON information in Angular by date basis?

I am working on a project where I need to organize multiple JSON objects into an array based on their date data, with the date field serving as the key. ...

javascriptarraysangular

How to conceal duplicate items in Angular2

In my Angular 2/4 application, I am fetching data from a web API (JSON) and displaying it in a table. In AngularJS, I use the following code: <tbody ng-repeat="data in ProductData | filter:search | isAreaGroup:selectedArea"> <tr style="backgro ...

arraysjsonangulartypescriptduplicates

The datatype 'string' cannot be assigned to the datatype '(token: string) => void'

Within my Angular2 application, I have a class that includes several properties which will be assigned values within components. @Injectable() export class Globals { private token: string; private authorization: string; private roleUser: boole ...

angulartypescript

When using Vue 3 in my app, I discovered that all the TypeScript files are easily accessible through the browser console

I recently completed my Vue3 js app with Typescript, and I have noticed that all the Typescript files are easily accessible for anyone to view through the Sources tab of the browser console. The code is perfectly clear and readable. Is there a method to p ...

typescriptvue.jsvuejs3

Tips for creating a TypeScript function that can accept an array of concatenated modifiers with the correct data type

Can I modify data using a chain of function modifiers with correct typing in TypeScript? Is this achievable? const addA = (data: {}) => { return { ...data, a: "test" } } const addB = (data: {}) => { return { ...data, ...

typescripttypescript-generics

Having difficulty altering the color of an element in Viewer

Currently, I am conducting a PoC and experimenting with changing the color of a selected element to red. Despite creating a class as shown below, I am facing issues where the elements do not change color when selected. I have attempted various examples fro ...

javascripttypescriptthree.jsautodesk-forge

Unlocking the power of asynchronous methods within the useEffect() hook

When attempting to fetch an API within a useEffect(), I encountered the following error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Here is the code snippet that caused the error: -API being fetched: ex ...

node.jsreactjstypescriptnext.js

Is it possible to automatically open the Tinymce Comments sidebar without the need for a manual button click?

After successfully implementing the Tinymce comments plugin into our configuration, we have come across a request from our users. They would like the 'showcomments' button to automatically trigger on page load, displaying the sidebar containing t ...

typescripttinymcetinymce-5tinymce-plugins

Angular Material - truncating selected text in a list

I'm having trouble implementing the Angular Material list with checkboxes, where the text needs to be truncated instead of word-wrapped due to limited UI space. I have modified an example on the Angular Material site to demonstrate the issue. The text ...

cssangularangular-material

Customizing CSS in Angular Components: Taking Control of Style Overrides

I am new to working with Angular and HTML. Currently, I have two different components named componentA and componentB, each having their own .html, .css, and .ts files. In the componentA.css file, I have defined some styles like: .compA-style { font- ...

htmlcssangular

The Angular8 form encounters an error when trying to access the 'valid' property of an undefined value

I am implementing a register form to add an employee and including validation for accuracy. However, I encountered an error message that reads "cannot read property of 'valid' of undefined." Here is the code snippet: HTML <div class="conta ...

htmlangularvalidationtypeerror

The inserted button's click event does not trigger the contentEditable DIV

I have a contentEditable DIV that I manage using the directive below: <div class="msg-input-area" [class.focused]="isMsgAreaFocused" contenteditable [contenteditableModel]="msgText" (contenteditableModelChang ...

javascripthtmlangulardomdom-events

Do not generate authentication code in JHipster using the --skip-server flag

Is there a reason why the authentication part is lost when generating a project with '--skip-server'? yo jhipster --skip-server It seems that upon generating the project without the server, the authentication gets affected (on AJS/A2). Is thi ...

angularjsangularjhipster

What is the best way to create a data type that enables unrestricted index retrieval while ensuring that the value retrieved will never be

By enabling the noUncheckedIndexedAccess option in TypeScript, we ensure that when accessing object properties with arbitrary keys, the value type includes both the specified type and undefined. This behavior is generally appropriate as it aligns with run ...

typescript

Using React Testing Library with TypeScript revealed issues with ES6 modules causing test failures

I am currently working on a small project that involves React, Typescript, and Mui v5. The application is relatively small and uses the default Create React App setup. Although I am new to unit and integration testing, I am eager to make use of the tools ...

reactjstypescriptmaterial-uireact-testing-librarybabel-jest

Filtering out specific properties from an element within a JavaScript forEach loop

const findBloodType = bloodCodeArray.find(bloodCode => bloodCode.code.toUpperCase() === bloodType.toUpperCase()).code; In my Angular code, I am trying to retrieve just the 'code' property of the 'bloodCode' element using a callback ...

javascriptarraysangularforeachcallback

Establishing an efficient development environment with continuous integration for react-native using typescript and nodejs

Unfortunately, we encounter the challenge of working with different nodejs versions in our projects. I am unsure if this is similar to Java where multiple jdks can be installed (multiple nodejs installations), and each project automatically utilizes the co ...

node.jstypescriptreact-nativenpmexpo

When deployed, Angular 14 and Bootsrap 5 are functioning properly on a local environment but encountering issues on an online

My Angular application (version 14.2.0) is integrated with bootstrap (version 5.2.3). Upon building and deploying the application on a local IIS server, everything displays correctly as shown in the image below: https://i.sstatic.net/pLDs6.jpg However, w ...

javascriptcssangulardeploymentbootstrap-5

Concerning the issue of components not loading correctly when using Angular with Lazy Loading Routing

Encountering an unusual issue while utilizing lazyload routing in our application! Within AppModule, there is TopModule followed by DashboardModule, all being loaded lazily. When localhost:4200/dashboard is accessed, the loading sequence is AppModule, To ...

javascriptangular