Question: I am trying to create a component in Angular 5 that will house a reusable template for a button. In different parts of my app buttons will call different functions, so I would like to be able to tell the given instance of the button what function to call. I know I could create an HTML tag for a button wherever I need it, but I was hoping I could create a reusable component so I can ensure formatting is consistent throughout the app.

Error

```
 Got interpolation ({{}}) where expression was expected at column 0 in 
        [{{functioncall}}]

```

Component

```
<div id = "button">
  <button type="button" class= "btn" (click) ="{{functioncall}}" >{{label}}</button>
</div>

```

And HTML

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

    @Component({
      selector: 'app-button',
      templateUrl: './button.component.html',
      styleUrls: ['./button.component.css']
    })
    export class ButtonComponent implements OnInit {
      @Input() label:string;
      @Input() functionCall:string;

      constructor() { }

      ngOnInit() {
      }
    }

```

Answer: 
In addition to @miladfm answer, I'd recommend using the `<ng-content></ng-content>` directive here to pass content through instead of pulling in `{{label}}`, assigning the `@Output` decorator to `click` instead of `onClick`, and using the `MouseEvent` type instead of `any`. Using these changes will allow the button component to behave syntactically more like a native button when it's consumed:

**button.component.ts**

```
...
@Output() click = new EventEmitter<MouseEvent>();

onClickButton(event) {
  this.onClick.emit(event);
}
...

```

**button.component.html**

```
<div id = "button">
  <button type="button" class="btn" (click)="onClickbutton($event)">
    <ng-content></ng-content>
  </button>
</div>

```

**parent.component.ts**

```
...
functioncall(e: MouseEvent) {
 // do stuff
}
...

```

**parent.component.html**

```
<app-button  (click)="functioncall($event)">Your Label Here</app-button>

```
> 
> Reusable Component - it's work for me
> 
> 
> 

**I have created button as reusable component**

* **button.component.html**

< button type="button" class= "btn" >{{label}} < / button >
* **button.component.ts**

```
export class ButtonComponent {

      @Input() label: string;

      @Output() onClick = new EventEmitter<any>();

      constructor() {}

      onClickButton(event) {

          this.onClick.emit(event);

      }
 }

```
* **user.component.html**

< app-button (click)="functioncall($event)" [label]="label"> < /app-button >
* **user.component.ts**

label = 'Hello World';