How to multiselect group items in Angular?

Question

<div class="col-4" style="display: block; padding-top: 10px;">
            <div class="list-group" id="listDetails" *ngFor="let filter of filters">
                <a class="list-group-item list-group-item-action" (click)='SelectedItem($event, filter)'
                    style="border-style: hidden;" id="list-home-list">
                    <div class="container">
                        <div class="row">
                            <img width="30" height="30" src={{filter.FilterImage}}>
                            <span
                                style="padding: 2px; margin-left: 1px; margin-right: 10px;">{{filter.FilterDiasplayName}}</span>
                            <div class='col d-flex justify-content-end'>
                                <span class="badge">{{filter.FilterValue}}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

How to achieve multiselect option in this case? The list is dynamic. On selection, all selected rows' should become active.

Talha Akca · Accepted Answer · 2020-10-15 11:30:57Z

0

If you just want to highlight selected item maybe you should add class and change their class?

<a class="list-group-item list-group-item-action {{ itemClass }}"...................

and add class to item like active then in your css

.active{ coloring... }

and on your click function handle the item's class

edited Oct 15, 2020 at 11:30

answered Oct 15, 2020 at 10:41

Talha Akca

4023 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to multiselect group items in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related