Clash Royale CLAN TAG#URR8PPP

Printing the One object property from an array of object and perform previous and next in angular5

I have written logic here for next and previous item but I am getting only next value what logic should for previous item.

How can I achieve prevItem and nextItem of array?

prevItem

nextItem

import Component, OnInit from '@angular/core';
import HttpClient from '@angular/common/http';

@Component(
selector: 'app-emptab',
templateUrl: './emptab.component.html',
styleUrls: ['./emptab.component.css']
)
export class EmptabComponent implements OnInit

public customers:any=;
public n:number=0;
public m:number=1;

constructor(private _http:HttpClient)

let url:string="./assets/customer.json";
this._http.get(url).subscribe((response:any)=>

this.customers=response.records;

);

public nextItem():void

this.n=this.n+1;
this.m=this.m+1;
if(this.n>this.customers.length)

this.n=0;
this.m=1;


public prevItem():void

this.n = this.n+1;
this.m = this.m+1;
if(this.n>this.customers.length)

this.n = this.n-1;
this.m = this.m-1;


ngOnInit()





Bellow is my html for printing one object property from an array of object. Here I have used slicePipe for printing first index of array.

<!-- <link rel="alternate" href="atom.xml" type="application/atom+xml" title="Atom"> -->
<header>
<div style="background-color: blueviolet">
<h1 align="center">Customer data</h1><hr/>
</div>
</header>
<div class="container mt-3" >
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0)" (click)="prevsItem">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)" (click)="nextItem()">Next</a></li>
</ul>

<div class="d" *ngFor="let customer of customers|slice:n:m">
"Name:"+" "+customer.Name<br/>
"City:"+" "+customer.City<br/>
"Country:"+" "+customer.Country
</div>
</div>


Below is my Json customer.json file:

"records":[

"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany",
"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico",
"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico",
"Name":"Around the Horn","City":"London","Country":"UK",
"Name":"B's Beverages","City":"London","Country":"UK",
"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden",
"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany",
"Name":"Blondel père et fils","City":"Strasbourg","Country":"France",
"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain",
"Name":"Bon app'","City":"Marseille","Country":"France",
"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada",
"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina",
"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico",
"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland",
"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil" ]




this.n - 1;

this.n + 1;

this.n-1

2 Answers
2

In the html, make sure you add brackets to your function call, like so:

<a class="page-link" href="javascript:void(0)" (click)="prevItem()">Previous</a>


In the prevItem function, if the value becomes less than 0, you need to start again from the final element, like so:

prevItem

this.n = this.n - 1;
this.m = this.m - 1;
if (this.n < 0)
// We've gone too far, start again from the end
this.m = this.customers.length;
this.n = this.m - 1; // We need n to be one lower than m



Here is a StackBlitz demo

From my understanding If your next function is working fine than you could use prev function like this :

In Your .ts file

public nextItem():void

this.n=this.n+1;
this.m=this.m+1;
if(this.n>this.customers.length)

this.n=0;
this.m=1;



public prevItem():void

this.n = this.n-1;
this.m = this.m-1;
if(this.n < 0)

this.n = 0;
this.m = 1;



Replace your previous html click function :

(click)="prevsItem"

With this :

(click)="prevItem()"

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.