Skip to content

Commit 57a792d

Browse files
erikyoerikyo
authored
Merge pull request #16 from wp-blocks/examples
angular example
2 parents 44d2b2c + ec63c21 commit 57a792d

14 files changed

Lines changed: 13978 additions & 0 deletions

‎examples/angular/README.md‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
# Angular Color to Name Converter Example
2+
3+
This example demonstrates how to integrate the **color-2-name** library with an Angular application to convert hex color codes to their closest color names.
4+
5+
## Features
6+
7+
- Convert hex colors (like `#F00`, `#00F`) to their closest color names
8+
- Interactive color input with real-time conversion
9+
- Pre-defined color buttons for quick testing
10+
- Beautiful, responsive UI with modern design
11+
- Error handling for invalid color formats
12+
13+
## Live Demo
14+
15+
The app converts:
16+
- `#F00` → `red`
17+
- `#00F` → `blue`
18+
- And any other valid hex color to its closest color name
19+
20+
## Setup Instructions
21+
22+
### Prerequisites
23+
24+
- Node.js (v14 or higher)
25+
- npm or yarn
26+
27+
### Installation
28+
29+
1. Navigate to the Angular example directory:
30+
```bash
31+
cd examples/angular
32+
```
33+
34+
2. Install dependencies:
35+
```bash
36+
npm install
37+
```
38+
39+
### Running the Application
40+
41+
1. Start the development server:
42+
```bash
43+
npm start
44+
```
45+
46+
2. Open your browser and navigate to:
47+
```
48+
http://localhost:4200
49+
```
50+
51+
### Building for Production
52+
53+
1. Build the application:
54+
```bash
55+
npm run build
56+
```
57+
58+
2. The built files will be in the `dist/` directory.
59+
60+
## Project Structure
61+
62+
```
63+
src/
64+
├── app/
65+
│ ├── app.component.ts # Main app component
66+
│ ├── app.component.html # App template
67+
│ ├── app.component.css # App styles
68+
│ ├── color-converter.component.ts # Color converter logic
69+
│ ├── color-converter.component.html # Converter UI
70+
│ └── color-converter.component.css # Converter styles
71+
├── index.html # Main HTML file
72+
├── main.ts # Angular bootstrap
73+
└── styles.css # Global styles
74+
```
75+
76+
## Key Implementation Details
77+
78+
### Color Conversion Logic
79+
80+
The color conversion is handled by the `ColorConverterComponent`:
81+
82+
```typescript
83+
import { closest } from 'color-2-name';
84+
85+
convertColor() {
86+
try {
87+
const result = closest(this.colorInput);
88+
this.colorResult = {
89+
hex: this.colorInput,
90+
name: result.name,
91+
rgb: result.color
92+
};
93+
} catch (err) {
94+
this.error = `Invalid color format: ${this.colorInput}`;
95+
}
96+
}
97+
```
98+
99+
### Angular Integration
100+
101+
- Uses **Standalone Components** (Angular 17+)
102+
- Implements **Two-Way Data Binding** with `[(ngModel)]`
103+
- Includes **Form Handling** with `FormsModule`
104+
- Features **Responsive Design** with CSS Grid and Flexbox
105+
106+
### Dependencies
107+
108+
The key dependency is the `color-2-name` library:
109+
110+
```json
111+
{
112+
"dependencies": {
113+
"color-2-name": "^1.5.0",
114+
"@angular/core": "^17.0.0",
115+
// ... other Angular dependencies
116+
}
117+
}
118+
```
119+
120+
## Usage Examples
121+
122+
### Basic Usage
123+
124+
1. Enter a hex color in the input field (e.g., `#F00`, `#FF0000`)
125+
2. Press Enter or click "Convert"
126+
3. View the result showing the color name and RGB values
127+
128+
### Quick Testing
129+
130+
Click the pre-defined color buttons:
131+
- **Red** (`#F00`) → Converts to "red"
132+
- **Blue** (`#00F`) → Converts to "blue"
133+
- **Green** (`#0F0`) → Converts to "green"
134+
- And more...
135+
136+
## Customization
137+
138+
### Adding New Colors
139+
140+
To add more pre-defined colors, update the `predefinedColors` array in `color-converter.component.ts`:
141+
142+
```typescript
143+
predefinedColors = [
144+
{ hex: '#F00', name: 'Red' },
145+
{ hex: '#00F', name: 'Blue' },
146+
// Add new colors here
147+
{ hex: '#800080', name: 'Purple' },
148+
];
149+
```
150+
151+
### Styling
152+
153+
Modify the CSS files to customize the appearance:
154+
- `color-converter.component.css` - Component-specific styles
155+
- `app.component.css` - Layout and container styles
156+
- `styles.css` - Global styles
157+
158+
## Troubleshooting
159+
160+
### Common Issues
161+
162+
1. **Build Errors**: Ensure all dependencies are installed with `npm install`
163+
2. **Port Already in Use**: The app uses port 4200 by default. Kill existing processes or use a different port
164+
3. **Color Conversion Errors**: Make sure to enter valid hex color formats (#RGB, #RRGGBB)
165+
166+
### Getting Help
167+
168+
- Check the [color-2-name documentation](https://github.com/wp-blocks/color-2-name)
169+
- Review Angular's [official documentation](https://angular.io/docs)
170+
171+
## License
172+
173+
This example follows the same license as the color-2-name library (ISC).

‎examples/angular/angular.json‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-color-2-name-example": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/angular-color-2-name-example",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.json",
23+
"inlineStyleLanguage": "css",
24+
"assets": [
25+
"src/favicon.ico",
26+
"src/assets"
27+
],
28+
"styles": [
29+
"src/styles.css"
30+
],
31+
"scripts": []
32+
},
33+
"configurations": {
34+
"production": {
35+
"budgets": [
36+
{
37+
"type": "initial",
38+
"maximumWarning": "500kb",
39+
"maximumError": "1mb"
40+
},
41+
{
42+
"type": "anyComponentStyle",
43+
"maximumWarning": "2kb",
44+
"maximumError": "4kb"
45+
}
46+
],
47+
"outputHashing": "all"
48+
},
49+
"development": {
50+
"buildOptimizer": false,
51+
"optimization": false,
52+
"vendorChunk": true,
53+
"extractLicenses": false,
54+
"sourceMap": true,
55+
"namedChunks": true
56+
}
57+
},
58+
"defaultConfiguration": "production"
59+
},
60+
"serve": {
61+
"builder": "@angular-devkit/build-angular:dev-server",
62+
"configurations": {
63+
"production": {
64+
"buildTarget": "angular-color-2-name-example:build:production"
65+
},
66+
"development": {
67+
"buildTarget": "angular-color-2-name-example:build:development"
68+
}
69+
},
70+
"defaultConfiguration": "development"
71+
},
72+
"extract-i18n": {
73+
"builder": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"buildTarget": "angular-color-2-name-example:build"
76+
}
77+
},
78+
"test": {
79+
"builder": "@angular-devkit/build-angular:karma",
80+
"options": {
81+
"main": "src/test.ts",
82+
"polyfills": [
83+
"zone.js",
84+
"zone.js/testing"
85+
],
86+
"tsConfig": "tsconfig.spec.json",
87+
"karmaConfig": "karma.conf.js",
88+
"inlineStyleLanguage": "css",
89+
"assets": [
90+
"src/favicon.ico",
91+
"src/assets"
92+
],
93+
"styles": [
94+
"src/styles.css"
95+
],
96+
"scripts": []
97+
}
98+
}
99+
}
100+
}
101+
},
102+
"defaultProject": "angular-color-2-name-example",
103+
"cli": {
104+
"analytics": false
105+
}
106+
}

0 commit comments

Comments
 (0)