Apply a border to the div that has been selected

Question

Apply a border to the div that has been selected

I have a tool for storing information and I am using *ngFor to display each instance in a line.

Is there a way to add a border when clicking on a line? The border should only appear on the clicked line, disappearing from the previous one if another line is clicked.

Any suggestions on how to achieve this effect?

See Demo

.html

<div *ngFor="let item of objects; let i = index" style="width: 100%;">
    <div class="d-flex flex-row divs">
        <div>
            <span>{{item.id}}</span>
        </div>
        <div>
            <div>
                <span>{{item.name}}</span>
            </div>
        </div>
        <div style="margin-left:auto">
            <button>click</button>
        </div>
    </div>
</div>

html css angular typescript bootstrap-4

Answer 1

Answer №1

If you want to dynamically set a class based on the item you clicked, you can utilize ngClass.

For instance:

<div class="d-flex flex-row divs" 
    [ngClass]="{'active' : (selectedItem.id === item.id)}"> <div>
  ...

</div>

When a button is clicked, you can pass the corresponding item like so:

<div style="margin-left:auto">
            <button (click)="setItem(item)">click</button>
        </div>

In your component.ts file, you can assign the selected item as shown below:

public selectedItem :any = {};

setItem(item){
  this.selectedItem = item
}

To apply styles for the .active class in your CSS:

.active{
  border : 1px solid red;
}

You can view a demo of this implementation here: demo.

Answer 2

If you want to dynamically set a class based on the item you clicked, you can utilize ngClass.

For instance:

<div class="d-flex flex-row divs" 
    [ngClass]="{'active' : (selectedItem.id === item.id)}"> <div>
  ...

</div>

When a button is clicked, you can pass the corresponding item like so:

<div style="margin-left:auto">
            <button (click)="setItem(item)">click</button>
        </div>

In your component.ts file, you can assign the selected item as shown below:

public selectedItem :any = {};

setItem(item){
  this.selectedItem = item
}

To apply styles for the .active class in your CSS:

.active{
  border : 1px solid red;
}

You can view a demo of this implementation here: demo.

Apply a border to the div that has been selected

Answer №1

Similar questions

Is it possible to use null and Infinity interchangeably in JavaScript?

Problem with <meta> tag occurring when initial-scale is adjusted

Arrange items by their keys while keeping their current values in order to correspond to the array sequence

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

Is it possible to implement websockets with inversify-express-utils?

Is Jquery struggling to modify the visual enhancements?

Encountering difficulties when attempting to upload a file to Google Cloud Platform using Multer in a Node.js

Is there an image overlapping another image?

The announcement will not be made as a result of the utilization of a private name

Comparison between UI Router and ngRoute for building single page applications

Ways to send a POST variable to PHP without refreshing the webpage

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

Encountering "environment.prod.ts path does not exist in file replacements" error while Dockerizing Angular build

Utilizing group by date feature in Angular ag-Grid

Carousel with Bootstrap: Heading positioned over the content

Adjusting HTML5 drag height while resizing the window

Tips on utilizing storage.set() within google.maps.events.addListener(marker, 'dragend', function() { }); in Ionic 3

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

Is your window.location.hash malfunctioning?

Converting an array of objects into a unified object and restructuring data types in TypeScript