¿Es posible crear un evento personalizado en Angular, dentro del mismo componente ?
Estoy tratando de crear un evento de clic personalizado en el archivo "app.component.html":
<li (customClick) = "cClick($event)"> Test </li>y luego en el archivo app.component.ts:
cClick(e){ (alert("custom event clicked!"))}¿Cómo lograr este llamado dentro del mismo componente? Por favor ayuda :)
<li (customClick) = "cClick($event)"> Test </li>Debe crear una directiva, donde puede escuchar cualquier evento que desee y activarlos en sus emisores de salida personalizados.
componente de pie de página
@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}) } }El componente home.page crea el controlador de eventos que se pasará al componente de pie de página 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) } }en home.page html en algún lugar donde creas el elemento componente
<a-footer [footerText]="'someText'" (footerClicked)="doFooterClicked($event)"> </a-footer>`