Question: I am trying to experiment with angular bindings, I am stuck with a weird situation.. I need to bind two properties - here 'code' and 'title' are the binding properties

```
<app-title-component fxFlexFill [title]="code + title"></app-title-component>

```

This works fine!
I get the value of concated code and title value in the screen.

Now I wanted to have a static text between the two bindable properties
Say, I want the result to be 

CodeValue - CodeTitle Value

How to do that? Is there a way to do binding using string interpolation?

Answer: 
here are two ways you can get this required result. Starting with a very simple method mentioned within the comments.

```
<app-title-component fxFlexFill [title]="code + ' - ' + title"></app-title-component>

```

secondly you can use string interpolation looking like so. Be sure to be using back ticks ( ` ) for this interpolation, else it will be ignored.

```
<app-title-component fxFlexFill [title]="result"></app-title-component>

```

within your template 

```
public get result(): string
{
    return `${this.code} - ${this.title}`;  
} 

```

[Here is an article looking at How Angular can deal with string interpolation](https://codecraft.tv/courses/angular/es6-typescript/template-strings/).
You could simply define a getter in your component as follows:

```
class FooComponent {
  title:string;
  code:string;
  get formatedTitle(){return `${this.code} - ${this.title}`;}
}

<app-title-component fxFlexFill [title]="formatedTitle"></app-title-component>

```