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
Just for learning purpose my friend, I know how to handle a custom event from one component to other component. — La Reyna
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

44_Chintan Vasoya 44_Chintan Vasoya · Accepted Answer · 2021-09-13T05:17:41

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

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

1 Answers