Template reference variable in Angular

💻 Tech

Template reference variables allow the parent component’s template to access its children component’s properties and methods directly in the template.

// Child component ts file
@Component({
  selector: 'app-child',
  template: `<p>{{ someData }}</p>`
})
export class ChildComponent {
  someData = "Some data";
  
  printSomething() {
    console.log('Printing something');
  }
}

<!-- Parent component template -->
<app-child #childRef></app-child>
<button (click)="childRef.printSomething()">Call child method</button>
<p>Child data: {{ childRef.someData }}</p>