ng-class issue with condition in angular?

Question

I have two link which is displaying two different images on click of respective link.first behaviour is fine but when again I click on selected link, image is displaying correct but hover is moving to another link. I mean its displaying second link as selected. here is what I did up to now.

Can someone help what I am doing wrong?

this.toogleClick is true

loadingImg(folder) {
    this.toggleClick = !this.toggleClick;
    this.meta
      .getToken(
        "images",
        this.imgName.ReportJobId,
        (folder == "input" ?
          this.imgName.UniquePhotoName :
          this.imgName.UniquePhotoName
            .replace(".JPG", ".png")
            .replace(".jpg", ".png")),
        folder
      )
      .subscribe(data => {
        this.imgSrc = this.someurl(data);
      }, () => {
        this.imgSrc = "assets/images/image.jpg";
      });
  }

<ul class="result__image--tabslist">
            <li class="result__image--tab left left__tab" (click)="loadImg('output')">
                <span class="result__tab--txt" [ngClass]="toggleClick?'selected':''">
                    Scan
                </span>
            </li>
            <li class="result__image--tab left" (click)="loadImg('input')">
                <span class="result__tab--txt" [ngClass]="toggleClick?'':'selected'">
                    Original
                </span>
            </li>
</ul>

Cristiano Casciotti · Accepted Answer · 2019-09-25 10:18:30Z

1

You can try with

[class.selected]="toggleClick"

instead of

[ngClass]="toggleClick?'':'selected'"

This way the selected class is applied only if toggleClick is true.

answered Sep 25, 2019 at 10:18

Cristiano Casciotti

1,03610 silver badges22 bronze badges

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

2 Comments

DharamChauhan Over a year ago

Hi. style is not changing. both are displaying as selected.

mbojko Over a year ago

You put the same class directive on both images. Of course they both have selected class.

Adrita Sharma · Accepted Answer · 2019-09-25 10:21:31Z

1

You can try:

[class]="toggleClick?'selected':''"

or,

[ngClass]="{'selected': toggleClick}"

or,

[class.selected]="toggleClick"

answered Sep 25, 2019 at 10:21

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

ng-class issue with condition in angular?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related