Angular - event binding

Question

Here is a Bootstrap panel. If user clicks icon, hidden parts becomes unhidden, but what I need is to unhidden only that part that was clicked.

   @Component({
      template: `
        <div class="panel panel-default">
          <div class="panel-heading" *ngFor="let fizz of fizzes">
            <div class="row">
              <div class="col-md-2">
                <i class="glyphicon {{ fizz.iconClass }}"></i>
              </div>
              <div class="col-md-8">
                {{ fizz.heading }}
              </div>
              <div class="col-md-2">
                <i class="glyphicon glyphicon-menu-down clickable" (click)="onClick()"></i>
              </div>
            </div>
          </div>
          <div class="panel-body" [hidden]="!clicked">
            {{ fizz.content }}
          </div>
        </div>
      `
    })

    export class FizzComponent {
      fizzes: object[];
      clicked = false;

      onClick(event: any) {
        this.clicked = !this.clicked;
      }
    }

I could achieve it by defining every action on its own, but how do I do it in a more generic way?

Tried to pass $event, like so:

<i class="glyphicon glyphicon-menu-down clickable" (click)="onClick($event)"></i>

And

  onClick(event: any) {
    event.target.clicked = !event.target.clicked;
  }

But without any luck..

It's kind of difficult to understand what you're asking. Could you create a Plunker to demonstrate? Or perhaps add an image to show the behaviour? — aaron-bond
– aaron-bond, Commented Jun 14, 2017 at 15:23

joh04667 · Accepted Answer · 2017-06-14 16:35:54Z

2

If you're looking for a generic, reusable solution, just write a directive to do what you ask. Then, you just need to declare it in the proper module and add it on the elements.

@Directive({
    selector: '[appHideOnClick]'
})
export class HideOnClickDirective {



    @HostListener('click') onClick() {
        // toggle hidden on clicked
        this.isHidden = !this.isHidden;
    }

    @HostBinding('hidden') isHidden = false; // initialize without hidden attribute 

    constructor() {}
}

then in your markup:

<div class="panel-body" appHideOnClick >

Remember that not every element in Angular has the hidden attribute styling attached to it. You may need to either change the directive to apply display: none to the element style, or stick a global rule for the hidden attribute in the styles.css/styles.scss:

[hidden] {
    display: none; // may need to be !important
}

edited Jun 14, 2017 at 16:35

answered Jun 14, 2017 at 16:17

joh04667

7,48730 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Angular - event binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related