CODEWITHSUNDEEP
angular
Shobhit Porwal
Shobhit Porwal

Reputation: 31

*ngFor with class.active

I am looping over the div below to create successive vertical bars as shown in the image. I have adjusted the height and opacity of the bars based on the index of the array. When the component first loads then all the bars gets filled with yellow color according to the condition [class.rating-type__pipe--active]="i > 1" where i is the index of the array. The use case is that when let's say the fourth bar is clicked then all the first four bars should be filled. I tried writing a function that when any bar is clicked, its index and all indexes below it should have active class true and above false but since the component has already loaded, it isn't reloading the div below and hence not applying the active class to appropriate indexes(bars). How can I make the div reload on each bar click so that I can achieve this functionality of applying active class to only the bars that are below the clicked bar and the bar itself ? Any hint would suffice.

<div class="rating-type__bar-wrapper rating-type__bar-left">
                    <div class="rating-type__pipe" *ngFor="let opt of arr; index as i" #messageEl [attr.data-option-id]="opt._id" [class.rating-type__pipe--active]="i > 1">
                        <div class="rating-type__pipe-pillar" (click)="logMessageId(messageEl)">
                            <span [ngStyle]="{'height': (100 - (i * 20))+'%', 'opacity': (1 - (i * 0.2))}" class="rating-type__pipe-pillar-bg"></span>
                        </div>
                        <div class="rating-type__pipe-text">{{opt.text}}</div>
                    </div>
              </div>

enter image description here

Upvotes: 1

Views: 534

Answers (1)

Abhijit
Abhijit

Reputation: 412

You can do that as follow

<div class="rating-type__bar-wrapper rating-type__bar-left">
    <div class="rating-type__pipe" *ngFor="let opt of arr; index as i" #messageEl [attr.data-option-id]="opt._id" id="rating_id_{{index}}" (click)="onRatingSelected(index)">
        <div class="rating-type__pipe-pillar" (click)="logMessageId(messageEl)">
            <span [ngStyle]="{'height': (100 - (i * 20))+'%', 'opacity': (1 - (i * 0.2))}" class="rating-type__pipe-pillar-bg"></span>
        </div>
        <div class="rating-type__pipe-text">{{opt.text}}</div>
     </div>
 </div>

In .ts

onRatingSelected(clickedIndex: number){
    this.arr.forEach((ratingBar, index){
        const bar = document.getElementById('rating_id_' + index);
        if(index >= clickedIndex) bar.classList.add('rating-type__pipe--active');
        else bar.classList.remove('rating-type__pipe--active');
    });
}

I don't think, it will help you much, though can try.

Upvotes: 2

Related Questions