0

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>
Kim Kern
  • 54,283
  • 17
  • 197
  • 195
USer22999299
  • 5,284
  • 9
  • 46
  • 78
  • Sounds quite weird. I'd suggest you look for a different strategy than passing buttons around. If you definitely must, then you can create a component that contains the button and add this component dynamically. http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 shows how to dynamically add components. – Günter Zöchbauer Feb 01 '17 at 13:30

1 Answers1

0

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

Judson Terrell
  • 4,204
  • 2
  • 29
  • 45