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:

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

• javascript
• arrays
• angular
• typescript
• ngfor

Share Improve this question Follow edited Dec 30, 2020 at 21:46 Vega 28.8k2828 gold badges120120 silver badges145145 bronze badges asked Nov 2, 2017 at 14:29 HappyAngularHappyAngular 1311 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

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

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

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

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