CODEWITHSUNDEEP
angulartypescript
K.Z
K.Z

Reputation: 5075

How to loop through object via click event in Angular/ TypeScript

I have data coming via consuming Web API. I have two methods in component, load next and previous records. I want to load object data from iteration via click event and display it.

Component

export class NewResponseComponent implements OnInit {


 private view: BehaviorSubject<ConsulationResponsesIdListDataModel>;
 private responseCurrentState: ResponseCurrentStateDataModel;
 private responses: ConsulationResponsesIdListDataModel;

 private responseData = false;

     constructor(private dataService: ConsultationResponsesListDataService,
  private router: Router,
  private session: SessionStorageService){}

ngOnInit(): void {
  this.view = new BehaviorSubject<ConsulationResponsesIdListDataModel>(null);    
   this.loadData();
}

public loadData():void
{

  this.dataService.getConsultationResponsesList(this.responseCurrentState.consultationId, this.responseCurrentState.responseTypeId, this.responseCurrentState.responsesRequestedStatus)
     .subscribe(data =>{
          this.view.next(data);
          this.responses = data;
          this.responseData = true; 
     });
}

public loadNextResponse():void
{
    console.log("request for next response");
}


public loadPreviousResponse():void
{
  console.log("request for previous response");
}

following template shows all data in response object but I want to bind with loadNextResponse() and loadPreviousResponse() method in above component

Template

<div *ngIf='responseData'>
<div *ngFor="let response of responses" class="form-row">
   {{response.responseId}}
</div>

<button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button>
<button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button>

I need to achieve something like this http://jsfiddle.net/h2G64/

Upvotes: 0

Views: 1057

Answers (2)

K.Z
K.Z

Reputation: 5075

I did this way

Component

  export class NewResponseComponent implements OnInit {

   private nums:number[] = [0,1,2,3,4,5,6,7,8,9];
   private currentResponseIndex=0;
   private currentResponse;

 public loadNextResponse(responseIndex: string):void
{

    this.currentResponseIndex = parseInt(responseIndex)+1;

    if(this.nums[this.currentResponseIndex]!=null)
    {
      this.currentResponse = this.nums[this.currentResponseIndex];
      console.log("response index  ",this.currentResponseIndex, "    response ", this.currentResponse);
    }
    else
    {
      this.currentResponseIndex = this.currentResponseIndex-1;
      console.log("reach to max length ", this.currentResponseIndex);
    }

}


public loadPreviousResponse(responseIndex: string):void
{

  this.currentResponseIndex = parseInt(responseIndex) - 1;
  if(this.currentResponseIndex<0)
  {
    this.currentResponseIndex = 0;
    console.log("reach to min length");
  }
  else
  {
    this.currentResponse = this.nums[this.currentResponseIndex];
    console.log("response index  ",this.currentResponseIndex, "    response ", this.currentResponse);
  }
}

Template

<div>
    <h1><span>response Index </span>{{currentResponseIndex}}</h1>
    <h1><span>response  </span>{{currentResponse}}</h1>

    <button class="btn btn-default width-50 mb-xs" id = "{{currentResponseIndex}}" (click)="loadNextResponse(currentResponseIndex)">Load Next Response</button>
    <button class="btn btn-default width-50 mb-xs" id = "{{currentResponseIndex}}" (click)="loadPreviousResponse(currentResponseIndex)">Load Previous Response</button>
</div>

Upvotes: 0

planet_hunter
planet_hunter

Reputation: 3976

Following code might work if I understood your problem correctly - 

<div>
    <!-- <div *ngFor="let response of responses" class="form-row">
        {{response.responseId}}
    </div> -->
    {{responseItem}}
    <button [disabled]="!count || count <= 0" class="btn btn-default width-50 mb-xs" (click)=" count = count - 1; responseItem = responses[count]">Load Previous Response</button>
    <button [disabled]="!!count && count >= responses?.length - 1" class="btn btn-default width-50 mb-xs" (click)="count = count || 0; count = count + 1; responseItem = responses[count]">Load Next Response</button>
</div>

You will have to assign the first item to responseItem property when you get the response from server and then the button clicks will take over the navigation.

EDIT - Adding GIF of POC

check the following GIF of my POC -

enter image description here

Let me know if I missed anything.

I hope this helps :)

Upvotes: 1

Related Questions