Binding [ngStyle] in Angular4 to ngModel or 2 way binding

Question

I am trying to make one input box and add color to it. Same color should be added to the background of a paragraph. I am trying but getting error. Can someone help out?

home.html

<input type="text" [(ngModel)]="colorName"/>
<p [ngStyle]="{background-color:'colorName'}">This is a paragraph.</p>

home.ts

  colorName: string = 'red';

Note: I want to do this with [ngStyle] and 2-way binding only in Angular4

Answer 1

Just remove quotos from colorName and add quotos in css property like this -

<input type="text" [(ngModel)]="colorName"/>
<p [ngStyle]="{'background-color':colorName}">This is a paragraph.</p>

Working Example

Answer 2

像这样做：

<p [ngStyle]="{'background-color':colorName}">This is a paragraph.</p>

Answer 3

You can add '' in background-color

<input type="text" [(ngModel)]="colorName"/>
<p [ngStyle]="{'background-color':colorName}">This is a paragraph.</p>