Navigate through Angular 2 array elements

Question

Navigate through Angular 2 array elements

I am facing an issue where I have an array and I need to display only a single object from the array at a time. The goal is to cycle through the array using a button, but I'm struggling to figure out how to display just one object at a time. You can see what I have so far on this plunker.

I'm unsure if I am correctly utilizing *ngFor in this context. Any help would be greatly appreciated!

angular typescript

Answer 1

Answer №1

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div>{{index}}</div>
      <h2>{{item[index].title}}</h2>
      <button (click)="Next()">next</button>
    </div>
  `,
})
export class App {
  public itemsList = ITEM;
  constructor() {}
  index = 0;

  MoveToNext(id){
    this.index ++;
    if(this.index >= this.itemsList.length) {
      this.index = 0;
    }
  }
}

Plunker example

Answer 2

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div>{{index}}</div>
      <h2>{{item[index].title}}</h2>
      <button (click)="Next()">next</button>
    </div>
  `,
})
export class App {
  public itemsList = ITEM;
  constructor() {}
  index = 0;

  MoveToNext(id){
    this.index ++;
    if(this.index >= this.itemsList.length) {
      this.index = 0;
    }
  }
}

Plunker example

Answer 3

Answer №2

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 *ngFor="let individualItems of items">{{individualItems.title}}</h2>
      {{counter}}
      <button (click)="advance()">proceed</button>
    </div>
  `,
})
export class Application {
  public segment = SEGMENT;
  public counter = 0;

  public get items() {
    return this.segment.filter((item, counter) => index <= this.counter);
  }
  constructor() {}

  public advance(){
   this.counter = Math.min(++this.counter, this.segment.length - 1);
  }
}

Answer 4

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 *ngFor="let individualItems of items">{{individualItems.title}}</h2>
      {{counter}}
      <button (click)="advance()">proceed</button>
    </div>
  `,
})
export class Application {
  public segment = SEGMENT;
  public counter = 0;

  public get items() {
    return this.segment.filter((item, counter) => index <= this.counter);
  }
  constructor() {}

  public advance(){
   this.counter = Math.min(++this.counter, this.segment.length - 1);
  }
}

Navigate through Angular 2 array elements

Answer №1

Answer №2

Similar questions

Guide to properly defining the interface for JSON data in Angular6

Struggling with aligning mat-icon in the center using HTML and CSS?

Challenge with the scope of 'this' in Typescript

Assigning fields dynamically based on a generic string union concept

Angular tips: Retrieving user ID for API authorization

Navigating through child routes in Angular can be tricky, especially when dealing with unknown routes

Leverage elements from nearby npm repository when building an Angular 2 application

Seeking a filterable data grid in Angular 2

Typescript indicates that an object may be potentially null

What is the best way to access the rendered child components within a parent component?

Issues with TypeScript: Difficulty locating names in HTML templates

What is the most effective way to manage JSON Data in Angular 2?

Element remains intact after DOM manipulation even during router navigation

Tips for resolving a typescript Redux connect error related to ActionCreatorsMapObject

The issue persists with react-hook-form and Material UI RadioGroup as the selected value remains null

Collection of strung items that require removal of strings

What could be causing the slower performance of my Angular App on Azure App Service Linux compared to App Service Windows?

Exploring the best way to access ViewContainerRef: ViewChild vs Directive

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Exporting numerous modules from an NPM package