Readmore less toogle not working properly angular 12-CodePudding

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 >
<div  *ngFor = "let data of listOfJobs">
        <div  >
          <div >
            <h2 >{{data.ReqTitle}}</h2>
            <hr  >
          </div>
          <div >
          <ul >
            <li ><i ></i>{{data.MinExperience}}</li>
            <li ><i ></i>{{data.Location}}</li>
            <li ><i ></i>{{data.Salary}}</li>
            <li ><i ></i>{{data.Education}}</li>
            <li ><i ></i>{{data.Industry}}</li>
            <li ><i ></i>{{data.Gender}}</li>
            <li ><i ></i>{{data.JobType}}
            </li>
            <li ><i ></i> {{data.NoofOpenings}}</li>
            <li ><i ></i>{{data.Nationality}}</li>
          </ul>
      
          <h6 >Job-Description:</h6>
            <p   [ngClass]="{'limitTextHeight': isReadMore}" >{{data.PlainJD}}</p>
            <!-- <button (click)="data.visible = !data.visible">{{ data.visible ? 'Show less': 'Show More' }}</button> -->
            <a type="button"  (click)="showText()">
              {{ isReadMore ? 'Read More': 'Read Less' }}
            </a>
            <!-- <a type="button"  (click)="isReadMore[i]==!isReadMore[i]">
              {{ isReadMore[i] ? 'Read More': 'Read Less' }}
            </a> -->
              <a  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!!

CodePudding user response：

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   [ngClass]="{'limitTextHeight': !data.expanded}" >{{data.PlainJD}}</p>
<a type="button"  (click)="toggleText(data)">
    {{ !data.expanded ? 'Read More': 'Read Less' }}
</a>