Call function from parent angular

Question

parent.html

<p>parent</p>
<children></children>

parent.ts

sayhello() {
   console.log("hello")
};

children.ts

callHellotoConsole{
   this.sayhello()
}

How can i call sayhello() func from parent component ! I already call like that

  <children [sayhello] = "sayhello()"></children>

children.ts

@Input() sayhello: Function;

Answer 1

I will suggest not trying to invoke the parent method in the child. Consider using an event emitter to communicate to the parent from the child https://angular.io/guide/component-interaction#parent-listens-for-child-event.

Parent Component:

export class ParentComponent implements OnInit {
    .....
    onSayHello() {
        // Execute some code
    }
}

Parent Component Template:

<p>parent</p>
<children (sayHello)="onSayHello()"></children>

Child Component

@Component({
   selector: 'child-component',
   templateUrl: './child-component.component.html',
   styleUrls: ['./child-component.component.scss']
})
export class ChildComponent implements OnInit {
    @Output() sayHello = new EventEmitter();
    .....
    sayHello() {
        this.sayHello.emit(); // you can send any variable to parent
    }
}

When this.sayHello.emit(); is fired, your handler in your parent element (`onSayHello) will be called.

Here is a stackblitz demo

Answer 2

Do not add braces '()' with 'sayHello' while passing it as an input value to the child component.

Try like this:-

Parent.ts

export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  sayHello() {
    console.log('Hello');
  }

}

Parent.html

<app-child [sayHello]="sayHello"></app-child>

Child.ts

export class ChildComponent implements OnInit {

  constructor() { }

  @Input()
  sayHello: Function;

  ngOnInit() {
  }

  callHello() {
    this.sayHello();
  }

}

Answer 3

Try like this:

parent.ts

@ViewChild('childRef') child: ChildComponent;


child.sayhello()

.html

<children #childRef></children>