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