Change color text with click on Angular

Question

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:

How is it even compiling if you have (click)="changeColorText(inputColor)" and inputColor is not a string but an HTMLElement? — Balastrong
– Balastrong, Commented May 30, 2020 at 14:49
Hey pc_coder , its not working , Balastrong you say the problem is with #inputColor? — Pluto
– Pluto, Commented May 30, 2020 at 14:52
I added one answer demo for you and explanation answer. You can check it @Pluto — Cagri Tacyildiz
– Cagri Tacyildiz, Commented May 30, 2020 at 15:07

Berk Kurkcuoglu · Accepted Answer · 2020-05-30 14:54:02Z

1

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>

answered May 30, 2020 at 14:54

Berk Kurkcuoglu

1,5231 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Balastrong · Accepted Answer · 2020-05-30 14:52:34Z

0

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;
  }

answered May 30, 2020 at 14:52

Balastrong

4,4602 gold badges14 silver badges32 bronze badges

Collectives™ on Stack Overflow

Change color text with click on Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related