Tenho um componente filho hospedado no pai, da seguinte forma:
Componente pai:
@Component({
selector: 'app-componente-pai',
template: `
<p id="elemento">componente pai</p>
<app-componente-filho></app-componente-filho>
`
})
export class Pai{
quantVezesAlterado: number = 0;
alterandoParagrafo(){
let elem = document.getElementById('elemento');
elem.innerHtml = 'componente pai alterado ' + this.quantVezesAlterado + ' vezes';
}
}
Componente filho:
@Component({
selector: 'app-componente-filho',
template: `
<a>chamar função do pai</a>
<div>
<!-- outros elementos -->
</div>
`
})
export class filho{ }
E quero chamar a função alterandoParagrafo()
, existente no componente pai, sempre que a âncora <a>
for clicado (e apenas a âncora, sem afetar outros componentes). Como eu posso fazer isso?
Estou usando Angular 8.2.5
app-componente-filho
?