CODEWITHSUNDEEP
htmlcsstypescript
Pluto
Pluto

Reputation: 859

Change color text with click on Angular

I want to make a simple thing that the user input a color that he choose and make the color begin on some paragraph .

The input and the click button that the user send the inputColor to the typescript :

<form>
    <input #inputColor  type="text"/>
    <button type="button" (click)="changeColorText(inputColor)"></button>
    </form>

The function changeColorText() on the typescript :

export class HelloWorld implements OnInit {
public inputColor:string;


  constructor() { }

  ngOnInit(): void {
  }

  public changeColorText(str:string) :void {
    this.inputColor = str;
  }

}

The problem :

The paragraph change the color if i choose one (Witout input from the user) :

<p style="color:blue">Hello World !</p>

But I want what the user put in the box to make the paragraph like the color that sent, I couldn't find the correct syntax here:

<p style="color:{{inputColor}}">Hello World !</p> // ERROR !!!!

<p style=`color:{{inputColor}}`>Hello World !</p> // No compilation error .. but not working:

Upvotes: 2

Views: 4014

Answers (2)

Berk Kurkcuoglu
Berk Kurkcuoglu

Reputation: 1523

You should use a style binding as following, details can be found at https://angular.io/guide/template-syntax:

<p [style.color]="inputColor" >Hello World !</p>

Upvotes: 1

Balastrong
Balastrong

Reputation: 4474

Have you tried with:

<form>
    <input #inputColor  type="text"/>
    <button type="button" (click)="changeColorText(inputColor.value)">ClickMe</button>
</form>

<p style="color: {{inputColor.value}}">Hello World !</p>

You have to take the value from inputColor as it's an HTMLElement on this side.

Another option, is to have different names from the element and your string, for example:

<form>
    <input #inputColor  type="text"/>
    <button type="button" (click)="changeColorText(inputColor.value)">ClickMe</button>
</form>

<p style="color: {{inputColorStr}}">Hello World !</p>

With

  public inputColorStr: string;

  public changeColorText(str: string): void {
    this.inputColorStr = str;
  }

Upvotes: 0

Related Questions