How i Do Click to Change CSS in Angular

Question

I have a button/img in LI. I want to when clicked change css and text-decoration underline.

Ts file :

onSelect(i: number) {
var element = document.getElementsByClassName('brand')[i];
const elementClass = element.className;

if (elementClass != 'btn brand selected') {
  this.renderer.addClass(element,'selected');
}
else{
  this.renderer.removeClass(element,'selected');
}

}

HTML file :

<li class="nav-item" *ngFor="let brand of brands let i = index">
        <button class="btn brand" id="brand" type="button" data-toggle="showCategory" aria-controls="tabOne"
          data-target="#tabOne" href="#merk1" (click)="getCategories(brand.id); onSelect(i);">
          <img [src]="brand.imageLink" width="100" height="40" [alt]="brand.name" role="button">
        </button>
      </li>

You want to change style of the button on which you clicked? — Kamran Khatti
– Kamran Khatti, Commented Aug 4, 2021 at 7:46
Yes, i create logic but when i clicked different img not deleted prev underline in img — MertcanDursun
– MertcanDursun, Commented Aug 4, 2021 at 7:49
You shouldn't use document.getElementBy ... in angular since you could use ViewChild else you could also just change the value of a varaible in the component and use an [ngClass]="my condition" inside the html — Thibaud
– Thibaud, Commented Aug 4, 2021 at 7:57

Kamran Khatti · Accepted Answer · 2021-08-04 07:59:52Z

1

The simplest solution could be using [ngClass] directive with some logic rather than getting the DOM element and manipulating it.

// declare a variable to which assign the selected brand index
selectedBrand: number;

In template assign the current selected index

<li class="nav-item" *ngFor="let brand of brands let i = index">
    <button class="btn brand" (click)="getCategories(brand.id); selectedBrand=i"> <=== NOTE this
      <img [src]="brand.imageLink" width="100" height="40" [ngClass]="{'selected': selectedBrand === i}"> <=== You can assign any class if the current index and selected index is matched
    </button>
  </li>

Hope this works with you

answered Aug 4, 2021 at 7:59

Kamran Khatti

4,2071 gold badge23 silver badges33 bronze badges

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

1 Comment

Kamran Khatti Over a year ago

Glad to help you dont forget to upvote to help others thanks

Collectives™ on Stack Overflow

How i Do Click to Change CSS in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related