Send click event to Angular component

Question

I have created a component that looks like this:

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  @Input() text: string
  @Input() imgSrc: string
  @Input() reveal: boolean

  ngOnInit() {
  }    

}

The HTML for this component is:

<span class="my-span" [ngClass]="reveal ? 'is-active' : '' ">
  {{ text }}
  <img src="{{ imgSrc }}" alt="">
</span>

And CSS:

.my-span {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;

  img {
    max-width: 200px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
  }

  &.is-active {

    img {
      pointer-events: all;
      opacity: 1;
    }
  }
}

The basic idea of what I would like to do is to use the component something like:

<my-component (click)="clickTest= !clickTest" reveal="clickTest" text="some text" imgSrc="images/my-image.jpeg"></my-component>

So by clicking the component on where ever I have placed it should toggle through some boolean (on/off), which activates the is-active class in the component, i.e. displaying the image in this case.

The text and imgSrc part works, but the click thing doesn't. First of all, in my mind it doesn't make sense that I have to create a new boolean variable for each it on the page where I want this component present. That kind of negates the idea of a component in my head, since the boolean should be WITH the component, and not where the component is called (which could be several places).

So I would think I just need to somehow check when the component is clicked, and then this click event is sent to the component, which can then translate it into and on/off signal.

But I am not quite sure how to achieve this?

danday74 · Accepted Answer · 2021-09-16 22:02:12Z

1

html:

<span class="my-span" (click)="toggleReveal()" [class.is-active]="reveal">
  {{ text }}
  <img src="{{ imgSrc }}" alt="">
</span>

ts:

@Input() text: string
@Input() imgSrc: string
reveal = false

toggleReveal() {
  this.reveal = !this.reveal
}

html for parent:

<my-component text="some text" imgSrc="images/my-image.jpeg"></my-component>

you don't need a click handler on the parent - the click is dealt with in the child component.

You could pass the boolean value reveal into the child component but do you need to do this? If so, just pass in the reveal boolean and declare reveal as an @Input in the child. If false is always good for initialisation then no need to pass it in at all.

edited Sep 16, 2021 at 22:02

answered Sep 16, 2021 at 21:56

danday74

58k56 gold badges273 silver badges337 bronze badges

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

1 Comment

Denver Dang Over a year ago

I just have to admit I am stupid right now. In some way, I always thought that since a component creates an outer layer of the components inside the component I needed the click event on that outer layer, instead of just the span inside the component itself. Jeez man... This is somehow enlightening.

Collectives™ on Stack Overflow

Send click event to Angular component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related