Best practice passing to child html tag with button click binding angular 2

Question

So i have the following structure, for the example i just simplify it, there is few rules that i cannot change due to the bootstrap template that i'm using. I have a parent component that using a child component and passing method. The method from the parent should return a button html tag with method binding, the problem is that when the parent pass the html tag, the child is not render the binding and nothing works. I have different parents that pass different tags with different binding, each parent know what to bind, this is demonstrate what i need to do :

Parent:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';


  parent_func() {
    return `<button type="button" (click)="onSubmitParent()">Click Me!</button>`
  }
  onSubmitParent() {
    console.log("parent")
  }
}


<child [test]="parent_func()"></child>



import {Component, Input} from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.html',
  styleUrls: ['./child.css']
})
export class ChildComponenet {

  @Input() public test:any;

}

<h1>
  {{test}}
</h1>

Answer 1

You need to create a service that you can use so you can share the functionality and multiple places.

If a function is needed to be used in more than one place that is where it common provider comes in