I'm new to angular and I'm planning on making a dynamic function on my app. I wanted a dynamic function (ex. Parent component is called, the buttonclick function on the child component will do a console.log , while when parent2 component is called, the buttonclick function will do an alert dialog). Is it possible to call a dynamic function with different implementations for each component? How will I do it?

**child.component.ts** 

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

@Component({
  selector: 'app-child',
  template : '<button click()="dynamicFunction()">Click!</button>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  dynamicFunction(){
     //do nothing
  }  

  ngOnInit() {  

  }

}

```

**parent.component.ts** 

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

@Component({
  selector: 'app-parent',
  template : '<app-child></app-child>',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  dynamicFunction(){
      console.log('parent 1 clicked');
  }  

  ngOnInit() {  

  }

}

```

**parent2.component.ts** 

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

@Component({
  selector: 'app-parent2',
  template : '<app-child></app-child>',
  styleUrls: ['./parentTwo.component.css']
})
export class ParentTwoComponent implements OnInit {

  constructor() { }

  dynamicFunction(){
      alert('parent 2 was called');
  }  

  ngOnInit() {  

  }

}

```