Readmore less toogle not working properly angular 12

Question

Hi I'm new to angular and I'm trying to use readmore less functionality but its not working properly ,I am using a shared service to get data through API after receiving it properly, I'm storing it in array in my .ts File then by using ngFor in my div I am displaying it. the problem is my readmore button is not working properly, on click all the click button gets click can anyone guide me what's wrong ?

This is my Html File

<div class="row justify-content-center">
<div class="col-md-6" *ngFor = "let data of listOfJobs">
        <div class="card mb-60 custom-card " >
          <div class="card-header custm-header">
            <h2 class="custom-h2 text-capitalize">{{data.ReqTitle}}</h2>
            <hr class="custom-hr" >
          </div>
          <div class="card-body pt-0">
          <ul class="list-group list-group-flush custom-list mb-4">
            <li class="list-group-item"><i class="fas fa-regular fa-briefcase theme-color custom-i-tag"></i>{{data.MinExperience}}</li>
            <li class="list-group-item"><i class="fa fa-map-marker theme-color custom-i-tag"></i>{{data.Location}}</li>
            <li class="list-group-item"><i class="fa fa-solid fa-wallet theme-color custom-i-tag"></i>{{data.Salary}}</li>
            <li class="list-group-item"><i class="fa fa-graduation-cap theme-color custom-i-tag"></i>{{data.Education}}</li>
            <li class="list-group-item"><i class="fa fa-solid fa-industry theme-color custom-i-tag"></i>{{data.Industry}}</li>
            <li class="list-group-item"><i class="fa fa-user theme-color custom-i-tag"></i>{{data.Gender}}</li>
            <li class="list-group-item"><i class="fa fa-regular fa-business-time theme-color custom-i-tag"></i>{{data.JobType}}
            </li>
            <li class="list-group-item"><i class="fa fa-regular fa-users theme-color custom-i-tag"></i> {{data.NoofOpenings}}</li>
            <li class="list-group-item"><i class="fa fa-solid fa-flag theme-color custom-i-tag"></i>{{data.Nationality}}</li>
          </ul>
      
          <h6 class="card-subtitle mb-2 text-muted">Job-Description:</h6>
            <p class="card-text"  [ngClass]="{'limitTextHeight': isReadMore}" >{{data.PlainJD}}</p>
            <!-- <button (click)="data.visible = !data.visible">{{ data.visible ? 'Show less': 'Show More' }}</button> -->
            <a type="button" class="button custm-bttn text-capitalize   btn-custom" (click)="showText()">
              {{ isReadMore ? 'Read More': 'Read Less' }}
            </a>
            <!-- <a type="button" class="button custm-bttn text-capitalize   btn-custom" (click)="isReadMore[i]==!isReadMore[i]">
              {{ isReadMore[i] ? 'Read More': 'Read Less' }}
            </a> -->
              <a class="button custm-bttn  btn-custom" href="resume-form">Apply</a>
          </div>
        </div>
      </div>
</div>

This is my .ts File

export class CurrentJobsComponent implements OnInit, AfterViewInit {


  listOfJobs: any = [];
  listOfSalutation: any = [];

  //isReadMore :boolean[]=[];
  isReadMore= true;


  constructor(private _getActiveJobs: GetJobService) { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.getActiveJobsDetails();
  }

  getActiveJobsDetails() {
    this._getActiveJobs.getActiveJobs().subscribe(data => {
     
      this.listOfJobs = data.Data;
      console.log(this.listOfJobs);

    })
  }

  showText() {
    this.isReadMore = !this.isReadMore
 }

}

As shown above this is my code, when I try to click on particular readmore button its gets reflected on all the button because of my for loop I guess... Can anyone guide me please!!

Answer 1

One solution could be to add another property to all the items in the jobs array, on retrieval, and use that to control it.

getActiveJobsDetails() {
  this._getActiveJobs.getActiveJobs().subscribe(data => {
      this.listOfJobs = data.Data;
      this.listOfJobs.forEach((job) => {
          job.expanded = true;
      });
  })
}

Then replace showText(),

toggleText(job) {
  job.expanded = !job.expanded
}

and edit the html accordingly.

<p class="card-text"  [ngClass]="{'limitTextHeight': !data.expanded}" >{{data.PlainJD}}</p>
<a type="button" class="button custm-bttn text-capitalize btn-custom" (click)="toggleText(data)">
    {{ !data.expanded ? 'Read More': 'Read Less' }}
</a>