Smart.ColorPicker - configuration and usage

Getting Started with Angular ColorPicker Component

Setup Angular Environment

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new Application

ng new smart-angular-colorpicker

Navigate to the created project folder

cd smart-angular-colorpicker

Setup the ColorPicker

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

1. Download and install the package.
   

   npm install smart-webcomponents-angular

2. Adding CSS reference
   
   The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.
   
   

   @import 'smart-webcomponents-angular/source/styles/smart.default.css';

   
   Another way to achieve the same is to edit the angular.json file and in the styles add the style.
   
   

   "styles": [
   		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
   	]

   If you want to use Bootstrap, Fluent or other themes available in the package, you need to add them after 'smart.default.css'.
3. Example with Angular Standalone Components
   
   
   app.component.html
   
   

    <div class="demo-description">
       <h1>smartColorPicker allows picking a color from a drop-down</h1>
   </div>
   <smart-color-picker #colorpicker enable-custom-colors></smart-color-picker>

   
   app.component.ts
   
   

    import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
   import { ColorPickerComponent } from 'smart-webcomponents-angular/colorpicker';
   
   
   import { CommonModule } from '@angular/common';
   import { RouterOutlet } from '@angular/router';
   import { ColorPickerModule } from 'smart-webcomponents-angular/colorpicker';
   
   @Component({
       selector: 'app-root',
   	standalone: true,
   	imports: [CommonModule, ColorPickerModule, RouterOutlet],
       templateUrl: './app.component.html',
   	styleUrls: ['./app.component.css']
   })
   
   export class AppComponent implements AfterViewInit, OnInit {	
   	@ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker!: ColorPickerComponent;
   	
    
   	ngOnInit(): void {
   		// onInit code.
   	}
   
   	ngAfterViewInit(): void {
   		// afterViewInit code.
   		this.init();
       }
   		
   	init(): void {
   		// init code.
   	    
   
   	}	
   }

   
   
4. Example with Angular NGModule
   
   
   app.component.html
   
   

    <div class="demo-description">
       <h1>smartColorPicker allows picking a color from a drop-down</h1>
   </div>
   <smart-color-picker #colorpicker enable-custom-colors></smart-color-picker>

   
   app.component.ts
   
   

    import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
   import { ColorPickerComponent } from 'smart-webcomponents-angular/colorpicker';
   
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
   	styleUrls: ['./app.component.css']
   })
   
   export class AppComponent implements AfterViewInit, OnInit {	
   	@ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker!: ColorPickerComponent;
   	
    
   	ngOnInit(): void {
   		// onInit code.
   	}
   
   	ngAfterViewInit(): void {
   		// afterViewInit code.
   		this.init();
       }
   		
   	init(): void {
   		// init code.
   	    
   
   	}	
   }

   
   app.module.ts
   
   

    import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { ColorPickerModule } from 'smart-webcomponents-angular/colorpicker';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [ AppComponent ],
       imports: [ BrowserModule, ColorPickerModule ],
       bootstrap: [ AppComponent ]
   })
   
   export class AppModule { }

   
   

Running the Angular application

After completing the steps required to render a ColorPicker, run the following command to display the output in your web browser

ng serve

Read more about using Smart UI for Angular: https://www.htmlelements.com/docs/angular-cli/.