How to call functions of the parent component in the child component?

Question

I have a child component staying at the father’s, as follows:

Parent component:

@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';
  }
}

Child component:

@Component({
  selector: 'app-componente-filho',
  template: `
<a>chamar função do pai</a>
<div>
    <!-- outros elementos -->
</div>
`
})
export class filho{ }

And I want to call the job alterandoParagrafo(), existing in the parent component, where the anchor <a> is clicked (and only the anchor, without affecting other components). How can I do this?

I’m using Angular 8.2.5

Answer 1

You can do this using the EventEmitter angular.

Add a Event Binding to the element of âncora:

son.componentts.

@Component({
  selector: 'app-componente-filho',
  template: `<a (click)="onClick()">chamar função do pai</a>`
})
export class filho { 
  @Output() callParent = new EventEmitter<any>();

  onClick(){
    this.callParent.emit(null);
  }
}

And add the Binding Event from callParent(the event being issued by the child component) in the parent component, passing as parameter the function you want to execute.

pai.component.ts

@Component({
    selector: 'app-componente-pai',
    template: `
  <p id="elemento">componente pai</p>
  <app-componente-filho (callParent)="onCallParent($event)"></app-componente-filho>
  `
  })
  export class Pai{

    quantVezesAlterado: number = 0;

    alterandoParagrafo(){
      let elem = document.getElementById('elemento');
      elem.innerHTML = 'componente pai alterado ' + this.quantVezesAlterado + ' vezes';
    }

    onCallParent(){
      this.alterandoParagrafo();
      this.quantVezesAlterado++;
    }
  }

To learn more, read the documentation of Angular