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

The min-height attribute of the tooltip functions, but the min-width attribute does

Obtaining the URL from the anchor tag

Is there a way to prevent a link from activating when I click on one of its internal elements?

ngx-translate-multi-http-loader: An error occurred while trying to load the specified translation file

Having trouble with overriding an @media query for material-ui react components?

Angular Typescript error: Trying to assign a value to 'someProperty' property of an undefined object

Vue.js - I am looking to create dynamic buttons that change color when clicked

Creating a searchable and filterable singleSelect column in the MUI DataGrid: A step-by-step guide

Poorly positioned text displayed inline in HTML

The NGRX state in Angular is not being properly saved by the local storage

Button placed within a jade table cell

What is the best way to store a video file in a database?

Is it possible for the font size to adjust based on the heading (h1, h2, h3) I choose when using CSS to specify a particular font size?

How will the presence of @types/react impact the higher-level files in my project?

Using jQuery to apply the "a" class with the addClass method

How can I seamlessly combine CoffeeScript and TypeScript files within a single Node.js project?

Troubleshooting the challenge of transitioning from Angular 4 to Angular 9 with flatMap

Show fixed div at specific height

Retrieve Data from Angular's ngRedux Store

Select the fourth element in a list using CSS