CODEWITHSUNDEEP
angularevent-handling
Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Angular - event binding

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

Upvotes: 1

Views: 207

Answers (1)

joh04667
joh04667

Reputation: 7427

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
}

Upvotes: 2

Related Questions