Color Picker App using Angular
Last Updated : 12 Aug, 2024
We will be creating a Color Picker Application using the Angular framework. This app will enable users to select and display colors interactively through a user-friendly interface.
We will use Angular Material for styling and the ngx-color-picker library to provide advanced color selection capabilities. By the end of this article, you'll have a fully functional color picker integrated into an Angular application.
Project Preview
Project PreviewPrerequisites
Steps to Color Picker App using Angular
Step 1: Install Angular CLI
If you haven’t installed Angular CLI yet, install it using the following command
npm install -g @angular/cli
Step 2: Create a New Angular Project
ng new color-picker-app
cd color-picker-app
Step 3: Install Angular Material
Install Angular Material for better UI components:
ng add @angular/material
Step 4: Install Angular Material Color Picker
You can use a third-party Angular color picker library. One popular choice is ngx-color-picker. Install it with:
npm install ngx-color-picker --save
Dependencies
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/cdk": "^16.2.14",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/material": "^16.2.14",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"ngx-color-picker": "^17.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
}Project Structure
Project StructureExample: Create the required files as seen in the folder structure and add the following codes.
HTML <!--app.component.html--> <div class="container"> <mat-card class="color-picker-card"> <mat-card-header> <div class="header-text"> <h1 class="title">GeeksforGeeks</h1> <h3 class="subtitle">Choose a Color</h3> </div> </mat-card-header> <mat-card-content> <div class="color-picker-container"> <input [value]="selectedColor" [(colorPicker)]="selectedColor" (colorPickerChange)="onColorChange($event)" [cpOKButton]="true" [cpOKButtonText]="'Select'" [cpCancelButton]="true" [cpSaveClickOutside]="false" [cpAlphaChannel]="'disabled'" [cpOutputFormat]="'hex'" class="color-picker-input" /> <div class="color-box" [style.background]="selectedColor"></div> </div> </mat-card-content> </mat-card> </div>
/* app.component.css */ .container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f5f5f5; } .color-picker-card { max-width: 300px; width: 100%; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background: #ffffff; text-align: center; display: flex; flex-direction: column; align-items: center; } .title { color: #4caf50; font-size: 1.5rem; margin: 0; } .subtitle { color: #333; font-size: 1.2rem; margin: 10px 0 20px; } .color-picker-container { display: flex; flex-direction: column; align-items: center; } .color-picker-input { margin-bottom: 16px; width: 100%; max-width: 150px; height: 30px; } .color-box { width: 60px; height: 60px; margin: 16px auto; border: 2px solid #ddd; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ColorPickerModule } from 'ngx-color-picker'; import { MatCardModule } from '@angular/material/card'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ColorPickerModule, MatCardModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } // app.component.ts import { Component } from '@angular/core'; import { ColorPickerService } from 'ngx-color-picker'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public title: string = 'color-picker-app'; public selectedColor: string = '#e45a33'; constructor(private cpService: ColorPickerService) { } public onColorChange(color: string): void { this.selectedColor = color; } } // app.component.spec.ts import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [RouterTestingModule], declarations: [AppComponent] })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); }); it(`should have as title 'color-picker-app'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual('color-picker-app'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('.content span')?.textContent). toContain('color-picker-app app is running!'); }); }); Steps to Run the Application
Open the terminal, run this command from your root directory to start the application
ng serve --open
Open your browser and navigate to http://localhost:4200
Output
Color Picker App using Angular Similar Reads
How to Create Todo List in Angular 7 ?
The ToDo app is used to help us to remember some important task. We just add the task and when accomplished, delete them. This to-do list uses various Bootstrap classes that make our web application not only attractive but also responsive. Approach: Create a new angular app using following command:
2 min read
Build a Simple Web App with Express & Angular
Building a simple web app using Express and Angular is a great way to understand the fundamentals of full-stack development. Express, a minimalist web framework for Node.js, handles the backend, while Angular, a powerful front-end framework, provides the structure for the client-side application. In
5 min read
How to build progressive web app(PWA) in Angular 9 ?
In this article, we will develop a PWA (Progressive Web App) using Angular. What is PWA ? Progressive Web Apps (PWAs) are web applications that have been designed so that they are capable, reliable, and installable. PWA are built and enhanced with modern APIs to deliver enhanced capabilities, reliab
7 min read
Routing in Angular 9/10
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties. Approach: Create an Angular app that to be used.Create the navigation links inside
3 min read
How to create a To-Do list using Drag and Drop in Angular 7 ?
We can easily create a To-Do list using Drag-Drop module provided by angular Component Development Kit (CDK). First of all, create an angular component by using the following command- ng g c To-Do Now import CdkDragDrop, moveItemInArray, transferArrayItem from @angular/cdk/drag-drop to our to-Do com
2 min read
How to make a multi-select dropdown using Angular 11/10 ?
In this article, we will learn to build the multiple selection drop-down menu in Angular. To accomplish this task, we require Angular 10 or the Angular 11 version. Sometimes we need to display dynamically fetched multi-selected data in a drop-down menu, for this, we will use the npm @ng-select/ng-se
3 min read
How to set focus on input field automatically on page load in AngularJS ?
We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form. Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator wit
3 min read
How to Scroll to an Element on click in Angular ?
In this article, we will see how to scroll to an element on click in Angular. Here, we will create a component that enables scrolling to specific targets when a button is pressed within the document from one target to another. Steps for Installing & Configuring the Angular ApplicationStep 1: Cre
4 min read
AngularJS $locationProvider
The $locationProvider facilitates the configuration of the application by implementing the deep linking paths that are stored. Here are some of the things that can be made with the $locationProvider service: Set the html5Mode property to true to enable HTML5 mode, which uses the history.pushState AP
4 min read
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read