CODEWITHSUNDEEP
javascriptangular
UIAPPDEVELOPER
UIAPPDEVELOPER

Reputation: 649

How to trigger click on buttons coming from loop by onclick of a single button

I have 3 sections coming from loop. Also I have 3 buttons. Here I need to show only first section('one') by default and first button should be active/disabled.When I click second button second section should show only and second button should be active/disabled..so on.Till now working fine.But I have a 'down button' also,on click of that, click2 button will be trigger,again on click of 'down button' click3 button will be trigger.Here is code below

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div *ngFor="let data of testJson">
  <div *ngIf="data.id==button_selected">
    {{data.name}}
  </div>

</div>

<div style="margin-top:10px">
  <button *ngFor="let data of testJson"
  style="display:block"
  (click)="button_selected=data.id"
  [disabled]="button_selected==data.id"
  >
    click {{data.id}}
  </button>
</div><br>
<div><button>Down arrow</button></div>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  button_selected = 1;
  testJson = [
    {
      id: 1,
      name: 'one'
    },
    {
      id: 2,
      name: 'two'
    },
    {
      id: 3,
      name: 'three'
    }
  ];
  name = 'Angular';
  ngOnInit() {}
}

Upvotes: 0

Views: 698

Answers (2)

N.F.
N.F.

Reputation: 4182

Add this method in your app.component.ts.

  down() {
    if (this.button_selected < this.testJson.length) {
      this.button_selected++;
    }
  }

and modify your down arrow button as below.

<div><button (click)="down()">Down arrow</button></div>

This is stackblitz sample.

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26390

Simply like this

<button (click)="button_selected++">Down arrow</button>

This will activate the next section every time this button is clicked.

Upvotes: 0

Related Questions