CODEWITHSUNDEEP
htmlangularinputangular-formsngmodel
Hansana Prabath
Hansana Prabath

Reputation: 151

How to Change the default color of <input type="color">?

I'm using Angular and want to change the default color of an <input type="color"> element. Currently, it shows black (#000) as the default, but I want to set it to a different color. How can I achieve this?

Also, I'm using Angular v18. I've tried setting the value attribute, but it doesn't work.

My code snippet:

<input type="color" name="color" value="#ff0000" ngModel />

Upvotes: 0

Views: 51

Answers (2)

Naren Murali
Naren Murali

Reputation: 57986

You should use either use [value] or [(ngModel)] but not both together, that is causing the bug.

    <input type="color" name="color" [(ngModel)]="model"/>
    <input type="color" name="color" [value]="model"/>

Full Code:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input type="color" name="color" [(ngModel)]="model"/>
    <input type="color" name="color" [value]="model"/>
  `,
})
export class App {
  model = '#ff0000';
}

bootstrapApplication(App);

Stackblitz Demo

Upvotes: 2

Ananthapadmanabhan
Ananthapadmanabhan

Reputation: 26

<input type="color" name="color" [(ngModel)]="selectedColor" value="#ff0000" />

export class AppComponent {
  selectedColor: string = '#ff0000';  // default color red
}

Upvotes: 1

Related Questions