CODEWITHSUNDEEP
htmlcssangulartypescriptangular8
Bitly
Bitly

Reputation: 948

CSS applied to wrong object Angular 8

I am receiving 15 objects inside an array. I splice the first 6 and discard remaining. Now in HTML I have 2 carousel pages where I am creating comparison cards for each object. Carousel is of 2 pages with 3 cards (objects) on each page. I want to apply different css style to the first card of the first page only and rest all would be same. But css is getting applied to first card of both the pages. In typescript the logic is as follows:

  this.sixIdeasArray = response; // response is received from API call
   for (let i = 0; i < this.sixIdeasArray.length; i ++ ){
     if (i <3) {
       this.threeOrLess.push(this.sixIdeasArray[i]);
     } else if ((i >= 3 && (i < 6){
       this.uptoSix.push(this.sixIdeasArray[i]);
    }
  }

Basically I am storing received response in sixIdeasArray and then check if the length is less than 3 I am storing it in separate array threeOrLess, if it is between 3 and 6 I am storing the first three in threeOrLess and next three in uptoSix. Then I am assigning these arrays to ideasArray. Now I have indicators at the bottom of carousel to change the pages. The logic here is to assign threeOrLess to ideasArray on first page and on change event to next page show uptoSix

   changePage(){
     this.ideasArray = this.threeOrLess;
   }

   changePage2(){
     this.ideasArray = this.uptoSix;
   }

Now in HTML I have for loop on ideasArray but it treats first three plans as one array and next three as separate thus applying the CSS class to first object on each page

<div class="container" *ngFor="let idea of ideasArray; let i = index">
   <ul class="data">
     <li *ngIf = "i == 0" class="header"><i class="fas fa-medal"></i>Top Recommended Idea<li>
    <li *ngIf = "i != 0" class="header"><i class="fas fa-thumbs-up"></i>Recommended Idea<li>
   </ul>
</div>

Now it should treat rest five as Recommended Idea and should not apply same style to 1st idea on both pages. How can I achieve that?

Upvotes: 1

Views: 70

Answers (1)

abhay tripathi
abhay tripathi

Reputation: 4022

Use any boolean variable to track(eg- isRecommandedIdea).Check below code :-

In someComponent.ts

isRecommandedIdea: Boolean = false;

changePage(){
this.ideasArray = this.threeOrLess;
isRecommandedIdea = true;
}

changePage2(){
this.ideasArray = this.uptoSix;
isRecommandedIdea = false;
}

In someComponent.html

    <li *ngIf = "(i == 0)&&isRecommandedIdea" class="header"><i class="fas fa-medal"></i>Top Recommended Idea<li>
        <li *ngIf = "i != 0" class="header"><i class="fas fa-thumbs-up"></i>Recommended Idea<li>

You might have to tweak above html code as per to your need.

Upvotes: 1

Related Questions