CODEWITHSUNDEEP
angularangular5
jicke
jicke

Reputation: 83

angular change clicked element item backgorund color by remove other item background color

hello im creating a rating system , i have 5 div element .. i want when i click on each of them the element's background color turn to grey color.

i wrote a directive it perform applay background color to them . but how can i do this logic that when one element clicked other element shoud have no background color .... because i want just selected element have grey backgroud ... please help thankyou

  takeVote(e,event){
    this.rating = e;
  }

html:

      <div class="rating_start">
        <div class="has_start_con " appVote>
          <a (click)="takeVote(5,$event)" >
            <div class="t"> prefect</div>
            <div class="i"><i class="mdi mdi-emoticon-excited"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(4,$event)">
            <div class="t">good</div>
            <div class="i"><i class="mdi mdi-emoticon-happy"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(3,$event)">
            <div class="t">normal</div>
            <div class="i"><i class="mdi mdi-emoticon-neutral"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(2,$event)">
            <div class="t">not bad</div>
            <div class="i"><i class="mdi mdi-emoticon-sad"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(1,$event)">
            <div class="t">bad</div>
            <div class="i"><i class="mdi mdi-emoticon-dead"></i></div>
          </a>
        </div>
      </div>

my directive:

@Directive({
  selector: '[appVote]'
})
export class VoteDirective {

  constructor(public elm: ElementRef, public renderer: Renderer2) {
  }


  @HostBinding('style.background-color') background: string;


  @HostListener('click') onClick() {
    //let part = document.getElementsByClassName('has_start_con')
    //this.renderer.setStyle(part, 'backgroundColor', 'none');
    this.renderer.setStyle(this.elm.nativeElement, 'backgroundColor', '#d2d2d2');

    //this.background = 'red'
  }

}

Upvotes: 1

Views: 3489

Answers (2)

Vega
Vega

Reputation: 28708

It's much easier to do it in the template:

<div *ngFor="let item of [1,2,3,4,5];let i = index" 
         [style.background]="selected==i?'red':'grey'" (click)="selected=i">
    Option {{i}}
</div>

where selected holds the selected elements index. a click on the div should change it's value and trigger background color change. Set in the class: selected = 0

Demo

If you still want to use the directive, something like this should work:

  @HostListener('click', [])
  onClick(): void {
    let parent = this.elm.nativeElement.parentNode;
    for (var i = 0; i < parent.children.length; i++) {
      parent.children[i].classList.remove('red');
    }
    this.elm.nativeElement.classList.add('red');
  }

where:

.red{
  background-color:red
}

Demo

Upvotes: 1

user7151805
user7151805

Reputation:

Try capturing the rating value 1 - 5 from the event and assign that value to an "selectedRating" property. Then, declare an "isSelected" property assign the nativeElement from the output event and conditionally apply the css nth-child selector on the container div that also has the class="rating_start" where the nth-child(selectedRating).

Alternatively, See the Angular Documentation Cheat Sheet, Template Syntax section for conditionally applying styles:

<div [class.extra-sparkle]="isDelightful">

• Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

Upvotes: 0

Related Questions