Modify the array within a button located inside *ngFor loop

Question

Modify the array within a button located inside *ngFor loop

I am working with 3 buttons that loop through a list of links

links = [
    {
      name: "Link 1",
      id: "number1"
    },
    {
      name: 'Link 2',
      id: "number2"
    }
    {
      name: "Link 3",
      id: "number3"
    }
  ]

These buttons generate 3 buttons in HTML.

In addition, I have a DIV looping through items in "number1":

number1 = [
    {
      name: 'IT',
      address: 'Tokyo 4',
    },
    {
      name: 'Computer',
      address: 'Tokyo 4',
    },
    {
      name: 'Garden',
      address: 'Tokyo 4',
    },
    {
      name: 'Cars',
      address: 'Tokyo 4',
    }
  ]

The DIV renders H1 with {{ card.name }} and P with {{ card.address }}

Now, I need to switch from looping through "number1" to then looping through "number2" when the button number 2 is clicked. How can I achieve this?

(click)="change number1 to number2" - when I click button number 2 etc

Here's the PLUNKER link for reference: https://plnkr.co/edit/MfSx9MjoVtHprFtBHKDZ?p=preview

javascript arrays angular typescript ngfor

Answer 1

Answer №1

Here is an alternative method:

HTML code snippet:

 <li *ngFor="let link of links; let i = index">
      <button (click)="setNumber(i)">{{ link.name }}</button>
 </li>

Typescript code snippet:

...
number;
....
constructor(){
    this.number=this.number1
}

...
setNumber(index){
  console.log(index)
  switch(index){
    case 0:
      this.number = this.number1;
      break;
    case 1:
      this.number = this.number2;
      break;
    case 2:
      this.number = this.number3
  }
}

Check out the demo here

Answer 2

Here is an alternative method:

HTML code snippet:

 <li *ngFor="let link of links; let i = index">
      <button (click)="setNumber(i)">{{ link.name }}</button>
 </li>

Typescript code snippet:

...
number;
....
constructor(){
    this.number=this.number1
}

...
setNumber(index){
  console.log(index)
  switch(index){
    case 0:
      this.number = this.number1;
      break;
    case 1:
      this.number = this.number2;
      break;
    case 2:
      this.number = this.number3
  }
}

Check out the demo here

Answer 3

Answer №2

Indicate a different array variable and change the reference upon button click. Check out this Plunker for a demonstration.

//app component
import {Component, NgModule, OnInit, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let link of links">
      <button (click)="updateLinks(link.id)">{{ link.name }}</button>
    </li>

    <div *ngFor="let card of numbers">
      <h1>{{ card.name }}</h1>
      <p>{{ card.address }}</p>
    </div>
  `,
})
export class App implements OnInit {

  numbers: any[];

  ngOnInit(){
    this.numbers = this.number1;
  }

  updateLinks(linkId: string){
    this.numbers = this[linkId] as any[];
  }

  links = [
    {
      name: "Link 1",
      id: "number1"
    },
    {
      name: 'Link 2',
      id: "number2"
    }
    {
      name: "Link 3",
      id: "number3"
    }
  ]



  number1 = [
    {
      name: 'IT',
      address: 'IT Number 1',
    },
    {
      name: 'Computer',
      address: 'Computer Number 1',
    },
    {
      name: 'Garden',
      address: 'Garder Number 1',
    },
    {
      name: 'Cars',
      address: 'Cars Number 1',
    }
  ]



  number2 = [
    {
      name: 'IT',
      address: 'IT Number 2',
    },
    {
      name: 'Computer',
      address: 'Computer Number 2',
    },
    {
      name: 'Garden',
      address: 'Garder Number 2',
    },
    {
      name: 'Cars',
      address: 'Cars Number 2',
    }
  ]



  number3 = [
    {
      name: 'IT',
      address: 'IT Number 3',
    },
    {
      name: 'Computer',
      address: 'Computer Number 3',
    },
    {
      name: 'Garden',
      address: 'Garder Number 3',
    },
    {
      name: 'Cars',
      address: 'Cars Number 3',
    }
  ]


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 4

Indicate a different array variable and change the reference upon button click. Check out this Plunker for a demonstration.

//app component
import {Component, NgModule, OnInit, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let link of links">
      <button (click)="updateLinks(link.id)">{{ link.name }}</button>
    </li>

    <div *ngFor="let card of numbers">
      <h1>{{ card.name }}</h1>
      <p>{{ card.address }}</p>
    </div>
  `,
})
export class App implements OnInit {

  numbers: any[];

  ngOnInit(){
    this.numbers = this.number1;
  }

  updateLinks(linkId: string){
    this.numbers = this[linkId] as any[];
  }

  links = [
    {
      name: "Link 1",
      id: "number1"
    },
    {
      name: 'Link 2',
      id: "number2"
    }
    {
      name: "Link 3",
      id: "number3"
    }
  ]



  number1 = [
    {
      name: 'IT',
      address: 'IT Number 1',
    },
    {
      name: 'Computer',
      address: 'Computer Number 1',
    },
    {
      name: 'Garden',
      address: 'Garder Number 1',
    },
    {
      name: 'Cars',
      address: 'Cars Number 1',
    }
  ]



  number2 = [
    {
      name: 'IT',
      address: 'IT Number 2',
    },
    {
      name: 'Computer',
      address: 'Computer Number 2',
    },
    {
      name: 'Garden',
      address: 'Garder Number 2',
    },
    {
      name: 'Cars',
      address: 'Cars Number 2',
    }
  ]



  number3 = [
    {
      name: 'IT',
      address: 'IT Number 3',
    },
    {
      name: 'Computer',
      address: 'Computer Number 3',
    },
    {
      name: 'Garden',
      address: 'Garder Number 3',
    },
    {
      name: 'Cars',
      address: 'Cars Number 3',
    }
  ]


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 5

Answer №3

Is it possible to create multiple buttons and show/hide them conditionally based on a variable?

<button *ngIf="arrayNumber === 1" (click)="myFirstFunction()"></button>
<button *ngIf="arrayNumber === 2" (click)="mySecondFunction()"></button>

Answer 6

Is it possible to create multiple buttons and show/hide them conditionally based on a variable?

<button *ngIf="arrayNumber === 1" (click)="myFirstFunction()"></button>
<button *ngIf="arrayNumber === 2" (click)="mySecondFunction()"></button>

Modify the array within a button located inside *ngFor loop

Answer №1

Answer №2

Answer №3

Similar questions

Tips for implementing owl carousel in Nuxt.REACT_UNITS_CODIFY

Utilize *ngFor to generate a class

What is the Importance of Injecting Services, Constants, and Other Dependencies?

Upgrade your React component by replacing componentWillReceiveProps with getDerivedStateFromProps

Splitting the identifier and the name into individual keys within a JSON object

Retrieve specific data from MongoDB by querying for only one section of the information

Using Mongoose to delete multiple documents with the "like" operator

What techniques does Twitter use to insert labels into text boxes?

Show avatar display name (default) in Canvas if image is unavailable

establish an online repository with a data storage system

Unexpected blank space appearing above Grid component in Material UI

Using Selenium Webdriver with Node.js to Crop Images

My coding skills leave much to be desired and I am encountering some challenges with my current Hangman Game project

What is preventing me from properly formatting my JSON object?

Link the index of a nested array of numerical values to the corresponding index of an array containing strings

After updating the TypeScriptOutDir configuration, breakpoints are not being reached

Simple code designed to determine the highest value is producing an IndexError due to the list index being out of range

Using Express and Node.js to encode an image file as base64 data

HTML/JS: Date and Time Tracker

What is the method for sending a file using JavaScript?