When I receive data from a Web API, my component includes two methods: one to load the next record and another to load the previous record. The goal is to click on an iteration of object data and display it.
Custom 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");
}
The template below shows all the data in the response object, but the intention is to link it with the loadNextResponse() and loadPreviousResponse() methods in the 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 am aiming for functionality similar to the example found here: http://jsfiddle.net/h2G64/