How to create a custom event in Angular, within same component?

Question

Is it possible to create a custom event in Angular, within same component?

I am trying to create a custom click event in "app.component.html" file:

<li (customClick) = "cClick($event)"> Test </li>

and then in the app.component.ts file:

cClick(e){ (alert("custom event clicked!"))}

How to achieve this calling within same component? Please help :)

is there a specific use for overriding this event? can you explain the benefit of having customClick, that might help more — vaira, Sep 13 '21 at 05:26
Just for learning purpose my friend, I know how to handle a custom event from one component to other component. — La Reyna, Sep 13 '21 at 05:29
Just wondered if it is possible to handle a custom event within the same component , so I had this question to ask here. — La Reyna, Sep 13 '21 at 05:30
What is the expected output if you log / alert the event (e) in your example? — Tommi, Sep 13 '21 at 06:39
@Tommi nothing happens on clicking, so the log doesn't show up anything :/ — La Reyna, Sep 13 '21 at 06:59
@LaReyna I understand, but what do you want to see getting logged ? What is the custom event ($event) supposed to contain? — Tommi, Sep 13 '21 at 07:15
I think I had bad understanding about this event concept, the event is for listening and it's not possible to listen without a child-parent component combination. So I think I understand now that it's not possible to create a custom event within the same component :) — La Reyna, Sep 13 '21 at 07:35

score 2 · Answer 1 · answered Sep 13 '21 at 05:17

footer component

  @Component({
         selector: 'a-footer',
         template: `
           <div>{{footerText}}</div>
           <button ion-button (click)="doIt()">Footer Button</button>
          `
        })
        export class AFooterComponent {
          @Input() footerText:string
          @Output() footerClicked = new EventEmitter()
          
          doIt() {
            this.footerClicked.emit({value:this.footerText})
          }
        }

home.page component create the event handler to be passed into footer component doFooterClicked

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {

  appName = 'Ionic App';
  userCourse =[]

  constructor(private navController: NavController) {
    
    this.userCourse = [{CourseName:"course one"},{CourseName:"course two"}]
  }
  
  edit4(_someStuff) {
    
  }
  doFooterClicked(_event) {
    console.log(_event)
    alert("footer clicked "+ _event.value)
  }

}

in the home.page html somewhere you create the component element

<a-footer [footerText]="'someText'"
          (footerClicked)="doFooterClicked($event)">
</a-footer>`

score 1 · Answer 2 · answered Sep 13 '21 at 05:55

1

<li (customClick) = "cClick($event)"> Test </li>

You have to create a directive, where you can listen to whatever event you want and trigger them in your custom output emitters

Angular2 Directive to modify click handling

answered Sep 13 '21 at 05:55

vaira

2,191
1
10
15

How to create a custom event in Angular, within same component?

2 Answers2