Change array from button inside *ngFor

Question

I have 3 buttons with let link of links

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

They render 3 button in HTML.

I have a DIV with "let card of number1":

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

And they render DIV with H1 {{ card.name }} and P with {{ card.address }}

But, how change let card of number1 to let card of number2 when I click on the button number 2? Like this:

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

PLUNKER: https://plnkr.co/edit/MfSx9MjoVtHprFtBHKDZ?p=preview

Vega · Accepted Answer · 2020-12-30 21:46:46Z

4

An other approach:

HTML:

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

Typescript:

...
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
  }
}

DEMO

edited Dec 30, 2020 at 21:46

answered Nov 2, 2017 at 14:44

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HappyAngular Over a year ago

Awesome! Thank you so much! <3

Igor · Accepted Answer · 2017-11-02 14:47:16Z

Point to a different array variable and switch the reference on button click. This is your plunker doing that.

//our root 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 {}

Boulboulouboule · Accepted Answer · 2017-11-06 21:06:40Z

0

You can create multiple buttons and displaying/hiding them conditionnally ?

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

edited Nov 6, 2017 at 21:06

user8879030

answered Nov 2, 2017 at 14:36

Boulboulouboule

4,2271 gold badge15 silver badges30 bronze badges

Collectives™ on Stack Overflow

Change array from button inside *ngFor

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related