Reputation: 2629

Mapping multiple click events to a single method

Currently i am faceing a problem while Mapping multiple click events to a single method. My currently implimentation goes as follows and its working fine but i need a better way to handle multiple buttons using one method.can any one help with this please.

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

@Component({
  selector: 'app-draggable',
  templateUrl: './draggable.component.html',
  styleUrls: ['./draggable.component.scss']
})
export class AppComponent implements OnInit {

  status1: boolean = false;
  status2: boolean = false;
  status3: boolean = false;
  status4: boolean = false;
  status5: boolean = false;
  status6: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  clickEvent1() {
    this.status1 = !this.status1;
  }
  clickEvent2() {
    this.status2 = !this.status2;
  }
  clickEvent3() {
    this.status3 = !this.status3;
  }
  clickEvent4() {
    this.status4 = !this.status4;
  }
  clickEvent5() {
    this.status5 = !this.status5;
  }
  clickEvent6() {
    this.status6 = !this.status6;
  }
}

Need to reduce amount of method and variable definition inside the ts file and also in the template file. div tags can be also add dynamically up to max 10 divs...

app.component.html

  <div class="container-fluid">
      <div class="row grid">
          <div class="col-md-4 my-3 grid__widget-holder"
               (click)="clickEvent1()"  
               [ngClass]="status1 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
              <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 1
                            <button class="float-right" type="button">
                                    <i class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent2()"  
          [ngClass]="status2 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 2
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                            </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent3()"  
          [ngClass]="status3 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 3
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent4()"  
          [ngClass]="status4 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 4
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent5()"  
          [ngClass]="status5 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 5
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>

              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent6()"  
          [ngClass]="status6 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
          <div class="card widget">
                      <div class="card-header widget__header">
                          <h5 class="card-title">Widget 6
                          <button class="float-right" type="button">
                              <i  class="fa fa-bandcamp">
                              </i>
                          </button>
                        </h5>
                      </div>
                      <div class="card-body widget__body">
                          Content
                      </div>
                      <div class="card-footer widget__footer">
                          Footer
                      </div>
                  </div>
              </div>
      </div>
  </div>

Upvotes: 3

Answers (3)

Abhishek

Reputation: 1778

There are two possible ways according to me

first: you can directly change the value in html by calling the required variable on click event ex:-

(click)="this.status1 = !this.status1"

second: if you want to make function in ts then do like this ex:-

clickEvent(status): boolean {
    return !status;
  }

and you can use this function of yours in ts as in html:-

(click)="status1 = clickEvent(status1)"
(click)="status2 = clickEvent(status2)"

Upvotes: 4

Sarthak Aggarwal

Reputation: 2312

You can create a event handler with buttonId as parameter and use switch case. Trigger the event handler in html (click)="clickEvent(1)"

.component.html

<button `(click)="clickEvent(1)"`>button1</button>
<button `(click)="clickEvent(2)"`>button2</button>

.component.ts

clickEvent(buttonId : Number){
  switch (buttonId){
    case 1 : {
     this.status1 = !this.status1;
     break;
   }
    case 2 : {
     this.status2 = !this.status2;
   }
   ...
}

Upvotes: 2

user8401765

Reputation:

Are the buttons toggle switches? I'm asking because the implementation is like that.

You could use eval :

clickEvent(id) {
eval(`this.status${id} = !this.status${id};`)
}

PS: Notice that the expression in eval is quoted inside |``| and not normal |''|.

Upvotes: 2

Mapping multiple click events to a single method

Answers (3)

Related Questions