Angular – Call Child Component’s Method in Parent Component’s Template
You have ParentComponent and ChildComponent that looks like this.
parent.component.html
parent.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() {
}
}
child.component.html
<p>
This is child
</p>
child.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
constructor() {
}
doSomething() {
console.log('do something');
}
}
When serve, it looks like this:
When user focus on ParentComponent’s input element, you want to call ChildComponent’s doSomething() method.
Simply do this:
- Give app-child selector in parent.component.html a DOM variable name (prefix with # – hashtag), in this case we call it appChild.
- Assign expression value (of the method you want to call) to input element’s focus event.
The result:
