Angular NPM packages

Smart UI for Angular - Individual Component NPM packages

To install all components with NPM, please refer to Angular CLI help topic. In this help topic, we will show you how to install and use a specific component with Angular. Each component has NPM package which includes the required resources only for that component. We advice you to use the individual component NPM packages, when you plan to use only several of our components, because of the smaller overall bundle size.

Getting Started with Smart.Accordion for Angular

NPM package: @smart-webcomponents-angular/accordion

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-accordion

Navigate to the created project folder 

cd smart-angular-accordion

Setup the Accordion

  1. Download and install the package.
    npm install @smart-webcomponents-angular/accordion
  2. Once installed, import the AccordionModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AccordionModule } from '@smart-webcomponents-angular/accordion';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, AccordionModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.accordion.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/accordion/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/accordion/styles/smart.accordion.css",
				"./node_modules/@smart-webcomponents-angular/accordion/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-accordion>
    <smart-accordion-item label="First Item">First Item Content.</smart-accordion-item>
    <smart-accordion-item label="Second Item">Second Item Content.</smart-accordion-item>
    <smart-accordion-item label="Third Item">Third Item Content.</smart-accordion-item>
    <smart-accordion-item label="Fourth Item">Fourth Item Content.</smart-accordion-item>
</smart-accordion>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	
 
	ngAfterViewInit(): void {
		// afterViewInit code.
    }
	
	ngOnInit(): void {
		// onInit code.
		this.init();
	}
	
	init(): void {
		// init code.
	    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AccordionModule } from '@smart-webcomponents-angular/accordion';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, AccordionModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Breadcrumb for Angular

NPM package: @smart-webcomponents-angular/breadcrumb

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-breadcrumb

Navigate to the created project folder 

cd smart-angular-breadcrumb

Setup the Breadcrumb

  1. Download and install the package.
    npm install @smart-webcomponents-angular/breadcrumb
  2. Once installed, import the BreadcrumbModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { BreadcrumbModule } from '@smart-webcomponents-angular/breadcrumb';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, BreadcrumbModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.breadcrumb.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/breadcrumb/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/breadcrumb/styles/smart.breadcrumb.css",
				"./node_modules/@smart-webcomponents-angular/breadcrumb/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-breadcrumb #breadcrumb id="breadcrumb1" add-new-item allow-drag
allow-drop close-buttons data-source='[{ "label": "Planets", "value": "A" }, { "label": "Continents", "value": "B" }, { "label": "Countries", "value": "C" }, { "label": "States", "value": "D" }, { "label": "Cities", "value": "E" }]'></smart-breadcrumb>
<br />
<smart-breadcrumb #breadcrumb2 id="breadcrumb2" allow-drag allow-drop
close-buttons data-source='[{ "label": "Email", "value": "alternate_email" }, { "label": "Phone", "value": "phone" }, { "label": "TV", "value": "tv" }, { "label": "Video game", "value": "videogame_asset" }, { "label": "Laptop", "value": "laptop" }]'
item-template="breadcrumb2Template"></smart-breadcrumb>
<br />
<smart-breadcrumb #breadcrumb3 id="breadcrumb3" minimize-width="150" allow-drag
allow-drop close-buttons data-source='[{ "label": "Planets", "value": "A" }, { "label": "Continents", "value": "B" }, { "label": "Countries", "value": "C" }, { "label": "States", "value": "D" }, { "label": "Cities", "value": "E" }]'></smart-breadcrumb>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { BreadcrumbComponent } from '@smart-webcomponents-angular/breadcrumb';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('breadcrumb', { read: BreadcrumbComponent, static: false }) breadcrumb!: BreadcrumbComponent;
	@ViewChild('breadcrumb2', { read: BreadcrumbComponent, static: false }) breadcrumb2!: BreadcrumbComponent;
	@ViewChild('breadcrumb3', { read: BreadcrumbComponent, static: false }) breadcrumb3!: BreadcrumbComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { BreadcrumbModule } from '@smart-webcomponents-angular/breadcrumb';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, BreadcrumbModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Button for Angular

NPM package: @smart-webcomponents-angular/button

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-button

Navigate to the created project folder 

cd smart-angular-button

Setup the Button

  1. Download and install the package.
    npm install @smart-webcomponents-angular/button
  2. Once installed, import the ButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.button.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-horizontal-layout">
    <div>
        <label>Default Buttons</label>
        <div class="demo-buttons-group">
            <smart-button>Normal</smart-button>
            <smart-button #button class="raised">Raised</smart-button>
            <smart-button #button2 class="outlined">Outlined</smart-button>
            <smart-button #button3 class="flat">Flat</smart-button>
            <smart-button #button4 class="floating"><span class="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon"><i class="material-icons">&#xE53F;</i></span>
            </smart-button>
        </div>
    </div>
    <div>
        <label>Primary Buttons</label>
        <div class="demo-buttons-group">
            <smart-button #button5 class="primary">Normal</smart-button>
            <smart-button #button6 class="raised primary">Raised</smart-button>
            <smart-button #button7 class="outlined primary">Outlined</smart-button>
            <smart-button #button8 class="flat primary">Flat</smart-button>
            <smart-button #button9 class="floating primary"><span class="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon"><i class="material-icons">&#xE53F;</i></span>
            </smart-button>
        </div>
    </div>
    <div>
        <label>Secondary Buttons</label>
        <div class="demo-buttons-group">
            <smart-button #button10 class="secondary">Normal</smart-button>
            <smart-button #button11 class="raised secondary">Raised</smart-button>
            <smart-button #button12 class="outlined secondary">Outlined</smart-button>
            <smart-button #button13 class="flat secondary">Flat</smart-button>
            <smart-button #button14 class="floating secondary"><span class="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon"><i class="material-icons">&#xE53F;</i></span>
            </smart-button>
        </div>
    </div>
    <div>
        <label>Success Buttons</label>
        <div class="demo-buttons-group">
            <smart-button #button15 class="success">Normal</smart-button>
            <smart-button #button16 class="raised success">Raised</smart-button>
            <smart-button #button17 class="outlined success">Outlined</smart-button>
            <smart-button #button18 class="flat success">Flat</smart-button>
            <smart-button #button19 class="floating success"><span class="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon"><i class="material-icons">&#xE53F;</i></span>
            </smart-button>
        </div>
    </div>
    <div>
        <label>Error Buttons</label>
        <div class="demo-buttons-group">
            <smart-button #button20 class="error">Normal</smart-button>
            <smart-button #button21 class="raised error">Raised</smart-button>
            <smart-button #button22 class="outlined error">Outlined</smart-button>
            <smart-button #button23 class="flat error">Flat</smart-button>
            <smart-button #button24 class="floating error"><span class="button-demo-icon demo-icon demo-device-icon-phone-portrait demo-button-demo-icon"><i class="material-icons">&#xE53F;</i></span>
            </smart-button>
        </div>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ButtonComponent } from '@smart-webcomponents-angular/button';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	 
	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 { ButtonModule } from '@smart-webcomponents-angular/button';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ButtonGroup for Angular

NPM package: @smart-webcomponents-angular/buttongroup

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-buttongroup

Navigate to the created project folder 

cd smart-angular-buttongroup

Setup the ButtonGroup

  1. Download and install the package.
    npm install @smart-webcomponents-angular/buttongroup
  2. Once installed, import the ButtonGroupModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonGroupModule } from '@smart-webcomponents-angular/buttongroup';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonGroupModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.buttongroup.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/buttongroup/styles/smart.buttongroup.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-button-group #buttongroup [dataSource]="dataSource"></smart-button-group>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ButtonGroupComponent } from '@smart-webcomponents-angular/buttongroup';


@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
	@ViewChild('buttongroup', { read: ButtonGroupComponent, static: false }) buttongroup: ButtonGroupComponent;

	dataSource: Array = ["a", "b", "c"];

	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
	}

	init(): void {
		// init code.
		"use strict";

	}
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonGroupModule } from '@smart-webcomponents-angular/buttongroup';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonGroupModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Calendar for Angular

NPM package: @smart-webcomponents-angular/calendar

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-calendar

Navigate to the created project folder 

cd smart-angular-calendar

Setup the Calendar

  1. Download and install the package.
    npm install @smart-webcomponents-angular/calendar
  2. Once installed, import the CalendarModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';import { CalendarModule } from '@smart-webcomponents-angular/calendar';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, CalendarModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.calendar.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/calendar/styles/smart.calendar.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="smart-demo-container">
    <template id="templateWithButtons">
        <smart-button #button class="material flat">CANCEL</smart-button>
        <smart-button #button2 class="material flat">OK</smart-button>
    </template>
    <div id="materialPicker">
        <section>
             <h2>smartCalendar</h2>
            <div>
                 <h2>Allow users to enter dates easily and visually. You can customize date formats, language, layout, animations, selection modes and much more with the smartCalendar.</h2>
                <div class="module"></div>
            </div>
        </section>
        <section id="datePickers">
             <h2>Date pickers</h2>
            <div class="module">
                <p>The selected day is indicated by a filled circle. The current day is indicated
                    by a different color and type weight.</p>
                <p>Swipe left to right to navigate through the months. Touch the year in
                    the title bar to transition to the year view.</p>
            </div>
            <div class="module">
                <div>
                    <smart-calendar #calendar selection-mode="one" view="portrait" hide-other-month-days
                    view-sections='["title", "header", "footer"]' display-mode-view="list"
                    footer-template="templateWithButtons"></smart-calendar>
                </div>
                <br/>
                <p>Date and year picker: portrait, month display mode</p>
            </div>
            <div class="module">
                <div>
                    <smart-calendar #calendar2 selection-mode="one" view="portrait" hide-other-month-days
                    view-sections='["title", "header", "footer"]' display-mode-view="list"
                    display-mode="decade" footer-template="templateWithButtons"></smart-calendar>
                </div>
                <br/>
                <p>Date and year picker:portrait, decade display mode.</p>
            </div>
            <div class="module">
                <p>The picker has a landscape view as well to suite the different screen
                    orientations.</p>
            </div>
            <div class="module">
                <smart-calendar #calendar3 selection-mode="one" view="landscape" hide-other-month-days
                view-sections='["title", "header", "footer"]' display-mode-view="list"
                footer-template="templateWithButtons"></smart-calendar>
                <br/>
                <p>Date picker: landscape, month display mode</p>
            </div>
            <div class="module">
                <smart-calendar #calendar4 selection-mode="one" view="landscape" hide-other-month-days
                view-sections='["title", "header", "footer"]' display-mode-view="list"
                display-mode="decade" footer-template="templateWithButtons"></smart-calendar>
                <br/>
                <p>Date picker: landscape, decade display mode.</p>
            </div>
        </section>
    </div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ButtonComponent } from '@smart-webcomponents-angular/button';
import { CalendarComponent } from '@smart-webcomponents-angular/calendar';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('button', { read: ButtonComponent, static: false }) button!: ButtonComponent;
	@ViewChild('button2', { read: ButtonComponent, static: false }) button2!: ButtonComponent;
	@ViewChild('calendar', { read: CalendarComponent, static: false }) calendar!: CalendarComponent;
	@ViewChild('calendar2', { read: CalendarComponent, static: false }) calendar2!: CalendarComponent;
	@ViewChild('calendar3', { read: CalendarComponent, static: false }) calendar3!: CalendarComponent;
	@ViewChild('calendar4', { read: CalendarComponent, static: false }) calendar4!: CalendarComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    // Your code here.

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';import { CalendarModule } from '@smart-webcomponents-angular/calendar';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, CalendarModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Card for Angular

NPM package: @smart-webcomponents-angular/card

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-card

Navigate to the created project folder 

cd smart-angular-card

Setup the Card

  1. Download and install the package.
    npm install @smart-webcomponents-angular/card
  2. Once installed, import the CardModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CardModule } from '@smart-webcomponents-angular/card';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CardModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.card.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/card/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/card/styles/smart.card.css",
				"./node_modules/@smart-webcomponents-angular/card/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-card #card class="basic-card">
    <div class="card-content"> <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-action"> <a href="#">This is a link</a>
 <a href="#">This is a link</a>
    </div>
</smart-card>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { CardComponent } from '@smart-webcomponents-angular/card';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('card', { read: CardComponent, static: false }) card!: CardComponent;
	
 
	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 { CardModule } from '@smart-webcomponents-angular/card';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CardModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.CardView for Angular

NPM package: @smart-webcomponents-angular/cardview

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-cardview

Navigate to the created project folder 

cd smart-angular-cardview

Setup the CardView

  1. Download and install the package.
    npm install @smart-webcomponents-angular/cardview
  2. Once installed, import the CardViewModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CardViewModule } from '@smart-webcomponents-angular/cardview';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CardViewModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.cardview.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/card/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/card/styles/smart.card.css",
				"./node_modules/@smart-webcomponents-angular/cardview/styles/smart.cardview.css",
				"./node_modules/@smart-webcomponents-angular/card/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">In Card View, data source records are represented as cards. Each Card
    contain content and actions about a single subject. smartCardView supports
    data sort, data filtering, data editing, data grouping and data searching.</div>
    <smart-card-view [columns]="columns" [titleField]="titleField" [dataSource]="dataSource"[coverField]="coverField" #cardview id="cardView"></smart-card-view>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { CardViewComponent, Smart } from '@smart-webcomponents-angular/cardview';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('cardview', { read: CardViewComponent, static: false }) cardview!: CardViewComponent;
    
    generateData(length: number): any[] {
        const sampleData = [], firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'], lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'], petNames = ['Sam', 'Bob', 'Lucky', 'Tommy', 'Charlie', 'Olliver', 'Mixie', 'Fluffy', 'Acorn', 'Beak'], countries = ['Bulgaria', 'USA', 'UK', 'Singapore', 'Thailand', 'Russia', 'China', 'Belize'], productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'];
        for (let i = 0; i < length; i++) {
            const row: any = {};
       
            row.firstName = (i + 1) + '. ' + firstNames[Math.floor(Math.random() * firstNames.length)];
            row.lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
            row.birthday = new Date(Math.round(Math.random() * (2018 - 1918) + 1918), Math.round(Math.random() * 11), Math.round(Math.random() * (31 - 1) + 1));
            row.petName = petNames[Math.floor(Math.random() * petNames.length)];
            row.country = countries[Math.floor(Math.random() * countries.length)];
            row.productName = productNames[Math.floor(Math.random() * productNames.length)];
            row.price = parseFloat((Math.random() * (100 - 0.5) + 0.5).toFixed(2));
            row.quantity = Math.round(Math.random() * (50 - 1) + 1);
            row.timeOfPurchase = new Date(2019, 0, 1, Math.round(Math.random() * 23), Math.round(Math.random() * (31 - 1) + 1));
            row.expired = Math.random() >= 0.5;
            row.attachments = [];
            const maxAttachments = Math.floor(Math.random() * Math.floor(3)) + 1;
            for (let i = 0; i < maxAttachments; i++) {
                row.attachments.push(`https://htmlelements.com/demos/images/travel/${Math.floor(Math.random() * 36) + 1}.jpg`);
            }
            row.attachments = row.attachments.join(',');
            sampleData[i] = row;
        }
        
        return sampleData;
    }


    dataSource = new Smart.DataAdapter({
        dataSource: this.generateData(50),
        dataFields: [
            'firstName: string',
            'lastName: string',
            'birthday: date',
            'petName: string',
            'country: string',
            'productName: string',
            'price: number',
            'quantity: number',
            'timeOfPurchase: date',
            'expired: boolean',
            'attachments: string'
        ]
    });

    columns = [
        { label: 'First Name', dataField: 'firstName', icon: 'firstName' },
        { label: 'Last Name', dataField: 'lastName', icon: 'lastName' },
        { label: 'Birthday', dataField: 'birthday', icon: 'birthday', formatSettings: { formatString: 'd' } },
        { label: 'Pet Name', dataField: 'petName', icon: 'petName' },
        { label: 'Country', dataField: 'country', icon: 'country' },
        { label: 'Product Name', dataField: 'productName', icon: 'productName' },
        { label: 'Price', dataField: 'price', icon: 'price', formatSettings: { formatString: 'c2' } },
        {
            label: 'Quantity', dataField: 'quantity', icon: 'quantity', formatFunction: function (settings) {
                const value = settings.value;
                let className;
                if (value < 20) {
                    className = 'red';
                }
                else if (value < 35) {
                    className = 'yellow';
                }
                else {
                    className = 'green';
                }
                settings.template = `
    ${value}
    `;
            }
        },
        { label: 'Time of Purchase', dataField: 'timeOfPurchase', icon: 'timeOfPurchase', formatSettings: { formatString: 'hh:mm tt' } },
        {
            label: 'Expired', dataField: 'expired', icon: 'expired', formatFunction: function (settings) {
                settings.template = settings.value ? '☑' : '☐';
            }
        },
        { label: 'Attachments', dataField: 'attachments', image: true }
    ];

    coverField: string = 'attachments';
    titleField: string = 'firstName'
 
	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 { CardViewModule } from '@smart-webcomponents-angular/cardview';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CardViewModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


NPM package: @smart-webcomponents-angular/carousel

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
ng new smart-angular-carousel

Navigate to the created project folder 

cd smart-angular-carousel
  1. Download and install the package.
    npm install @smart-webcomponents-angular/carousel
  2. Once installed, import the CarouselModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CarouselModule } from '@smart-webcomponents-angular/carousel';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CarouselModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.carousel.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/carousel/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/carousel/styles/smart.carousel.css",
				"./node_modules/@smart-webcomponents-angular/carousel/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-carousel></smart-carousel>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        const basePath = 'https://htmlelements.com/demos/images/', carousel = document.querySelector('smart-carousel');
        carousel.dataSource = generateDataSource(6);
        function generateDataSource(items) {
            const dataSource = Array(items).fill({});
            dataSource.forEach((element, index) => dataSource[index] = {
                image: `${basePath}carousel-medium-${index + 1}.jpg`,
                label: 'Slide ' + index,
                content: 'Content ' + index
            });
            return dataSource;
        }
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CarouselModule } from '@smart-webcomponents-angular/carousel';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CarouselModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Chart for Angular

NPM package: @smart-webcomponents-angular/chart

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-chart

Navigate to the created project folder 

cd smart-angular-chart

Setup the Chart

  1. Download and install the package.
    npm install @smart-webcomponents-angular/chart
  2. Once installed, import the ChartModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ChartModule } from '@smart-webcomponents-angular/chart';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ChartModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.chart.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/chart/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/chart/styles/smart.chart.css",
				"./node_modules/@smart-webcomponents-angular/chart/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-chart #chart id="chart" [caption]="caption" [description]="description" [showLegend]="showLegend"
    [padding]="padding" [titlePadding]="titlePadding" [dataSource]="dataSource" [colorScheme]="colorScheme"
    [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups"></smart-chart>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ChartComponent } from '@smart-webcomponents-angular/chart';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('chart', { read: ChartComponent, static: false }) chart!: ChartComponent;
	
	 caption = "Fitness & exercise weekly scorecard";
	 description = "Time spent in vigorous exercise by activity";
	 showLegend = true;
	 padding = { left: 10, top: 10, right: 15, bottom: 10 };
	 titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };
	 dataSource = [
		{ Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
		{ Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
		{ Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
		{ Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
		{ Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
		{ Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
		{ Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
	];
	 colorScheme = 'scheme13';
	 xAxis = {
		dataField: 'Day',
		unitInterval: 2,
		tickMarks: { visible: true, unitInterval: 1 },
		gridLines: { visible: true, unitInterval: 1 },
		valuesOnTicks: false,
		padding: { bottom: 10 }
	};
	 valueAxis = {
		unitInterval: 10,
		minValue: 0,
		maxValue: 50,
		title: { text: 'Time in minutes

    ' },
		labels: { horizontalAlignment: 'right' }
	};
	 seriesGroups = [
		{
			type: 'spline',
			series: [
				{
					dataField: 'Swimming',
					symbolType: 'square',
					labels: {
						visible: true,
						backgroundColor: '#FEFEFE',
						backgroundOpacity: 0.2,
						borderColor: '#7FC4EF',
						borderOpacity: 0.7,
						padding: { left: 5, right: 5, top: 0, bottom: 0 }
					}
				},
				{
					dataField: 'Running',
					symbolType: 'square',
					labels: {
						visible: true,
						backgroundColor: '#FEFEFE',
						backgroundOpacity: 0.2,
						borderColor: '#7FC4EF',
						borderOpacity: 0.7,
						padding: { left: 5, right: 5, top: 0, bottom: 0 }
					}
				}
			]
		}
	] 
	
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
	 }		
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ChartModule } from '@smart-webcomponents-angular/chart';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ChartModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.CheckBox for Angular

NPM package: @smart-webcomponents-angular/checkbox

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-checkbox

Navigate to the created project folder 

cd smart-angular-checkbox

Setup the CheckBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/checkbox
  2. Once installed, import the CheckBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.checkbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-check-box #checkbox id="checkBox">Check Box</smart-check-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { CheckBoxComponent } from '@smart-webcomponents-angular/checkbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox!: CheckBoxComponent;
	
 
	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 { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.CheckInput for Angular

NPM package: @smart-webcomponents-angular/checkinput

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-checkinput

Navigate to the created project folder 

cd smart-angular-checkinput

Setup the CheckInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/checkinput
  2. Once installed, import the CheckInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { CheckInputModule } from '@smart-webcomponents-angular/checkinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, CheckInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.checkinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/checkinput/styles/smart.checkinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.CheckInput</b> is an input that allows select from a predefined
        checkbox style options drop down list.</p>
    <p><b>Readonly</b> will turn the input in to a drop down list.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-check-input #checkinput [dataSource]="dataSource" [placeholder]='"Please Select"' [dropDownButtonPosition]='"right"'></smart-check-input>
<div class="options">
    <div class="description">Readonly MultiInput acts as a simple DropDownList.</div>
    <div class="option">
        <smart-check-box #checkbox class="readonly">Read only</smart-check-box>
    </div>
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CheckBoxComponent } from '@smart-webcomponents-angular/checkbox';
import { CheckInputComponent } from '@smart-webcomponents-angular/checkinput';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox!: CheckBoxComponent;
	@ViewChild('checkinput', { read: CheckInputComponent, static: false }) checkinput!: CheckInputComponent;
	@ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton!: RadioButtonComponent;
	@ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2!: RadioButtonComponent;
	@ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3!: RadioButtonComponent;
	
    dataSource = [
        { value: "Austria", label: "Austria" },
        { value: "Belarus", label: "Belarus" },
        { value: "Belgium", label: "Belgium" },
        { value: "Bosnia and Herzegovina", label: "Bosnia and Herzegovina" },
        { value: "Bulgaria", label: "Bulgaria" },
        { value: "Croatia", label: "Croatia" },
        { value: "Cyprus", label: "Cyprus" },
        { value: "Czech Republic", label: "Czech Republic" },
        { value: "Denmark", label: "Denmark" },
        { value: "Estonia", label: "Estonia" },
        { value: "Finland", label: "Finland" },
        { value: "France", label: "France" },
        { value: "Georgia", label: "Georgia" },
        { value: "Germany", label: "Germany" },
        { value: "Greece", label: "Greece" },
        { value: "Hungary", label: "Hungary" },
        { value: "Iceland", label: "Iceland" },
        { value: "Ireland", label: "Ireland" },
        { value: "Italy", label: "Italy" },
        { value: "Latvia", label: "Latvia" },
        { value: "Liechtenstein", label: "Liechtenstein" },
        { value: "Lithuania", label: "Lithuania" },
        { value: "Luxembourg", label: "Luxembourg" },
        { value: "Macedonia, The Former Yugoslav Republic of", label: "Macedonia" },
        { value: "Malta", label: "Malta" },
        { value: "Moldova, Republic of", label: "Moldova, Republic of" },
        { value: "Netherlands", label: "Netherlands" },
        { value: "Norway", label: "Norway" },
        { value: "Poland", label: "Poland" },
        { value: "Portugal", label: "Portugal" },
        { value: "Romania", label: "Romania" },
        { value: "Russian Federation", label: "Russian Federation" },
        { value: "Serbia", label: "Serbia" },
        { value: "Montenegro", label: "Montenegro" },
        { value: "Slovakia", label: "Slovakia" },
        { value: "Slovenia", label: "Slovenia" },
        { value: "Spain", label: "Spain" },
        { value: "Sweden", label: "Sweden" },
        { value: "Switzerland", label: "Switzerland" },
        { value: "Turkey", label: "Turkey" },
        { value: "Ukraine", label: "Ukraine" },
        { value: "United Kingdom", label: "United Kingdom" }
    ];

	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
        let input = this.checkinput;

        document.querySelector('.options').addEventListener('change', function (event: CustomEvent): void {
            const target = event.target as HTMLElement;
            const targetClassList = target.classList;

            if (targetClassList.contains('readonly')) {
                input.readonly = event.detail.value;
                return;
            }

            const inputClassList = input.nativeElement.classList;

            if (targetClassList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { CheckInputModule } from '@smart-webcomponents-angular/checkinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, CheckInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Chip for Angular

NPM package: @smart-webcomponents-angular/chip

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-chip

Navigate to the created project folder 

cd smart-angular-chip

Setup the Chip

  1. Download and install the package.
    npm install @smart-webcomponents-angular/chip
  2. Once installed, import the ChipModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ChipModule } from '@smart-webcomponents-angular/chip';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ChipModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.chip.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/chip/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/chip/styles/smart.chip.css",
				"./node_modules/@smart-webcomponents-angular/chip/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-chip #chip avatar="https://htmlelements.com/demos/images/phonebook/mark.jpeg" value="Steven Buchanan"
close-button></smart-chip>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ChipComponent } from '@smart-webcomponents-angular/chip';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('chip', { read: ChipComponent, static: false }) chip: ChipComponent;
	
 
	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 { ChipModule } from '@smart-webcomponents-angular/chip';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ChipModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.CircularProgressBar for Angular

NPM package: @smart-webcomponents-angular/circularprogressbar

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-circularprogressbar

Navigate to the created project folder 

cd smart-angular-circularprogressbar

Setup the CircularProgressBar

  1. Download and install the package.
    npm install @smart-webcomponents-angular/circularprogressbar
  2. Once installed, import the CircularProgressBarModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar';
import { ButtonModule } from '@smart-webcomponents-angular/button';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ProgressBarModule, ButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.progressbar.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.progressbar.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="smart-demo-container">
    <section>
        <div>
             <h2>Progress and activity indicators are visual indications of an app loading content.</h2>
            <div class="module">
                <p>A single visual indicator should be used to represent each type of operation.
                    For example, a refresh operation should display either a refresh bar or
                    an activity circle, but not both.</p>
                <p>Additional button types include:</p>
                <p><strong>Determinate indicators</strong> display how long an operation will
                    take.</p>
                <p><strong>Indeterminate indicators</strong> visualize an unspecified wait
                    time.</p>
            </div>
            <div class="module">
                 <h3>Types</h3>
                <p>Linear
                    <br>Circular</p>
                 <h3>Behavior</h3>
                <p>Loading content in phases
                    <br>Loading additional content</p>
            </div>
        </div>
    </section>
    <section id="indicatorTypes">
         <h2>Types of indicators</h2>
        <div class="module">
            <p>When indicators are <strong>determinate</strong> they indicate how long
                an operation will take when the percentage complete is detectable.</p>
            <p>When indicators are <strong>indeterminate</strong> they request that the
                user wait while something finishes when it’s not necessary to indicate
                how long it will take.</p>
            <p>Both linear and circular progress indicators may be either determinate
                or indeterminate.</p>
        </div>
        <div class="module progress-bar-linear">
             <h2>Linear</h2>
            <p>A linear progress indicator should always fill from 0% to 100% and never
                decrease in value. It should be represented by bars on the edge of a header
                or sheet that appear and disappear.</p>
            <p>For <strong>multiple operations</strong> happening in sequence, use the
                indicator to represent the progress as a whole, and not each individual
                operation.</p>
        </div>
        <div class="module progress-bar-animations">
            <div>
                 <h3>Determinate</h3>
                <smart-progress-bar #progressbar [value]="50" class="determinate"></smart-progress-bar>
                 <h3>Indeterminate</h3>
                <smart-progress-bar #progressbar2 [indeterminate]="true" class=""></smart-progress-bar>
            </div>
            <p>Linear progress indicators Light Theme</p>
        </div>
        <div class="module"></div>
        <div class="module progress-bar-behavior">
             <h2>Demo usage</h2>
        </div>
        <div class="module files-loading-progress">
            <div>
                <p>Getting your files</p>
                <smart-progress-bar #progressbar3 class="determinate"
                [indeterminate]="true" [inverted]="true"></smart-progress-bar>
            </div>
            <p>Loading content for the first time</p>
        </div>
        <div class="module page-loading-progress">
            <div>
                <smart-progress-bar #progressbar4 [indeterminate]="true"></smart-progress-bar>
            </div>
            <p>Query indicator on a webpage</p>
        </div>
    </section>
    <section id="circularProgressBar">
        <div class="module">
             <h2>Circular</h2>
        </div>
        <div class="module progress-bar-animations">
            <div>
                 <h3>Determinate</h3>
                <smart-circular-progress-bar class="determinate"></smart-circular-progress-bar>
                 <h3>Indeterminate</h3>
                <smart-circular-progress-bar [indeterminate]="true"></smart-circular-progress-bar>
            </div>
            <p>Circular progress indicators Light Theme</p>
        </div>
        <div class="module ">
            <div>
                 <h3>Determinate</h3>
                <smart-circular-progress-bar [value]=50 class="determinate"></smart-circular-progress-bar>
                 <h3>Indeterminate</h3>
                <smart-circular-progress-bar [indeterminate]="true"></smart-circular-progress-bar>
            </div>
            <p>Circular progress indicators Dark Theme</p>
        </div>
        <div class="module progress-bar-behavior">
             <h2>Demo usage</h2>
        </div>
        <div class="module circular-loading-progress">
            <div>
                <smart-circular-progress-bar class="uploading">
                    <smart-toggle-button #togglebutton id="toggleUploadButton"><i class="material-icons">cloud_upload</i>
                    </smart-toggle-button>
                </smart-circular-progress-bar>
            </div>
            <p>A circular loader may be integrated with a button.</p>
        </div>
        <div class="module page-refresh-progress">
            <div>
                <smart-circular-progress-bar id="refreshing" class="smart-visibility-hidden"
                [indeterminate]="true"></smart-circular-progress-bar>
            </div>
            <p>A circular loader may be used to load something on hover.</p>
        </div>
    </section>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ProgressBarComponent } from '@smart-webcomponents-angular/progressbar';
import { ToggleButtonComponent } from '@smart-webcomponents-angular/button';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('progressbar', { read: ProgressBarComponent, static: false }) progressbar: ProgressBarComponent;
	@ViewChild('progressbar2', { read: ProgressBarComponent, static: false }) progressbar2: ProgressBarComponent;
	@ViewChild('progressbar3', { read: ProgressBarComponent, static: false }) progressbar3: ProgressBarComponent;
	@ViewChild('progressbar4', { read: ProgressBarComponent, static: false }) progressbar4: ProgressBarComponent;
	@ViewChild('togglebutton', { read: ToggleButtonComponent, static: false }) togglebutton: ToggleButtonComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        const progressBars = document.getElementsByClassName('determinate');
        let hoverArea = document.getElementById('hover-area'), linearProgressBar1 = progressBars[0], linearProgressBar2 = progressBars[1], linearProgressBar3 = progressBars[2], circularProgressBar1 = progressBars[3], circularProgressBar2 = progressBars[2], mouseHoverArea = document.getElementsByClassName('page-refresh-progress')[0], uploadButton = document.getElementById('toggleUploadButton'), value, isPaused;
        mouseHoverArea.addEventListener('mouseenter', function () {
            document.getElementById('refreshing').classList.remove('smart-visibility-hidden');
        });
        mouseHoverArea.addEventListener('mouseleave', function () {
            document.getElementById('refreshing').classList.add('smart-visibility-hidden');
        });
        uploadButton.addEventListener('change', function (event) {
            let circularProgressBar1 = document.getElementsByClassName('uploading')[0];
            if (uploadButton.disabled || (circularProgressBar1.value > 0 && circularProgressBar1.value < circularProgressBar1.max)) {
                return;
            }
            if (event.detail.value) {
                circularProgressBar1.readonly = true;
                circularProgressBar1.$.addClass('start');
                let uploading = setInterval(function () {
                    circularProgressBar1.value += 25;
                    circularProgressBar2.value += 25;
                    if (circularProgressBar1.value > circularProgressBar1.max) {
                        clearInterval(uploading);
                        circularProgressBar1.$.addClass('finish');
                        circularProgressBar1.$.removeClass('start');
                        setTimeout(function () {
                            uploadButton.$.button.style.backgroundColor = '#F47B12';
                            uploadButton.$.button.innerHTML = 'done';
                            circularProgressBar1.readonly = false;
                            circularProgressBar1.$.removeClass('finish');
                        }, 250);
                    }
                }, 750);
            }
            else {
                circularProgressBar1.value = circularProgressBar1.min;
                uploadButton.$.button.style.backgroundColor = '';
                uploadButton.$.button.innerHTML = 'cloud_upload';
            }
        });
        setInterval(function () {
            if (isPaused) {
                return;
            }
            value = Math.random() * 15;
            linearProgressBar1.value += value;
            linearProgressBar2.value += value;
            circularProgressBar1.value += value;
            circularProgressBar2.value += value;
            if (linearProgressBar1.value >= linearProgressBar1.max) {
                isPaused = true;
                linearProgressBar1.classList.add('finished');
                linearProgressBar2.classList.add('finished');
                circularProgressBar1.classList.add('finished');
                setTimeout(function () {
                    linearProgressBar1.value = linearProgressBar1.min;
                    linearProgressBar2.value = linearProgressBar2.min;
                    circularProgressBar1.value = circularProgressBar1.min;
                    linearProgressBar1.classList.remove('finished');
                    linearProgressBar2.classList.remove('finished');
                    circularProgressBar1.classList.remove('finished');
                    isPaused = false;
                }, 1500);
            }
        }, 500);
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar';
import { ButtonModule } from '@smart-webcomponents-angular/button';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ProgressBarModule, ButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ColorInput for Angular

NPM package: @smart-webcomponents-angular/colorinput

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-colorinput

Navigate to the created project folder 

cd smart-angular-colorinput

Setup the ColorInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/colorinput
  2. Once installed, import the ColorInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ColorInputModule } from '@smart-webcomponents-angular/colorinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, ColorInputModule],
    bootstrap: [AppComponent]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.colorinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/colorinput/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/colorinput/styles/smart.colorinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/colorinput/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-color-input [dropDownButtonPosition]="'right'" [readonly]="true"></smart-color-input>
<smart-color-input [displayMode]="'grid'"></smart-color-input>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	
 
	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 { ColorInputModule } from '@smart-webcomponents-angular/colorinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, ColorInputModule],
    bootstrap: [AppComponent]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ColorPanel for Angular

NPM package: @smart-webcomponents-angular/colorpanel

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-colorpanel

Navigate to the created project folder 

cd smart-angular-colorpanel

Setup the ColorPanel

  1. Download and install the package.
    npm install @smart-webcomponents-angular/colorpanel
  2. Once installed, import the ColorPanelModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ColorPanelModule } from '@smart-webcomponents-angular/colorpanel';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ColorPanelModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.colorpanel.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/colorpanel/styles/smart.colorpanel.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <h1> Color Panel</h1> In this example is demonstrated the smartColorPanel Web Component.</div>
<smart-color-panel></smart-color-panel>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	
 
	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 { ColorPanelModule } from '@smart-webcomponents-angular/colorpanel';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ColorPanelModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ColorPicker for Angular

NPM package: @smart-webcomponents-angular/colorpicker

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

  1. Download and install the package.
    npm install @smart-webcomponents-angular/colorpicker
  2. Once installed, import the ColorPickerModule in your application root or feature module.

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

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.colorpicker.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css",
				"./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    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
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ComboBox for Angular

NPM package: @smart-webcomponents-angular/combobox

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-combobox

Navigate to the created project folder 

cd smart-angular-combobox

Setup the ComboBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/combobox
  2. Once installed, import the ComboBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ComboBoxModule } from '@smart-webcomponents-angular/combobox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ComboBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.combobox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css",
				"./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-combo-box #combobox [selectedValues]="['Cappuccino']">
    <smart-list-item [value]="'1'">Affogato</smart-list-item>
    <smart-list-item [value]="'2'">Americano</smart-list-item>
    <smart-list-item [value]="'3'">Bicerin</smart-list-item>
    <smart-list-item [value]="'4'">Breve</smart-list-item>
    <smart-list-item [value]="'5'">Cappuccino</smart-list-item>
    <smart-list-item [value]="'6'">Cafe Crema</smart-list-item>
    <smart-list-item [value]="'7'">Cafe Corretto</smart-list-item>
    <smart-list-item [value]="'8'">Cafe macchiato</smart-list-item>
    <smart-list-item [value]="'9'">Cafe mocha</smart-list-item>
    <smart-list-item [value]="'10'">Cortado</smart-list-item>
    <smart-list-item [value]="'11'">Cuban espresso</smart-list-item>
    <smart-list-item [value]="'12'">Espresso</smart-list-item>
    <smart-list-item [value]="'13'">Eiskaffee</smart-list-item>
    <smart-list-item [value]="'14'">Frappuccino</smart-list-item>
    <smart-list-item [value]="'15'">Galao</smart-list-item>
    <smart-list-item [value]="'16'">Greek frappe coffee</smart-list-item>
    <smart-list-item [value]="'17'">Iced Coffee</smart-list-item>
    <smart-list-item [value]="'18'">Instant Coffee</smart-list-item>
    <smart-list-item [value]="'19'">Latte</smart-list-item>
    <smart-list-item [value]="'20'">Liqueur coffee</smart-list-item>
</smart-combo-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent;
	
 
	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 { ComboBoxModule } from '@smart-webcomponents-angular/combobox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ComboBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.DateInput for Angular

NPM package: @smart-webcomponents-angular/dateinput

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-dateinput

Navigate to the created project folder 

cd smart-angular-dateinput

Setup the DateInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/dateinput
  2. Once installed, import the DateInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DateInputModule } from '@smart-webcomponents-angular/dateinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DateInputModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.dateinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/dateinput/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/dateinput/styles/smart.dateinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/dateinput/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
	<p> <b>Smart.DateInput</b> is an input that allows selection of a single date.
		It uses the Intl.DateTimeFormat API for formatting the dates.</p>
</div>
<h3>Default</h3>
<smart-date-input #dateinput [placeholder]="'Please Enter a Date'"></smart-date-input>
<br />
<br />
<br />
<h3>Underlined</h3>
<smart-date-input #dateinput2 class="underlined" [placeholder]="'Please Enter a Date'"></smart-date-input>
<br />
<br />
<br />
<h3>Outlined</h3>
<smart-date-input #dateinput3 class="outlined" [placeholder]="'Please Enter a Date'"></smart-date-input>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DateInputComponent } from '@smart-webcomponents-angular/dateinput';


@Component({
    selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('dateinput', { read: DateInputComponent, static: false }) dateinput: DateInputComponent;
	@ViewChild('dateinput2', { read: DateInputComponent, static: false }) dateinput2: DateInputComponent;
	@ViewChild('dateinput3', { read: DateInputComponent, static: false }) dateinput3: DateInputComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    "use strict";

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DateInputModule } from '@smart-webcomponents-angular/dateinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DateInputModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.DateRangeInput for Angular

NPM package: @smart-webcomponents-angular/daterangeinput

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-daterangeinput

Navigate to the created project folder 

cd smart-angular-daterangeinput

Setup the DateRangeInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/daterangeinput
  2. Once installed, import the DateRangeInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { DateRangeInputModule } from '@smart-webcomponents-angular/daterangeinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, DateRangeInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.daterangeinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/daterangeinput/styles/smart.daterangeinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.DateRangeInput</b> is an input that allows to select a Date/Date
        range from a Calendar drop down.</p>
    <p><b>Readonly</b> will turn the input in to a DatePicker/DateTimePicker.</p>
    <p><b>Timepicker</b> will enable/disable time selection from a menu that is
        available when the user clicks on the time icon(string) at the bottom of
        the popup.</p>
    <p><b>Icons</b> will enable/disable quick action icons(buttons) inside the
        popup.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-date-range-input #daterangeinput [placeholder]='"Please Select"' [dropDownButtonPosition]='"right"'></smart-date-range-input>
<div class="options">
    <div class="description">Readonly DateInput acts as a simple DateTimeInput.</div>
    <div class="option">
        <smart-check-box #checkbox class="readonly">Readonly</smart-check-box>
    </div>
    <div class="option">
        <smart-check-box #checkbox2 class="timepicker">Timepicker</smart-check-box>
    </div>
    <div class="option">
        <smart-check-box #checkbox3 class="icons">Icons</smart-check-box>
    </div>
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CheckBoxComponent } from '@smart-webcomponents-angular/checkbox';
import { DateRangeInputComponent } from '@smart-webcomponents-angular/daterangeinput';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('daterangeinput', { read: DateRangeInputComponent, static: false }) daterangeinput: DateRangeInputComponent;

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.
        const input = this.daterangeinput;

        document.querySelector('.options').addEventListener('change', function (event: CustomEvent): void {
            const target = event.target as HTMLElement;
            const targetClassList = target.classList;

            if (targetClassList.contains('readonly')) {
                input.readonly = event.detail.value;
                return;
            }

            if (targetClassList.contains('timepicker')) {
                input.timepicker = event.detail.value;
                return;
            }

            if (targetClassList.contains('icons')) {
                input.icons = event.detail.value;
                return;
            }

            const inputClassList = input.nativeElement.classList;

            if (targetClassList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { DateRangeInputModule } from '@smart-webcomponents-angular/daterangeinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, DateRangeInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.DateTimePicker for Angular

NPM package: @smart-webcomponents-angular/datetimepicker

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-datetimepicker

Navigate to the created project folder 

cd smart-angular-datetimepicker

Setup the DateTimePicker

  1. Download and install the package.
    npm install @smart-webcomponents-angular/datetimepicker
  2. Once installed, import the DateTimePickerModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DateTimePickerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.datetimepicker.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css",
				"./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css",
				"./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-date-time-picker #datetimepicker [calendarButton]="true" [enableMouseWheelAction]="true"
                        [dropDownPosition]="'center-bottom'" [spinButtons]="true" [spinButtonsPosition]="'left'"></smart-date-time-picker>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent;
	
 
	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 { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DateTimePickerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.DockingLayout for Angular

NPM package: @smart-webcomponents-angular/dockinglayout

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-dockinglayout

Navigate to the created project folder 

cd smart-angular-dockinglayout

Setup the DockingLayout

  1. Download and install the package.
    npm install @smart-webcomponents-angular/dockinglayout
  2. Once installed, import the DockingLayoutModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout';
import { TabsModule } from '@smart-webcomponents-angular/tabs';
import { TextBoxModule } from '@smart-webcomponents-angular/textbox';
import { SliderModule } from '@smart-webcomponents-angular/slider';
import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox';
	
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, DockingLayoutModule, TabsModule, TextBoxModule, SliderModule, MultilineTextBoxModule],
    schemas: [],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.dockinglayout.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css",
				"./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css",
				"./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css",
				"./node_modules/@smart-webcomponents-angular/slider/styles/smart.slider.css",
				"./node_modules/@smart-webcomponents-angular/tabs/styles/smart.tabs.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-docking-layout #docking [layout]="layout"></smart-docking-layout>
<smart-slider #slider></smart-slider>
<smart-multiline-text-box #multilinetextbox></smart-multiline-text-box>

    app.component.ts

     
import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Inject, ElementRef, ViewContainerRef  } from '@angular/core';
import { Smart, DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout';
import { SliderComponent } from '@smart-webcomponents-angular/slider';
import { MultilineTextBoxComponent } from '@smart-webcomponents-angular/multilinetextbox';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
	
export class AppComponent implements AfterViewInit {
    @ViewChild('slider', { read: SliderComponent, static: false }) slider: SliderComponent;
    @ViewChild('multilinetextbox', { read: MultilineTextBoxComponent , static: false }) multilinetextbox: MultilineTextBoxComponent;
	@ViewChild('docking', { read: DockingLayoutComponent, static: false }) docking: DockingLayoutComponent;
	

    layout = [
        {
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    type: 'LayoutGroup',
                    items: [
                        {
                            type: 'LayoutPanel',
                            id: 'tabPanel',
                            label: 'Input',
                            items: [{
                                label: 'TextBox Tab',
                                content: ''
                            },
                            {
                                label: 'Slider Tab',
                                content: ''
                            }],
                            size: '50%'
                        },
                        {
                            type: 'LayoutPanel',
                            label: 'Output',
                            items: [
                                {
                                    id: 'outputTab',
                                    label: 'Output',
                                    headerPosition: 'none',
                                    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
                                }
                            ]
                        }
                    ],
                    orientation: 'vertical',
                    size: '50%'
                },
                {
                    id: 'item0',
                    label: 'Tabs 0',
                    items: [{
                        label: 'Tab A',
                        selected: true,
                        content: 'What is Lorem Ipsum?\n' +
                            'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of' + 'type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in ' + 'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n' +
                            'Why do we use it?\n' +
                            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal ' + 'distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their' + 'default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on ' + 'purpose (injected humour and the like).'
                    }]
                }]
        }];

	ngAfterViewInit(): void {	
		this.docking.update('tabPanel',
		{
			size: '33%', label: 'Tab1',
			items: [{
				index: 0, label: 'Tab1',
				content: this.multilinetextbox.nativeElement
			},
			{
				index: 1, label: 'Tab2',
				content: this.slider.nativeElement
			}
			]
		});		
	}
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout';
import { TabsModule } from '@smart-webcomponents-angular/tabs';
import { TextBoxModule } from '@smart-webcomponents-angular/textbox';
import { SliderModule } from '@smart-webcomponents-angular/slider';
import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox';
	
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, DockingLayoutModule, TabsModule, TextBoxModule, SliderModule, MultilineTextBoxModule],
    schemas: [],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.DropDownButton for Angular

NPM package: @smart-webcomponents-angular/dropdownbutton

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-dropdownbutton

Navigate to the created project folder 

cd smart-angular-dropdownbutton

Setup the DropDownButton

  1. Download and install the package.
    npm install @smart-webcomponents-angular/dropdownbutton
  2. Once installed, import the DropDownButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { DropDownButtonModule } from "@smart-webcomponents-angular/dropdownbutton";
import { ListMenuModule } from "@smart-webcomponents-angular/listmenu";
import { ButtonModule } from "@smart-webcomponents-angular/button";
import { SwitchButtonModule } from "@smart-webcomponents-angular/switchbutton";
import { CalendarModule } from "@smart-webcomponents-angular/calendar";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CalendarModule,
    ListMenuModule,
    ButtonModule,
    SwitchButtonModule,
    DropDownButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.dropdownbutton.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/calendar/styles/smart.calendar.css",
				"./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css",
				"./node_modules/@smart-webcomponents-angular/listmenu/styles/smart.listmenu.css",
				"./node_modules/@smart-webcomponents-angular/menu/styles/smart.menu.css",
				"./node_modules/@smart-webcomponents-angular/switchbutton/styles/smart.switchbutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">smartDropDownButton allows you to display any type of content in a Drop-down.</div>
<smart-drop-down-button
#dropdownbutton drop-down-width="auto" placeholder="Calendar">
    <smart-calendar></smart-calendar>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton2 drop-down-width="auto" placeholder="ListMenu">
        <smart-list-menu></smart-list-menu>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton3 placeholder="Buttons">
        <smart-button>Button</smart-button>
        <smart-switch-button>Switch Button</smart-switch-button>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton4 placeholder="Text">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
        and typesetting industry. Lorem Ipsum has been the industry's standard
        dummy text ever since the 1500s, when an unknown printer took a galley
        of type and scrambled it to make a type specimen book. It has survived
        not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the
        release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.</smart-drop-down-button>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton!: DropDownButtonComponent;
	@ViewChild('dropdownbutton2', { read: DropDownButtonComponent, static: false }) dropdownbutton2!: DropDownButtonComponent;
	@ViewChild('dropdownbutton3', { read: DropDownButtonComponent, static: false }) dropdownbutton3!: DropDownButtonComponent;
	@ViewChild('dropdownbutton4', { read: DropDownButtonComponent, static: false }) dropdownbutton4!: DropDownButtonComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        const listMenuDataSource = [
            {
                label: 'OSI',
                items: [
                    {
                        label: 'Application Layer',
                        items: [
                            { label: 'SIP' },
                            { label: 'DNS' },
                            { label: 'FTP' },
                            { label: 'RTP' },
                            { label: 'DHCP' }
                        ]
                    },
                    {
                        label: 'Presentation Layer',
                        items: [
                            { label: 'SSL' },
                            { label: 'TLS' }
                        ]
                    },
                    {
                        label: 'Session Layer',
                        items: [
                            { label: 'NetBIOS' },
                            { label: 'SPDY' }
                        ]
                    },
                    {
                        label: 'Transport Layer',
                        items: [
                            { label: 'TCP' },
                            { label: 'UDP' },
                            { label: 'SCTP' }
                        ]
                    },
                    {
                        label: 'Network Layer',
                        items: [
                            { label: 'IP' },
                            { label: 'ARP' },
                            { label: 'ICMP' }
                        ]
                    },
                    {
                        label: 'Data Link Layer',
                        items: [
                            { label: 'ATM' },
                            { label: 'SDLS' },
                            { label: 'LLC' }
                        ]
                    },
                    {
                        label: 'Physical Layer',
                        items: [
                            { label: 'EIA/TIA-232' },
                            { label: 'ITU-T V-Series' },
                            { label: 'DSL' }
                        ]
                    }
                ]
            },
            {
                label: 'TCP/IP',
                items: [
                    {
                        label: 'Application Layer',
                        items: [
                            { label: 'DHCP' },
                            { label: 'DNS' },
                            { label: 'FTP' },
                            { label: 'HTTP' },
                            { label: 'IMAP' },
                            { label: 'LDAP' },
                            { label: 'XMPP' },
                            { label: 'SSH' },
                            { label: 'RIP' }
                        ]
                    },
                    {
                        label: 'Transport Layer',
                        items: [
                            { label: 'TCP' },
                            { label: 'UDP' },
                            { label: 'SCTP' }
                        ]
                    },
                    {
                        label: 'Internet Layer',
                        items: [
                            { label: 'IP' },
                            { label: 'ICMP' },
                            { label: 'ECN' }
                        ]
                    },
                    {
                        label: 'Link Layer',
                        items: [
                            { label: 'ARP' },
                            { label: 'NDP' },
                            { label: 'DSL' }
                        ]
                    }
                ]
            }
        ];
        document.querySelector('smart-list-menu').dataSource = listMenuDataSource;
    

	}	
}

    app.module.ts

     
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { DropDownButtonModule } from "@smart-webcomponents-angular/dropdownbutton";
import { ListMenuModule } from "@smart-webcomponents-angular/listmenu";
import { ButtonModule } from "@smart-webcomponents-angular/button";
import { SwitchButtonModule } from "@smart-webcomponents-angular/switchbutton";
import { CalendarModule } from "@smart-webcomponents-angular/calendar";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CalendarModule,
    ListMenuModule,
    ButtonModule,
    SwitchButtonModule,
    DropDownButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.DropDownList for Angular

NPM package: @smart-webcomponents-angular/dropdownlist

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-dropdownlist

Navigate to the created project folder 

cd smart-angular-dropdownlist

Setup the DropDownList

  1. Download and install the package.
    npm install @smart-webcomponents-angular/dropdownlist
  2. Once installed, import the DropDownListModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DropDownListModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.dropdownlist.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css",
				"./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-drop-down-list #dropdownlist [selectedIndexes]="[0]">
    <smart-list-item [value]="'1'">Affogato</smart-list-item>
    <smart-list-item [value]="'2'">Americano</smart-list-item>
    <smart-list-item [value]="'3'">Bicerin</smart-list-item>
    <smart-list-item [value]="'4'">Breve</smart-list-item>
    <smart-list-item [value]="'5'">Cappuccino</smart-list-item>
    <smart-list-item [value]="'6'">Cafe Crema</smart-list-item>
    <smart-list-item [value]="'7'">Cafe Corretto</smart-list-item>
    <smart-list-item [value]="'8'">Cafe macchiato</smart-list-item>
    <smart-list-item [value]="'9'">Cafe mocha</smart-list-item>
    <smart-list-item [value]="'10'">Cortado</smart-list-item>
    <smart-list-item [value]="'11'">Cuban espresso</smart-list-item>
    <smart-list-item [value]="'12'">Espresso</smart-list-item>
    <smart-list-item [value]="'13'">Eiskaffee</smart-list-item>
    <smart-list-item [value]="'14'">Frappuccino</smart-list-item>
    <smart-list-item [value]="'15'">Galao</smart-list-item>
    <smart-list-item [value]="'16'">Greek frappe coffee</smart-list-item>
    <smart-list-item [value]="'17'">Iced Coffee</smart-list-item>
    <smart-list-item [value]="'18'">Instant Coffee</smart-list-item>
    <smart-list-item [value]="'19'">Latte</smart-list-item>
    <smart-list-item [value]="'20'">Liqueur coffee</smart-list-item>
</smart-drop-down-list>

    app.component.ts

     
import { Component, ViewEncapsulation, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist';


@Component({
    selector: 'app-root',
	encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent;
	
 
	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 { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DropDownListModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.FileUpload for Angular

NPM package: @smart-webcomponents-angular/fileupload

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-fileupload

Navigate to the created project folder 

cd smart-angular-fileupload

Setup the FileUpload

  1. Download and install the package.
    npm install @smart-webcomponents-angular/fileupload
  2. Once installed, import the FileUploadModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { FileUploadModule } from '@smart-webcomponents-angular/fileupload';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, FileUploadModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.fileupload.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/fileupload/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/fileupload/styles/smart.fileupload.css",
				"./node_modules/@smart-webcomponents-angular/fileupload/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">File Upload - Component which allows you to upload one or multiple files.</div>
<smart-file-upload
#fileupload upload-url=""></smart-file-upload>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { FileUploadComponent } from '@smart-webcomponents-angular/fileupload';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('fileupload', { read: FileUploadComponent, static: false }) fileupload: FileUploadComponent;
	
 
	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 { FileUploadModule } from '@smart-webcomponents-angular/fileupload';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, FileUploadModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Form for Angular

NPM package: @smart-webcomponents-angular/form

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-form

Navigate to the created project folder 

cd smart-angular-form

Setup the Form

  1. Download and install the package.
    npm install @smart-webcomponents-angular/form
  2. Once installed, import the FormModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormModule } from '@smart-webcomponents-angular/form';
import { ButtonModule } from '@smart-webcomponents-angular/button';
import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist';
import { NumericTextBoxModule } from '@smart-webcomponents-angular/numerictextbox';
import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';
import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker';
import { MaskedTextBoxModule } from '@smart-webcomponents-angular/maskedtextbox';
import { InputModule } from '@smart-webcomponents-angular/input';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, InputModule, CheckBoxModule, MaskedTextBoxModule, DateTimePickerModule, RadioButtonModule, NumericTextBoxModule, DropDownListModule, FormModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.form.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css",
				"./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/maskedtextbox/styles/smart.maskedtextbox.css",
				"./node_modules/@smart-webcomponents-angular/numerictextbox/styles/smart.numerictextbox.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/form/styles/smart.form.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">This example shows how to create a Reactive Form with Validation.</div>
<form
id="profileForm">
    <div class="smart-form-row">
        <label>First Name:</label>
        <smart-input #input class="underlined" form-control-name="firstName"></smart-input>
    </div>
    <div class="smart-form-row">
        <label>Last Name:</label>
        <smart-input #input2 class="underlined" form-control-name="lastName"></smart-input>
    </div>
    <div class="smart-form-row" form-group-name="address">
         <h3>Address</h3>
        <div class="smart-form-row">
            <label>Street:</label>
            <smart-input #input3 class="underlined" form-control-name="street"></smart-input>
        </div>
        <div class="smart-form-row">
            <label>City:</label>
            <smart-input #input4 class="underlined" form-control-name="city"></smart-input>
        </div>
        <div class="smart-form-row">
            <label>State:</label>
            <smart-input #input5 class="underlined" form-control-name="state"></smart-input>
        </div>
        <div class="smart-form-row">
            <label>Zip Code:</label>
            <smart-input #input6 class="underlined" form-control-name="zip"></smart-input>
        </div>
    </div>
    <div class="smart-form-row submit">
        <smart-button #button class="success" form-control-name="submit" type="submit">Submit</smart-button>
    </div>
    </form>
    <br />
    <br />
    <div id="log"></div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { Smart } from '@smart-webcomponents-angular/form';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent implements AfterViewInit, OnInit {	 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
	    // Create a Reactive Form.
		const form = new Smart.Form('#profileForm', {
			firstName: ['', {
				validationRules: [
				   { type: 'required', message: 'First Name is required' },
				   { type: 'stringLength', min: 2, message: 'First Name requires minimum 2 characters' }
				]
			}],
			lastName: ['', {
			  validationRules: [{ type: 'required', message: 'Last Name is required' }]
			}
			],
			address: new Smart.FormGroup({
			  street: ['', {
				validationRules: [
					{ type: 'required', message: 'Street is required' }
				]
			  }
			  ],
			  city: [''],
			  state: [''],
			  zip: ['']
			})
		  });

		  // set form's value.
		  form.value = {
			  firstName: 'Peter',
			  lastName: 'Smith',
			  address: {
				  street: '507 - 20th Ave. E. Apt. 2A',
				  city: 'Seattle',
				  state: 'WA',
				  zip: '98122'
			  }
		  }



		  // handle value changes and log them.
		  form.onValueChanges = function(value) {
			document.getElementById('log').innerHTML = JSON.stringify(value);
		  }

		  // log Form's value
		  document.getElementById('log').innerHTML = JSON.stringify(form.value);
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormModule } from '@smart-webcomponents-angular/form';
import { ButtonModule } from '@smart-webcomponents-angular/button';
import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist';
import { NumericTextBoxModule } from '@smart-webcomponents-angular/numerictextbox';
import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';
import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker';
import { MaskedTextBoxModule } from '@smart-webcomponents-angular/maskedtextbox';
import { InputModule } from '@smart-webcomponents-angular/input';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, InputModule, CheckBoxModule, MaskedTextBoxModule, DateTimePickerModule, RadioButtonModule, NumericTextBoxModule, DropDownListModule, FormModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.GanttChart for Angular

NPM package: @smart-webcomponents-angular/ganttchart

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-ganttchart

Navigate to the created project folder 

cd smart-angular-ganttchart

Setup the GanttChart

  1. Download and install the package.
    npm install @smart-webcomponents-angular/ganttchart
  2. Once installed, import the GanttChartModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { GanttChartModule } from '@smart-webcomponents-angular/ganttchart';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, GanttChartModule],
    schemas: [],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.ganttchart.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/chart/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/chart/styles/smart.chart.css",
				"./node_modules/@smart-webcomponents-angular/ganttchart/styles/smart.ganttchart.css",
				"./node_modules/@smart-webcomponents-angular/chart/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-gantt-chart #ganttchart [dataSource]="dataSource" [durationUnit]="durationUnit" [taskColumns]="taskColumns"></smart-gantt-chart>

    app.component.ts

     
import { Component, ViewEncapsulation } from '@angular/core';
import { GanttChartComponent, GanttChartDataSource, GanttChartTaskColumn} from '@smart-webcomponents-angular/ganttchart';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    durationUnit = 'hour';
	taskColumns: GanttChartTaskColumn[] = 
	[
		{
			label: 'Tasks',
			value: 'label',
			size: '60%'
		},
		{
			label: 'Duration (hours)',
			value: 'duration',
			formatFunction: (date) => parseInt(date)
		}
	]
	dataSource: GanttChartDataSource[] = [
		{
			label: 'PRD & User-Stories',
			dateStart: '2019-01-10',
			dateEnd: '2019-02-10',
			class: 'product-team',
			type: 'task'
		},
		{
			label: 'Persona & Journey',
			dateStart: '2019-02-11',
			dateEnd: '2019-03-10',
			class: 'marketing-team',
			type: 'task'
		},
		{
			label: 'Architecture',
			dateStart: '2019-03-11',
			dateEnd: '2019-04-1',
			class: 'product-team',
			type: 'task'
		},
		{
			label: 'Prototyping',
			dateStart: '2019-04-02',
			dateEnd: '2019-05-01',
			class: 'dev-team',
			type: 'task'
		},
		{
			label: 'Design',
			dateStart: '2019-05-02',
			dateEnd: '2019-06-31',
			class: 'design-team',
			type: 'task'
		},
		{
			label: 'Development',
			dateStart: '2019-07-01',
			dateEnd: '2019-08-10',
			class: 'dev-team',
			type: 'task'
		},
		{
			label: 'Testing & QA',
			dateStart: '2019-08-11',
			dateEnd: '2019-09-10',
			class: 'qa-team',
			type: 'task'
		},
		{
			label: 'UAT Test',
			dateStart: '2019-09-12',
			dateEnd: '2019-10-01',
			class: 'product-team',
			type: 'task'
		},
		{
			label: 'Handover & Documentation',
			dateStart: '2019-10-02',
			dateEnd: '2019-11-01',
			class: 'marketing-team',
			type: 'task'
		},
		{
			label: 'Release',
			dateStart: '2019-11-01',
			dateEnd: '2019-12-31',
			class: 'release-team',
			type: 'task'
		}
	]
	
	ngOnInit(): void {
  
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { GanttChartModule } from '@smart-webcomponents-angular/ganttchart';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, GanttChartModule],
    schemas: [],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Gauge for Angular

NPM package: @smart-webcomponents-angular/gauge

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-gauge

Navigate to the created project folder 

cd smart-angular-gauge

Setup the Gauge

  1. Download and install the package.
    npm install @smart-webcomponents-angular/gauge
  2. Once installed, import the GaugeModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { GaugeModule } from '@smart-webcomponents-angular/gauge';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, GaugeModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.gauge.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/gauge/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/gauge/styles/smart.gauge.css",
				"./node_modules/@smart-webcomponents-angular/gauge/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-gauge #gauge id="gauge" [analogDisplayType]="'needle'" [digitalDisplay]="true"
             [startAngle]="-30" [endAngle]="210" [min]="0" [max]="100" [value]="0"></smart-gauge>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { GaugeComponent } from '@smart-webcomponents-angular/gauge';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('gauge', { read: GaugeComponent, static: false }) gauge: GaugeComponent;
	
 
	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 { GaugeModule } from '@smart-webcomponents-angular/gauge';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, GaugeModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Grid for Angular

NPM package: @smart-webcomponents-angular/grid

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-grid

Navigate to the created project folder 

cd smart-angular-grid

Setup the Grid

  1. Download and install the package.
    npm install @smart-webcomponents-angular/grid
  2. Once installed, import the GridModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { GridModule } from '@smart-webcomponents-angular/grid';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, GridModule],
    schemas: [],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.grid.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/grid/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/grid/styles/smart.grid.css",
				"./node_modules/@smart-webcomponents-angular/grid/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-grid #grid></smart-grid>

    app.component.ts

     
import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { GridComponent, GridColumn, DataAdapter, Smart } from '@smart-webcomponents-angular/grid';
import { GetData } from '../assets/data'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit {	
	@ViewChild("grid", { read: GridComponent, static: false }) grid: GridComponent;

    ngAfterViewInit(): void {
		this.grid.dataSource = new Smart.DataAdapter (
		{
			dataSource: GetData(500),
			dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'productName: string',
					'quantity: number',
					'price: number',
					'total: number'
				]
		});
		
		this.grid.columns = 
			[
			{
				label: 'First Name', dataField: 'firstName', columnGroup: 'name'
			},
			{ label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
			{ label: 'Product', dataField: 'productName', columnGroup: 'order'},
			{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order'},
			{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings: any) {
					const rowId = settings.row;
					const columnDataField = settings.column;
					const template = settings.template;
					
					if (settings.value >= 4) {
						settings.cell.background = '#00A45A';
						settings.cell.color = '#fff';
					}
					else if (settings.value < 2) 
					{
						settings.cell.background = '#DF3800';
						settings.cell.color = '#fff';
					}
					else {
						settings.cell.background = '#FFFDE1';
						settings.cell.color = '#333';				
					}
					
					settings.value = '$' + new Number(settings.value).toFixed(2);
				}
			},
			{ label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings: any) {
					const rowId = settings.row;
					const columnDataField = settings.column;
					const template = settings.template;
					
					if (settings.value >= 20) {
						settings.cell.background = '#00A45A';
						settings.cell.color = '#fff';
					}
					if (settings.value <= 5) {
						settings.cell.background = '#DF3800';
						settings.cell.color = '#fff';
					}
					else {
						settings.cell.background = '#FFFDE1';
						settings.cell.color = '#333';				
					}
					
					settings.value = '$' + new Number(settings.value).toFixed(2);
				}
			}
		];
			
			
		this.grid.behavior.columnResizeMode = 'growAndShrink';
		
		this.grid.appearance = {
			alternationCount: 2,
			showRowHeader: true,
			showRowHeaderSelectIcon: true,
			showRowHeaderFocusIcon: true
		};
		this.grid.paging.enabled = true;
		this.grid.pager.visible = true;
		this.grid.sorting.enabled = true;
		this.grid.editing.enabled = true;	
		this.grid.selection = {
			enabled: true,
			allowCellSelection: true,
			allowRowHeaderSelection: true,
			allowColumnHeaderSelection: true,
			mode: 'extended'
		};
		
		
		this.grid.columnGroups = [
		  { label: 'Customer Name', align: 'center', name: 'name' },
		  { label: 'Order Detals', align: 'center',  name: 'order' }
		]
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { GridModule } from '@smart-webcomponents-angular/grid';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, GridModule],
    schemas: [],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Input for Angular

NPM package: @smart-webcomponents-angular/input

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-input

Navigate to the created project folder 

cd smart-angular-input

Setup the Input

  1. Download and install the package.
    npm install @smart-webcomponents-angular/input
  2. Once installed, import the InputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { InputModule } from '@smart-webcomponents-angular/input';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, InputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.input.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.Input</b> is a simple input that can have a predefined options
        list.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-input #input [placeholder]='"Empty"'></smart-input>
<div class="options">
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { InputComponent } from '@smart-webcomponents-angular/input';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('input', { read: InputComponent, static: false }) input: InputComponent;
    @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton: RadioButtonComponent;
    @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2: RadioButtonComponent;
    @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3: RadioButtonComponent;

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code
        const input = this.input;

        document.querySelector('.options').addEventListener('change', function (event) {
            const target = event.target as HTMLElement,
                inputClassList = input.nativeElement.classList;

            if (target.classList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { InputModule } from '@smart-webcomponents-angular/input';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, InputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Kanban for Angular

NPM package: @smart-webcomponents-angular/kanban

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-kanban

Navigate to the created project folder 

cd smart-angular-kanban

Setup the Kanban

  1. Download and install the package.
    npm install @smart-webcomponents-angular/kanban
  2. Once installed, import the KanbanModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { KanbanModule } from '@smart-webcomponents-angular/kanban';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, KanbanModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.kanban.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/kanban/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/kanban/styles/smart.kanban.css",
				"./node_modules/@smart-webcomponents-angular/kanban/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-kanban #kanban id="kanban" [collapsible]="collapsible" [dataSource]="dataSource" [columns]="columns">
</smart-kanban>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { KanbanComponent } from '@smart-webcomponents-angular/kanban';
import { GetKanbanData } from '../assets/data';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('kanban', { read: KanbanComponent, static: false }) kanban: KanbanComponent;

    collapsible = true;
    dataSource = GetKanbanData();
    columns = [
        { label: 'To do', dataField: 'toDo' },
        { label: 'In progress', dataField: 'inProgress' },
        { label: 'Testing', dataField: 'testing' },
        { label: 'Done', dataField: 'done' }
    ];

    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 { KanbanModule } from '@smart-webcomponents-angular/kanban';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, KanbanModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Layout for Angular

NPM package: @smart-webcomponents-angular/layout

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-layout

Navigate to the created project folder 

cd smart-angular-layout

Setup the Layout

  1. Download and install the package.
    npm install @smart-webcomponents-angular/layout
  2. Once installed, import the LayoutModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { LayoutModule } from '@smart-webcomponents-angular/layout';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule,  LayoutModule],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.layout.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/layout/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css",
				"./node_modules/@smart-webcomponents-angular/layout/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-layout>
    <smart-layout-item>Item 1</smart-layout-item>
    <smart-layout-item>Item 2</smart-layout-item>
    <smart-layout-group [orientation]="'horizontal'">
        <smart-layout-item>Item 3</smart-layout-item>
        <smart-layout-item>Item 4</smart-layout-item>
    </smart-layout-group>
</smart-layout>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { LayoutComponent } from '@smart-webcomponents-angular/layout';


@Component({
    selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	
 
	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 { LayoutModule } from '@smart-webcomponents-angular/layout';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule,  LayoutModule],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ListBox for Angular

NPM package: @smart-webcomponents-angular/listbox

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-listbox

Navigate to the created project folder 

cd smart-angular-listbox

Setup the ListBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/listbox
  2. Once installed, import the ListBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ListBoxModule } from '@smart-webcomponents-angular/listbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ListBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.listbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/listbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/listbox/styles/smart.listbox.css",
				"./node_modules/@smart-webcomponents-angular/listbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-list-box #listbox [selectionMode]="'zeroOrOne'">
    <smart-list-item [value]="'Afghanistan'">Afghanistan</smart-list-item>
    <smart-list-item [selected]="true" [value]="'Albania'">Albania</smart-list-item>
    <smart-list-item [value]="'Algeria'">Algeria</smart-list-item>
    <smart-list-item [value]="'American Samoa'">American Samoa</smart-list-item>
    <smart-list-item [value]="'Andorra'">Andorra</smart-list-item>
    <smart-list-item [value]="'Angola'">Angola</smart-list-item>
    <smart-list-item [value]="'Anguilla'">Anguilla</smart-list-item>
    <smart-list-item [value]="'Antarctica'">Antarctica</smart-list-item>
    <smart-list-item [value]="'Antigua and Barbuda'">Antigua and Barbuda</smart-list-item>
    <smart-list-item [value]="'Argentina'">Argentina</smart-list-item>
    <smart-list-item [value]="'Armenia'">Armenia</smart-list-item>
    <smart-list-item [value]="'Aruba'">Aruba</smart-list-item>
    <smart-list-item [value]="'Australia'">Australia</smart-list-item>
    <smart-list-item [value]="'Austria'">Austria</smart-list-item>
    <smart-list-item [value]="'Azerbaijan'">Azerbaijan</smart-list-item>
    <smart-list-item [value]="'Bahamas'">Bahamas</smart-list-item>
    <smart-list-item [value]="'Bahrain'">Bahrain</smart-list-item>
    <smart-list-item [value]="'Bangladesh'">Bangladesh</smart-list-item>
    <smart-list-item [value]="'Barbados'">Barbados</smart-list-item>
    <smart-list-item [value]="'Belarus'">Belarus</smart-list-item>
    <smart-list-item [value]="'Belgium'">Belgium</smart-list-item>
    <smart-list-item [value]="'Belize'">Belize</smart-list-item>
    <smart-list-item [value]="'Benin'">Benin</smart-list-item>
    <smart-list-item [value]="'Bermuda'">Bermuda</smart-list-item>
    <smart-list-item [value]="'Bhutan'">Bhutan</smart-list-item>
    <smart-list-item [value]="'Bolivia'">Bolivia</smart-list-item>
    <smart-list-item [value]="'Bosnia and Herzegovina'">Bosnia and Herzegovina</smart-list-item>
    <smart-list-item [value]="'Botswana'">Botswana</smart-list-item>
    <smart-list-item [value]="'Bouvet Island'">Bouvet Island</smart-list-item>
    <smart-list-item [value]="'Brazil'">Brazil</smart-list-item>
    <smart-list-item [value]="'British Indian Ocean Territory'">British Indian Ocean Territory</smart-list-item>
    <smart-list-item [value]="'Brunei Darussalam'">Brunei Darussalam</smart-list-item>
    <smart-list-item [value]="'Bulgaria'">Bulgaria</smart-list-item>
    <smart-list-item [value]="'Burkina Faso'">Burkina Faso</smart-list-item>
    <smart-list-item [value]="'Burundi'">Burundi</smart-list-item>
    <smart-list-item [value]="'Cambodia'">Cambodia</smart-list-item>
    <smart-list-item [value]="'Cameroon'">Cameroon</smart-list-item>
    <smart-list-item [value]="'Canada'">Canada</smart-list-item>
    <smart-list-item [value]="'Cape Verde'">Cape Verde</smart-list-item>
    <smart-list-item [value]="'Cayman Islands'">Cayman Islands</smart-list-item>
    <smart-list-item [value]="'Central African Republic'">Central African Republic</smart-list-item>
    <smart-list-item [value]="'Chad'">Chad</smart-list-item>
    <smart-list-item [value]="'Chile'">Chile</smart-list-item>
    <smart-list-item [value]="'China'">China</smart-list-item>
    <smart-list-item [value]="'Christmas Island'">Christmas Island</smart-list-item>
    <smart-list-item [value]="'Cocos (Keeling) Islands'">Cocos Islands</smart-list-item>
    <smart-list-item [value]="'Colombia'">Colombia</smart-list-item>
    <smart-list-item [value]="'Comoros'">Comoros</smart-list-item>
    <smart-list-item [value]="'Congo'">Congo</smart-list-item>
    <smart-list-item [value]="'Congo, The Democratic Republic of The'">Congo</smart-list-item>
    <smart-list-item [value]="'Cook Islands'">Cook Islands</smart-list-item>
    <smart-list-item [value]="'Costa Rica'">Costa Rica</smart-list-item>
    <smart-list-item [value]="'Cote D\'ivoire'">Cote D'ivoire</smart-list-item>
    <smart-list-item [value]="'Croatia'">Croatia</smart-list-item>
    <smart-list-item [value]="'Cuba'">Cuba</smart-list-item>
    <smart-list-item [value]="'Cyprus'">Cyprus</smart-list-item>
    <smart-list-item [value]="'Czech Republic'">Czech Republic</smart-list-item>
    <smart-list-item [value]="'Denmark'">Denmark</smart-list-item>
    <smart-list-item [value]="'Djibouti'">Djibouti</smart-list-item>
    <smart-list-item [value]="'Dominica'">Dominica</smart-list-item>
    <smart-list-item [value]="'Dominican Republic'">Dominican Republic</smart-list-item>
    <smart-list-item [value]="'Ecuador'">Ecuador</smart-list-item>
    <smart-list-item [value]="'Egypt'">Egypt</smart-list-item>
    <smart-list-item [value]="'El Salvador'">El Salvador</smart-list-item>
    <smart-list-item [value]="'Equatorial Guinea'">Equatorial Guinea</smart-list-item>
    <smart-list-item [value]="'Eritrea'">Eritrea</smart-list-item>
    <smart-list-item [value]="'Estonia'">Estonia</smart-list-item>
    <smart-list-item [value]="'Ethiopia'">Ethiopia</smart-list-item>
    <smart-list-item [value]="'Falkland Islands (Malvinas)'">Falkland Islands</smart-list-item>
    <smart-list-item [value]="'Faroe Islands'">Faroe Islands</smart-list-item>
    <smart-list-item [value]="'Fiji'">Fiji</smart-list-item>
    <smart-list-item [value]="'Finland'">Finland</smart-list-item>
    <smart-list-item [value]="'France'">France</smart-list-item>
    <smart-list-item [value]="'French Guiana'">French Guiana</smart-list-item>
    <smart-list-item [value]="'French Polynesia'">French Polynesia</smart-list-item>
    <smart-list-item [value]="'French Southern Territories'">French Southern Territories</smart-list-item>
    <smart-list-item [value]="'Gabon'">Gabon</smart-list-item>
    <smart-list-item [value]="'Gambia'">Gambia</smart-list-item>
    <smart-list-item [value]="'Georgia'">Georgia</smart-list-item>
    <smart-list-item [value]="'Germany'">Germany</smart-list-item>
    <smart-list-item [value]="'Ghana'">Ghana</smart-list-item>
    <smart-list-item [value]="'Gibraltar'">Gibraltar</smart-list-item>
    <smart-list-item [value]="'Greece'">Greece</smart-list-item>
    <smart-list-item [value]="'Greenland'">Greenland</smart-list-item>
    <smart-list-item [value]="'Grenada'">Grenada</smart-list-item>
    <smart-list-item [value]="'Guadeloupe'">Guadeloupe</smart-list-item>
    <smart-list-item [value]="'Guam'">Guam</smart-list-item>
    <smart-list-item [value]="'Guatemala'">Guatemala</smart-list-item>
    <smart-list-item [value]="'Guinea'">Guinea</smart-list-item>
    <smart-list-item [value]="'Guinea-bissau'">Guinea-bissau</smart-list-item>
    <smart-list-item [value]="'Guyana'">Guyana</smart-list-item>
    <smart-list-item [value]="'Haiti'">Haiti</smart-list-item>
    <smart-list-item [value]="'Heard Island and Mcdonald Islands'">Heard Island and Mcdonald Islands</smart-list-item>
    <smart-list-item [value]="'Holy See (Vatican City State)'">Holy See</smart-list-item>
    <smart-list-item [value]="'Honduras'">Honduras</smart-list-item>
    <smart-list-item [value]="'Hong Kong'">Hong Kong</smart-list-item>
    <smart-list-item [value]="'Hungary'">Hungary</smart-list-item>
    <smart-list-item [value]="'Iceland'">Iceland</smart-list-item>
    <smart-list-item [value]="'India'">India</smart-list-item>
    <smart-list-item [value]="'Indonesia'">Indonesia</smart-list-item>
    <smart-list-item [value]="'Iran, Islamic Republic of'">Iran</smart-list-item>
    <smart-list-item [value]="'Iraq'">Iraq</smart-list-item>
    <smart-list-item [value]="'Ireland'">Ireland</smart-list-item>
    <smart-list-item [value]="'Israel'">Israel</smart-list-item>
    <smart-list-item [value]="'Italy'">Italy</smart-list-item>
    <smart-list-item [value]="'Jamaica'">Jamaica</smart-list-item>
    <smart-list-item [value]="'Japan'">Japan</smart-list-item>
    <smart-list-item [value]="'Jordan'">Jordan</smart-list-item>
    <smart-list-item [value]="'Kazakhstan'">Kazakhstan</smart-list-item>
    <smart-list-item [value]="'Kenya'">Kenya</smart-list-item>
    <smart-list-item [value]="'Kiribati'">Kiribati</smart-list-item>
    <smart-list-item [value]="'Korea, Democratic People\'s Republic of'">Korea</smart-list-item>
    <smart-list-item [value]="'Korea, Republic of'">Korea, Republic of</smart-list-item>
    <smart-list-item [value]="'Kuwait'">Kuwait</smart-list-item>
    <smart-list-item [value]="'Kyrgyzstan'">Kyrgyzstan</smart-list-item>
    <smart-list-item [value]="'Lao People\'s Democratic Republic'">Lao People's Democratic Republic</smart-list-item>
    <smart-list-item [value]="'Latvia'">Latvia</smart-list-item>
    <smart-list-item [value]="'Lebanon'">Lebanon</smart-list-item>
    <smart-list-item [value]="'Lesotho'">Lesotho</smart-list-item>
    <smart-list-item [value]="'Liberia'">Liberia</smart-list-item>
    <smart-list-item [value]="'Libyan Arab Jamahiriya'">Libyan Arab Jamahiriya</smart-list-item>
    <smart-list-item [value]="'Liechtenstein'">Liechtenstein</smart-list-item>
    <smart-list-item [value]="'Lithuania'">Lithuania</smart-list-item>
    <smart-list-item [value]="'Luxembourg'">Luxembourg</smart-list-item>
    <smart-list-item [value]="'Macao'">Macao</smart-list-item>
    <smart-list-item [value]="'Macedonia, The Former Yugoslav Republic of'">Macedonia</smart-list-item>
    <smart-list-item [value]="'Madagascar'">Madagascar</smart-list-item>
    <smart-list-item [value]="'Malawi'">Malawi</smart-list-item>
    <smart-list-item [value]="'Malaysia'">Malaysia</smart-list-item>
    <smart-list-item [value]="'Maldives'">Maldives</smart-list-item>
    <smart-list-item [value]="'Mali'">Mali</smart-list-item>
    <smart-list-item [value]="'Malta'">Malta</smart-list-item>
    <smart-list-item [value]="'Marshall Islands'">Marshall Islands</smart-list-item>
    <smart-list-item [value]="'Martinique'">Martinique</smart-list-item>
    <smart-list-item [value]="'Mauritania'">Mauritania</smart-list-item>
    <smart-list-item [value]="'Mauritius'">Mauritius</smart-list-item>
    <smart-list-item [value]="'Mayotte'">Mayotte</smart-list-item>
    <smart-list-item [value]="'Mexico'">Mexico</smart-list-item>
    <smart-list-item [value]="'Micronesia, Federated States of'">Micronesia</smart-list-item>
    <smart-list-item [value]="'Moldova, Republic of'">Moldova, Republic of</smart-list-item>
    <smart-list-item [value]="'Monaco'">Monaco</smart-list-item>
    <smart-list-item [value]="'Mongolia'">Mongolia</smart-list-item>
    <smart-list-item [value]="'Montserrat'">Montserrat</smart-list-item>
    <smart-list-item [value]="'Morocco'">Morocco</smart-list-item>
    <smart-list-item [value]="'Mozambique'">Mozambique</smart-list-item>
    <smart-list-item [value]="'Myanmar'">Myanmar</smart-list-item>
    <smart-list-item [value]="'Namibia'">Namibia</smart-list-item>
    <smart-list-item [value]="'Nauru'">Nauru</smart-list-item>
    <smart-list-item [value]="'Nepal'">Nepal</smart-list-item>
    <smart-list-item [value]="'Netherlands'">Netherlands</smart-list-item>
    <smart-list-item [value]="'Netherlands Antilles'">Netherlands Antilles</smart-list-item>
    <smart-list-item [value]="'New Caledonia'">New Caledonia</smart-list-item>
    <smart-list-item [value]="'New Zealand'">New Zealand</smart-list-item>
    <smart-list-item [value]="'Nicaragua'">Nicaragua</smart-list-item>
    <smart-list-item [value]="'Niger'">Niger</smart-list-item>
    <smart-list-item [value]="'Nigeria'">Nigeria</smart-list-item>
    <smart-list-item [value]="'Niue'">Niue</smart-list-item>
    <smart-list-item [value]="'Norfolk Island'">Norfolk Island</smart-list-item>
    <smart-list-item [value]="'Northern Mariana Islands'">Northern Mariana Islands</smart-list-item>
    <smart-list-item [value]="'Norway'">Norway</smart-list-item>
    <smart-list-item [value]="'Oman'">Oman</smart-list-item>
    <smart-list-item [value]="'Pakistan'">Pakistan</smart-list-item>
    <smart-list-item [value]="'Palau'">Palau</smart-list-item>
    <smart-list-item [value]="'Palestinian Territory, Occupied'">Palestinian Territory, Occupied</smart-list-item>
    <smart-list-item [value]="'Panama'">Panama</smart-list-item>
    <smart-list-item [value]="'Papua New Guinea'">Papua New Guinea</smart-list-item>
    <smart-list-item [value]="'Paraguay'">Paraguay</smart-list-item>
    <smart-list-item [value]="'Peru'">Peru</smart-list-item>
    <smart-list-item [value]="'Philippines'">Philippines</smart-list-item>
    <smart-list-item [value]="'Pitcairn'">Pitcairn</smart-list-item>
    <smart-list-item [value]="'Poland'">Poland</smart-list-item>
    <smart-list-item [value]="'Portugal'">Portugal</smart-list-item>
    <smart-list-item [value]="'Puerto Rico'">Puerto Rico</smart-list-item>
    <smart-list-item [value]="'Qatar'">Qatar</smart-list-item>
    <smart-list-item [value]="'Reunion'">Reunion</smart-list-item>
    <smart-list-item [value]="'Romania'">Romania</smart-list-item>
    <smart-list-item [value]="'Russian Federation'">Russian Federation</smart-list-item>
    <smart-list-item [value]="'Rwanda'">Rwanda</smart-list-item>
    <smart-list-item [value]="'Saint Helena'">Saint Helena</smart-list-item>
    <smart-list-item [value]="'Saint Kitts and Nevis'">Saint Kitts and Nevis</smart-list-item>
    <smart-list-item [value]="'Saint Lucia'">Saint Lucia</smart-list-item>
    <smart-list-item [value]="'Saint Pierre and Miquelon'">Saint Pierre and Miquelon</smart-list-item>
    <smart-list-item [value]="'Saint Vincent and The Grenadines'">Saint Vincent and The Grenadines</smart-list-item>
    <smart-list-item [value]="'Samoa'">Samoa</smart-list-item>
    <smart-list-item [value]="'San Marino'">San Marino</smart-list-item>
    <smart-list-item [value]="'Sao Tome and Principe'">Sao Tome and Principe</smart-list-item>
    <smart-list-item [value]="'Saudi Arabia'">Saudi Arabia</smart-list-item>
    <smart-list-item [value]="'Senegal'">Senegal</smart-list-item>
    <smart-list-item [value]="'Serbia and Montenegro'">Serbia and Montenegro</smart-list-item>
    <smart-list-item [value]="'Seychelles'">Seychelles</smart-list-item>
    <smart-list-item [value]="'Sierra Leone'">Sierra Leone</smart-list-item>
    <smart-list-item [value]="'Singapore'">Singapore</smart-list-item>
    <smart-list-item [value]="'Slovakia'">Slovakia</smart-list-item>
    <smart-list-item [value]="'Slovenia'">Slovenia</smart-list-item>
    <smart-list-item [value]="'Solomon Islands'">Solomon Islands</smart-list-item>
    <smart-list-item [value]="'Somalia'">Somalia</smart-list-item>
    <smart-list-item [value]="'South Africa'">South Africa</smart-list-item>
    <smart-list-item [value]="'South Georgia and The South Sandwich Islands'">South Georgia</smart-list-item>
    <smart-list-item [value]="'Spain'">Spain</smart-list-item>
    <smart-list-item [value]="'Sri Lanka'">Sri Lanka</smart-list-item>
    <smart-list-item [value]="'Sudan'">Sudan</smart-list-item>
    <smart-list-item [value]="'Suriname'">Suriname</smart-list-item>
    <smart-list-item [value]="'Svalbard and Jan Mayen'">Svalbard and Jan Mayen</smart-list-item>
    <smart-list-item [value]="'Swaziland'">Swaziland</smart-list-item>
    <smart-list-item [value]="'Sweden'">Sweden</smart-list-item>
    <smart-list-item [value]="'Switzerland'">Switzerland</smart-list-item>
    <smart-list-item [value]="'Syrian Arab Republic'">Syrian Arab Republic</smart-list-item>
    <smart-list-item [value]="'Taiwan, Province of China'">Taiwan, Province of China</smart-list-item>
    <smart-list-item [value]="'Tajikistan'">Tajikistan</smart-list-item>
    <smart-list-item [value]="'Tanzania, United Republic of'">Tanzania, United Republic of</smart-list-item>
    <smart-list-item [value]="'Thailand'">Thailand</smart-list-item>
    <smart-list-item [value]="'Timor-leste'">Timor-leste</smart-list-item>
    <smart-list-item [value]="'Togo'">Togo</smart-list-item>
    <smart-list-item [value]="'Tokelau'">Tokelau</smart-list-item>
    <smart-list-item [value]="'Tonga'">Tonga</smart-list-item>
    <smart-list-item [value]="'Trinidad and Tobago'">Trinidad and Tobago</smart-list-item>
    <smart-list-item [value]="'Tunisia'">Tunisia</smart-list-item>
    <smart-list-item [value]="'Turkey'">Turkey</smart-list-item>
    <smart-list-item [value]="'Turkmenistan'">Turkmenistan</smart-list-item>
    <smart-list-item [value]="'Turks and Caicos Islands'">Turks and Caicos Islands</smart-list-item>
    <smart-list-item [value]="'Tuvalu'">Tuvalu</smart-list-item>
    <smart-list-item [value]="'Uganda'">Uganda</smart-list-item>
    <smart-list-item [value]="'Ukraine'">Ukraine</smart-list-item>
    <smart-list-item [value]="'United Arab Emirates'">United Arab Emirates</smart-list-item>
    <smart-list-item [value]="'United Kingdom'">United Kingdom</smart-list-item>
    <smart-list-item [value]="'United States'">United States</smart-list-item>
    <smart-list-item [value]="'United States Minor Outlying Islands'">United States Minor Outlying Islands
    </smart-list-item>
    <smart-list-item [value]="'Uruguay'">Uruguay</smart-list-item>
    <smart-list-item [value]="'Uzbekistan'">Uzbekistan</smart-list-item>
    <smart-list-item [value]="'Vanuatu'">Vanuatu</smart-list-item>
    <smart-list-item [value]="'Venezuela'">Venezuela</smart-list-item>
    <smart-list-item [value]="'Viet Nam'">Viet Nam</smart-list-item>
    <smart-list-item [value]="'Virgin Islands, British'">Virgin Islands, British</smart-list-item>
    <smart-list-item [value]="'Virgin Islands, U.S.'">Virgin Islands, U.S.</smart-list-item>
    <smart-list-item [value]="'Wallis and Futuna'">Wallis and Futuna</smart-list-item>
    <smart-list-item [value]="'Western Sahara'">Western Sahara</smart-list-item>
    <smart-list-item [value]="'Yemen'">Yemen</smart-list-item>
    <smart-list-item [value]="'Zambia'">Zambia</smart-list-item>
    <smart-list-item [value]="'Zimbabwe'">Zimbabwe</smart-list-item>
</smart-list-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ListBoxComponent } from '@smart-webcomponents-angular/listbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('listbox', { read: ListBoxComponent, static: false }) listbox: ListBoxComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    // no code

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ListBoxModule } from '@smart-webcomponents-angular/listbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ListBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ListMenu for Angular

NPM package: @smart-webcomponents-angular/listmenu

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-listmenu

Navigate to the created project folder 

cd smart-angular-listmenu

Setup the ListMenu

  1. Download and install the package.
    npm install @smart-webcomponents-angular/listmenu
  2. Once installed, import the ListMenuModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ListMenuModule } from '@smart-webcomponents-angular/listmenu';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ListMenuModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.listmenu.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/listmenu/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/listmenu/styles/smart.listmenu.css",
				"./node_modules/@smart-webcomponents-angular/menu/styles/smart.menu.css",
				"./node_modules/@smart-webcomponents-angular/listmenu/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-list-menu #listmenu id="listMenu" class="animation">
    <smart-menu-items-group>
        File
        <smart-menu-item [shortcut]="'Ctrl+N'">New</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+0'">Open</smart-menu-item>
        <smart-menu-items-group>
            Open Containing Folder
            <smart-menu-item>Explorer</smart-menu-item>
            <smart-menu-item>cmd</smart-menu-item>
        </smart-menu-items-group>
        <smart-menu-item [shortcut]="'Ctrl+S'" [disabled]="true">Save</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+Alt+S'" [separator]="true">Save As...</smart-menu-item>
        <smart-menu-item [shortcut]="'Alt+F4'">Exit</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Edit
        <smart-menu-item [shortcut]="'Ctrl+Z'">Undo</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+Y'" [separator]="true">Redo</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+X'">Cut</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+C'">Copy</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+V'" [disabled]="true">Paste</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Encoding
        <smart-menu-item>Encode in ANSI</smart-menu-item>
        <smart-menu-item>Encode in UTF-8</smart-menu-item>
        <smart-menu-item>Encode in UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 LE BOM</smart-menu-item>
        <smart-menu-items-group [separator]="true">
            Character sets
            <smart-menu-items-group>
                Cyrillic
                <smart-menu-item>ISO 8859-5</smart-menu-item>
                <smart-menu-item>KOI8-R</smart-menu-item>
                <smart-menu-item>KOI8-U</smart-menu-item>
                <smart-menu-item>Windows-1251</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Chinese
                <smart-menu-item>Big5 (Traditional)</smart-menu-item>
                <smart-menu-item>GB2312 (Simplified)</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Western European
                <smart-menu-item>ISO 8859-1</smart-menu-item>
                <smart-menu-item>ISO 8859-15</smart-menu-item>
                <smart-menu-item>OEM 850</smart-menu-item>
                <smart-menu-item>Windows-1252</smart-menu-item>
            </smart-menu-items-group>
        </smart-menu-items-group>
        <smart-menu-item>Convert to ANSI</smart-menu-item>
        <smart-menu-item>Convert to UTF-8</smart-menu-item>
        <smart-menu-item>Convert to UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 LE BOM</smart-menu-item>
    </smart-menu-items-group>
</smart-list-menu>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ListMenuComponent } from '@smart-webcomponents-angular/listmenu';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('listmenu', { read: ListMenuComponent, static: false }) listmenu: ListMenuComponent;
	
 
	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 { ListMenuModule } from '@smart-webcomponents-angular/listmenu';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ListMenuModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.MaskedTextBox for Angular

NPM package: @smart-webcomponents-angular/maskedtextbox

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-maskedtextbox

Navigate to the created project folder 

cd smart-angular-maskedtextbox

Setup the MaskedTextBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/maskedtextbox
  2. Once installed, import the MaskedTextBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MaskedTextBoxModule } from '@smart-webcomponents-angular/maskedtextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MaskedTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.maskedtextbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/maskedtextbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/maskedtextbox/styles/smart.maskedtextbox.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/maskedtextbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-masked-text-box #maskedtextbox [label]="'Phone number'" [hint]="''" [value]="''" [mask]="'+1 (###) ### - ####'">
</smart-masked-text-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { MaskedTextBoxComponent } from '@smart-webcomponents-angular/maskedtextbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('maskedtextbox', { read: MaskedTextBoxComponent, static: false }) maskedtextbox: MaskedTextBoxComponent;
	
 
	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 { MaskedTextBoxModule } from '@smart-webcomponents-angular/maskedtextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MaskedTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Menu for Angular

NPM package: @smart-webcomponents-angular/menu

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-menu

Navigate to the created project folder 

cd smart-angular-menu

Setup the Menu

  1. Download and install the package.
    npm install @smart-webcomponents-angular/menu
  2. Once installed, import the MenuModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MenuModule } from '@smart-webcomponents-angular/menu';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MenuModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.menu.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/menu/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/menu/styles/smart.menu.css",
				"./node_modules/@smart-webcomponents-angular/menu/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-menu #menu id="menu">
    <smart-menu-items-group>
        File
        <smart-menu-item [shortcut]="'Ctrl+N'">New</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+0'">Open</smart-menu-item>
        <smart-menu-items-group>
            Open Containing Folder
            <smart-menu-item>Explorer</smart-menu-item>
            <smart-menu-item>cmd</smart-menu-item>
        </smart-menu-items-group>
        <smart-menu-item [shortcut]="'Ctrl+S'" [disabled]="true">Save</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+Alt+S'" [separator]="true">Save As...</smart-menu-item>
        <smart-menu-item [shortcut]="'Alt+F4'">Exit</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Edit
        <smart-menu-item [shortcut]="'Ctrl+Z'">Undo</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+Y'" [separator]="true">Redo</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+X'">Cut</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+C'">Copy</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+V'" [disabled]="true">Paste</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group [dropDownHeight]="300">
        Encoding
        <smart-menu-item>Encode in ANSI</smart-menu-item>
        <smart-menu-item>Encode in UTF-8</smart-menu-item>
        <smart-menu-item>Encode in UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 LE BOM</smart-menu-item>
        <smart-menu-items-group [separator]="true">
            Character sets
            <smart-menu-items-group>
                Cyrillic
                <smart-menu-item>ISO 8859-5</smart-menu-item>
                <smart-menu-item>KOI8-R</smart-menu-item>
                <smart-menu-item>KOI8-U</smart-menu-item>
                <smart-menu-item>Windows-1251</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Chinese
                <smart-menu-item>Big5 (Traditional)</smart-menu-item>
                <smart-menu-item>GB2312 (Simplified)</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Western European
                <smart-menu-item>ISO 8859-1</smart-menu-item>
                <smart-menu-item>ISO 8859-15</smart-menu-item>
                <smart-menu-item>OEM 850</smart-menu-item>
                <smart-menu-item>Windows-1252</smart-menu-item>
            </smart-menu-items-group>
        </smart-menu-items-group>
        <smart-menu-item>Convert to ANSI</smart-menu-item>
        <smart-menu-item>Convert to UTF-8</smart-menu-item>
        <smart-menu-item>Convert to UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 LE BOM</smart-menu-item>
    </smart-menu-items-group>
</smart-menu>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { MenuComponent } from '@smart-webcomponents-angular/menu';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('menu', { read: MenuComponent, static: false }) menu: MenuComponent;
	
 
	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 { MenuModule } from '@smart-webcomponents-angular/menu';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MenuModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.MultiComboInput for Angular

NPM package: @smart-webcomponents-angular/multicomboinput

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-multicomboinput

Navigate to the created project folder 

cd smart-angular-multicomboinput

Setup the MultiComboInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/multicomboinput
  2. Once installed, import the MultiComboInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { MultiComboInputModule } from '@smart-webcomponents-angular/multicomboinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, MultiComboInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.multicomboinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/multicomboinput/styles/smart.multicomboinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.MutliComboInput</b> is an input that can have a predefined check
        list where each selected item is added to the Input as a tag.</p>
    <p><b>Readonly</b> will turn the input in to a drop down list.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-multi-combo-input #multicomboinput [dataSource]="dataSource" [dropDownButtonPosition]='"right"'></smart-multi-combo-input>
<div class="options">
    <div class="description">Readonly MultiInput acts as a simple DropDownList.</div>
    <div class="option">
        <smart-check-box #checkbox class="readonly">Read only</smart-check-box>
    </div>
    <div class="option">
        <smart-check-box #checkbox2 class="hide-drop-down-button">Hide Drop Down Button</smart-check-box>
    </div>
    <div class="option">
        <smart-check-box #checkbox3 class="select-all">Show Select All Item</smart-check-box>
    </div>
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CheckBoxComponent } from '@smart-webcomponents-angular/checkbox';
import { MultiComboInputComponent } from '@smart-webcomponents-angular/multicomboinput';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox: CheckBoxComponent;
    @ViewChild('checkbox2', { read: CheckBoxComponent, static: false }) checkbox2: CheckBoxComponent;
    @ViewChild('checkbox3', { read: CheckBoxComponent, static: false }) checkbox3: CheckBoxComponent;
    @ViewChild('multicomboinput', { read: MultiComboInputComponent, static: false }) multicomboinput: MultiComboInputComponent;
    @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton: RadioButtonComponent;
    @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2: RadioButtonComponent;
    @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3: RadioButtonComponent;

    dataSource = [
        { value: "Austria", label: "Austria" },
        { value: "Belarus", label: "Belarus" },
        { value: "Belgium", label: "Belgium" },
        { value: "Bosnia and Herzegovina", label: "Bosnia and Herzegovina" },
        { value: "Bulgaria", label: "Bulgaria" },
        { value: "Croatia", label: "Croatia" },
        { value: "Cyprus", label: "Cyprus" },
        { value: "Czech Republic", label: "Czech Republic" },
        { value: "Denmark", label: "Denmark" },
        { value: "Estonia", label: "Estonia" },
        { value: "Finland", label: "Finland" },
        { value: "France", label: "France" },
        { value: "Georgia", label: "Georgia" },
        { value: "Germany", label: "Germany" },
        { value: "Greece", label: "Greece" },
        { value: "Hungary", label: "Hungary" },
        { value: "Iceland", label: "Iceland" },
        { value: "Ireland", label: "Ireland" },
        { value: "Italy", label: "Italy" },
        { value: "Latvia", label: "Latvia" },
        { value: "Liechtenstein", label: "Liechtenstein" },
        { value: "Lithuania", label: "Lithuania" },
        { value: "Luxembourg", label: "Luxembourg" },
        { value: "Macedonia, The Former Yugoslav Republic of", label: "Macedonia" },
        { value: "Malta", label: "Malta" },
        { value: "Moldova, Republic of", label: "Moldova, Republic of" },
        { value: "Netherlands", label: "Netherlands" },
        { value: "Norway", label: "Norway" },
        { value: "Poland", label: "Poland" },
        { value: "Portugal", label: "Portugal" },
        { value: "Romania", label: "Romania" },
        { value: "Russian Federation", label: "Russian Federation" },
        { value: "Serbia", label: "Serbia" },
        { value: "Montenegro", label: "Montenegro" },
        { value: "Slovakia", label: "Slovakia" },
        { value: "Slovenia", label: "Slovenia" },
        { value: "Spain", label: "Spain" },
        { value: "Sweden", label: "Sweden" },
        { value: "Switzerland", label: "Switzerland" },
        { value: "Turkey", label: "Turkey" },
        { value: "Ukraine", label: "Ukraine" },
        { value: "United Kingdom", label: "United Kingdom" }
    ];

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.
        let input = this.multicomboinput;

        document.querySelector('.options').addEventListener('change', function (event: CustomEvent): void {
            const target = event.target as HTMLElement;
            const targetClassList = target.classList;

            if (targetClassList.contains('readonly')) {
                input.readonly = event.detail.value;
                return;
            }

            if (targetClassList.contains('select-all')) {
                input.selectAll = event.detail.value;
                return;
            }

            if (targetClassList.contains('hide-drop-down-button')) {
                input.dropDownButtonPosition = event.detail.value ? 'none' : 'right';
                return;
            }

            const inputClassList = input.nativeElement.classList;

            if (targetClassList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';
import { MultiComboInputModule } from '@smart-webcomponents-angular/multicomboinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, MultiComboInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.MultiInput for Angular

NPM package: @smart-webcomponents-angular/multiinput

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-multiinput

Navigate to the created project folder 

cd smart-angular-multiinput

Setup the MultiInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/multiinput
  2. Once installed, import the MultiInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';import { MultiInputModule } from '@smart-webcomponents-angular/multiinput';import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, MultiInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.multiinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/multiinput/styles/smart.multiinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.MultiInput</b> is an input that can have a predefined options
        list. This input unlike the <b>Smart.Input</b> allows multiple selection.</p>
    <p><b>Readonly</b> will turn the input in to a drop down list.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-multi-input #multiinput [dataSource]="dataSource" [placeholder]='"Please Select"' [dropDownButtonPosition]='"right"'></smart-multi-input>
<div class="options">
    <div class="description">Readonly MultiInput acts as a simple DropDownList.</div>
    <div class="option">
        <smart-check-box #checkbox class="readonly">Read only</smart-check-box>
    </div>
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CheckBoxComponent } from '@smart-webcomponents-angular/checkbox';
import { MultiInputComponent } from '@smart-webcomponents-angular/multiinput';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox: CheckBoxComponent;
    @ViewChild('multiinput', { read: MultiInputComponent, static: false }) multiinput: MultiInputComponent;
    @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton: RadioButtonComponent;
    @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2: RadioButtonComponent;
    @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3: RadioButtonComponent;

    dataSource = [
        { value: "Austria", label: "Austria" },
        { value: "Belarus", label: "Belarus" },
        { value: "Belgium", label: "Belgium" },
        { value: "Bosnia and Herzegovina", label: "Bosnia and Herzegovina" },
        { value: "Bulgaria", label: "Bulgaria" },
        { value: "Croatia", label: "Croatia" },
        { value: "Cyprus", label: "Cyprus" },
        { value: "Czech Republic", label: "Czech Republic" },
        { value: "Denmark", label: "Denmark" },
        { value: "Estonia", label: "Estonia" },
        { value: "Finland", label: "Finland" },
        { value: "France", label: "France" },
        { value: "Georgia", label: "Georgia" },
        { value: "Germany", label: "Germany" },
        { value: "Greece", label: "Greece" },
        { value: "Hungary", label: "Hungary" },
        { value: "Iceland", label: "Iceland" },
        { value: "Ireland", label: "Ireland" },
        { value: "Italy", label: "Italy" },
        { value: "Latvia", label: "Latvia" },
        { value: "Liechtenstein", label: "Liechtenstein" },
        { value: "Lithuania", label: "Lithuania" },
        { value: "Luxembourg", label: "Luxembourg" },
        { value: "Macedonia, The Former Yugoslav Republic of", label: "Macedonia" },
        { value: "Malta", label: "Malta" },
        { value: "Moldova, Republic of", label: "Moldova, Republic of" },
        { value: "Netherlands", label: "Netherlands" },
        { value: "Norway", label: "Norway" },
        { value: "Poland", label: "Poland" },
        { value: "Portugal", label: "Portugal" },
        { value: "Romania", label: "Romania" },
        { value: "Russian Federation", label: "Russian Federation" },
        { value: "Serbia", label: "Serbia" },
        { value: "Montenegro", label: "Montenegro" },
        { value: "Slovakia", label: "Slovakia" },
        { value: "Slovenia", label: "Slovenia" },
        { value: "Spain", label: "Spain" },
        { value: "Sweden", label: "Sweden" },
        { value: "Switzerland", label: "Switzerland" },
        { value: "Turkey", label: "Turkey" },
        { value: "Ukraine", label: "Ukraine" },
        { value: "United Kingdom", label: "United Kingdom" }
    ];

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.
        let input = this.multiinput

        document.querySelector('.options').addEventListener('change', function (event: CustomEvent): void {
            const target = event.target as HTMLElement;
            const targetClassList = target.classList;

            if (targetClassList.contains('readonly')) {
                input.readonly = event.detail.value;
                return;
            }

            const inputClassList = input.nativeElement.classList;

            if (targetClassList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';import { MultiInputModule } from '@smart-webcomponents-angular/multiinput';import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, MultiInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.MultilineTextBox for Angular

NPM package: @smart-webcomponents-angular/multilinetextbox

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-multilinetextbox

Navigate to the created project folder 

cd smart-angular-multilinetextbox

Setup the MultilineTextBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/multilinetextbox
  2. Once installed, import the MultilineTextBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MultilineTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.multilinetextbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-multiline-text-box #multilinetextbox [enterKeyBehavior]="'newLine'" [selectAllOnFocus]="true" [autoFocus]="true"
    [placeholder]="'smart Text Area'"></smart-multiline-text-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { MultilineTextBoxComponent } from '@smart-webcomponents-angular/multilinetextbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
	
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('multilinetextbox', { read: MultilineTextBoxComponent, static: false }) multilinetextbox: MultilineTextBoxComponent;
	
 
	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 { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MultilineTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.MultiSplitButton for Angular

NPM package: @smart-webcomponents-angular/multisplitbutton

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-multisplitbutton

Navigate to the created project folder 

cd smart-angular-multisplitbutton

Setup the MultiSplitButton

  1. Download and install the package.
    npm install @smart-webcomponents-angular/multisplitbutton
  2. Once installed, import the MultiSplitButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MultiSplitButtonModule } from '@smart-webcomponents-angular/multisplitbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MultiSplitButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.multisplitbutton.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/multisplitbutton/styles/smart.multisplitbutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-multi-split-button #multisplitbutton [buttonsDataSource]="['1', '2', '3']">
    <smart-list-item [value]="'Afghanistan'">Afghanistan</smart-list-item>
    <smart-list-item [selected]="true" [value]="'Albania'">Albania</smart-list-item>
    <smart-list-item [value]="'Algeria'">Algeria</smart-list-item>
    <smart-list-item [value]="'American Samoa'">American Samoa</smart-list-item>
    <smart-list-item [value]="'Andorra'">Andorra</smart-list-item>
    <smart-list-item [value]="'Angola'">Angola</smart-list-item>
    <smart-list-item [value]="'Anguilla'">Anguilla</smart-list-item>
    <smart-list-item [value]="'Antarctica'">Antarctica</smart-list-item>
    <smart-list-item [value]="'Antigua and Barbuda'">Antigua and Barbuda</smart-list-item>
    <smart-list-item [value]="'Argentina'">Argentina</smart-list-item>
    <smart-list-item [value]="'Armenia'">Armenia</smart-list-item>
    <smart-list-item [value]="'Aruba'">Aruba</smart-list-item>
    <smart-list-item [value]="'Australia'">Australia</smart-list-item>
    <smart-list-item [value]="'Austria'">Austria</smart-list-item>
    <smart-list-item [value]="'Azerbaijan'">Azerbaijan</smart-list-item>
    <smart-list-item [value]="'Bahamas'">Bahamas</smart-list-item>
    <smart-list-item [value]="'Bahrain'">Bahrain</smart-list-item>
    <smart-list-item [value]="'Bangladesh'">Bangladesh</smart-list-item>
    <smart-list-item [value]="'Barbados'">Barbados</smart-list-item>
    <smart-list-item [value]="'Belarus'">Belarus</smart-list-item>
    <smart-list-item [value]="'Belgium'">Belgium</smart-list-item>
    <smart-list-item [value]="'Belize'">Belize</smart-list-item>
    <smart-list-item [value]="'Benin'">Benin</smart-list-item>
    <smart-list-item [value]="'Bermuda'">Bermuda</smart-list-item>
    <smart-list-item [value]="'Bhutan'">Bhutan</smart-list-item>
    <smart-list-item [value]="'Bolivia'">Bolivia</smart-list-item>
    <smart-list-item [value]="'Bosnia and Herzegovina'">Bosnia and Herzegovina</smart-list-item>
    <smart-list-item [value]="'Botswana'">Botswana</smart-list-item>
    <smart-list-item [value]="'Bouvet Island'">Bouvet Island</smart-list-item>
    <smart-list-item [value]="'Brazil'">Brazil</smart-list-item>
    <smart-list-item [value]="'British Indian Ocean Territory'">British Indian Ocean Territory</smart-list-item>
    <smart-list-item [value]="'Brunei Darussalam'">Brunei Darussalam</smart-list-item>
    <smart-list-item [value]="'Bulgaria'">Bulgaria</smart-list-item>
    <smart-list-item [value]="'Burkina Faso'">Burkina Faso</smart-list-item>
    <smart-list-item [value]="'Burundi'">Burundi</smart-list-item>
    <smart-list-item [value]="'Cambodia'">Cambodia</smart-list-item>
    <smart-list-item [value]="'Cameroon'">Cameroon</smart-list-item>
    <smart-list-item [value]="'Canada'">Canada</smart-list-item>
    <smart-list-item [value]="'Cape Verde'">Cape Verde</smart-list-item>
    <smart-list-item [value]="'Cayman Islands'">Cayman Islands</smart-list-item>
    <smart-list-item [value]="'Central African Republic'">Central African Republic</smart-list-item>
    <smart-list-item [value]="'Chad'">Chad</smart-list-item>
    <smart-list-item [value]="'Chile'">Chile</smart-list-item>
    <smart-list-item [value]="'China'">China</smart-list-item>
    <smart-list-item [value]="'Christmas Island'">Christmas Island</smart-list-item>
    <smart-list-item [value]="'Cocos (Keeling) Islands'">Cocos Islands</smart-list-item>
    <smart-list-item [value]="'Colombia'">Colombia</smart-list-item>
    <smart-list-item [value]="'Comoros'">Comoros</smart-list-item>
    <smart-list-item [value]="'Congo'">Congo</smart-list-item>
    <smart-list-item [value]="'Congo, The Democratic Republic of The'">Congo</smart-list-item>
    <smart-list-item [value]="'Cook Islands'">Cook Islands</smart-list-item>
    <smart-list-item [value]="'Costa Rica'">Costa Rica</smart-list-item>
    <smart-list-item [value]="'Cote D\'ivoire'">Cote D'ivoire</smart-list-item>
    <smart-list-item [value]="'Croatia'">Croatia</smart-list-item>
    <smart-list-item [value]="'Cuba'">Cuba</smart-list-item>
    <smart-list-item [value]="'Cyprus'">Cyprus</smart-list-item>
    <smart-list-item [value]="'Czech Republic'">Czech Republic</smart-list-item>
    <smart-list-item [value]="'Denmark'">Denmark</smart-list-item>
    <smart-list-item [value]="'Djibouti'">Djibouti</smart-list-item>
    <smart-list-item [value]="'Dominica'">Dominica</smart-list-item>
    <smart-list-item [value]="'Dominican Republic'">Dominican Republic</smart-list-item>
    <smart-list-item [value]="'Ecuador'">Ecuador</smart-list-item>
    <smart-list-item [value]="'Egypt'">Egypt</smart-list-item>
    <smart-list-item [value]="'El Salvador'">El Salvador</smart-list-item>
    <smart-list-item [value]="'Equatorial Guinea'">Equatorial Guinea</smart-list-item>
    <smart-list-item [value]="'Eritrea'">Eritrea</smart-list-item>
    <smart-list-item [value]="'Estonia'">Estonia</smart-list-item>
    <smart-list-item [value]="'Ethiopia'">Ethiopia</smart-list-item>
    <smart-list-item [value]="'Falkland Islands (Malvinas)'">Falkland Islands</smart-list-item>
    <smart-list-item [value]="'Faroe Islands'">Faroe Islands</smart-list-item>
    <smart-list-item [value]="'Fiji'">Fiji</smart-list-item>
    <smart-list-item [value]="'Finland'">Finland</smart-list-item>
    <smart-list-item [value]="'France'">France</smart-list-item>
    <smart-list-item [value]="'French Guiana'">French Guiana</smart-list-item>
    <smart-list-item [value]="'French Polynesia'">French Polynesia</smart-list-item>
    <smart-list-item [value]="'French Southern Territories'">French Southern Territories</smart-list-item>
    <smart-list-item [value]="'Gabon'">Gabon</smart-list-item>
    <smart-list-item [value]="'Gambia'">Gambia</smart-list-item>
    <smart-list-item [value]="'Georgia'">Georgia</smart-list-item>
    <smart-list-item [value]="'Germany'">Germany</smart-list-item>
    <smart-list-item [value]="'Ghana'">Ghana</smart-list-item>
    <smart-list-item [value]="'Gibraltar'">Gibraltar</smart-list-item>
    <smart-list-item [value]="'Greece'">Greece</smart-list-item>
    <smart-list-item [value]="'Greenland'">Greenland</smart-list-item>
    <smart-list-item [value]="'Grenada'">Grenada</smart-list-item>
    <smart-list-item [value]="'Guadeloupe'">Guadeloupe</smart-list-item>
    <smart-list-item [value]="'Guam'">Guam</smart-list-item>
    <smart-list-item [value]="'Guatemala'">Guatemala</smart-list-item>
    <smart-list-item [value]="'Guinea'">Guinea</smart-list-item>
    <smart-list-item [value]="'Guinea-bissau'">Guinea-bissau</smart-list-item>
    <smart-list-item [value]="'Guyana'">Guyana</smart-list-item>
    <smart-list-item [value]="'Haiti'">Haiti</smart-list-item>
    <smart-list-item [value]="'Heard Island and Mcdonald Islands'">Heard Island and Mcdonald Islands</smart-list-item>
    <smart-list-item [value]="'Holy See (Vatican City State)'">Holy See</smart-list-item>
    <smart-list-item [value]="'Honduras'">Honduras</smart-list-item>
    <smart-list-item [value]="'Hong Kong'">Hong Kong</smart-list-item>
    <smart-list-item [value]="'Hungary'">Hungary</smart-list-item>
    <smart-list-item [value]="'Iceland'">Iceland</smart-list-item>
    <smart-list-item [value]="'India'">India</smart-list-item>
    <smart-list-item [value]="'Indonesia'">Indonesia</smart-list-item>
    <smart-list-item [value]="'Iran, Islamic Republic of'">Iran</smart-list-item>
    <smart-list-item [value]="'Iraq'">Iraq</smart-list-item>
    <smart-list-item [value]="'Ireland'">Ireland</smart-list-item>
    <smart-list-item [value]="'Israel'">Israel</smart-list-item>
    <smart-list-item [value]="'Italy'">Italy</smart-list-item>
    <smart-list-item [value]="'Jamaica'">Jamaica</smart-list-item>
    <smart-list-item [value]="'Japan'">Japan</smart-list-item>
    <smart-list-item [value]="'Jordan'">Jordan</smart-list-item>
    <smart-list-item [value]="'Kazakhstan'">Kazakhstan</smart-list-item>
    <smart-list-item [value]="'Kenya'">Kenya</smart-list-item>
    <smart-list-item [value]="'Kiribati'">Kiribati</smart-list-item>
    <smart-list-item [value]="'Korea, Democratic People\'s Republic of'">Korea</smart-list-item>
    <smart-list-item [value]="'Korea, Republic of'">Korea, Republic of</smart-list-item>
    <smart-list-item [value]="'Kuwait'">Kuwait</smart-list-item>
    <smart-list-item [value]="'Kyrgyzstan'">Kyrgyzstan</smart-list-item>
    <smart-list-item [value]="'Lao People\'s Democratic Republic'">Lao People's Democratic Republic</smart-list-item>
    <smart-list-item [value]="'Latvia'">Latvia</smart-list-item>
    <smart-list-item [value]="'Lebanon'">Lebanon</smart-list-item>
    <smart-list-item [value]="'Lesotho'">Lesotho</smart-list-item>
    <smart-list-item [value]="'Liberia'">Liberia</smart-list-item>
    <smart-list-item [value]="'Libyan Arab Jamahiriya'">Libyan Arab Jamahiriya</smart-list-item>
    <smart-list-item [value]="'Liechtenstein'">Liechtenstein</smart-list-item>
    <smart-list-item [value]="'Lithuania'">Lithuania</smart-list-item>
    <smart-list-item [value]="'Luxembourg'">Luxembourg</smart-list-item>
    <smart-list-item [value]="'Macao'">Macao</smart-list-item>
    <smart-list-item [value]="'Macedonia, The Former Yugoslav Republic of'">Macedonia</smart-list-item>
    <smart-list-item [value]="'Madagascar'">Madagascar</smart-list-item>
    <smart-list-item [value]="'Malawi'">Malawi</smart-list-item>
    <smart-list-item [value]="'Malaysia'">Malaysia</smart-list-item>
    <smart-list-item [value]="'Maldives'">Maldives</smart-list-item>
    <smart-list-item [value]="'Mali'">Mali</smart-list-item>
    <smart-list-item [value]="'Malta'">Malta</smart-list-item>
    <smart-list-item [value]="'Marshall Islands'">Marshall Islands</smart-list-item>
    <smart-list-item [value]="'Martinique'">Martinique</smart-list-item>
    <smart-list-item [value]="'Mauritania'">Mauritania</smart-list-item>
    <smart-list-item [value]="'Mauritius'">Mauritius</smart-list-item>
    <smart-list-item [value]="'Mayotte'">Mayotte</smart-list-item>
    <smart-list-item [value]="'Mexico'">Mexico</smart-list-item>
    <smart-list-item [value]="'Micronesia, Federated States of'">Micronesia</smart-list-item>
    <smart-list-item [value]="'Moldova, Republic of'">Moldova, Republic of</smart-list-item>
    <smart-list-item [value]="'Monaco'">Monaco</smart-list-item>
    <smart-list-item [value]="'Mongolia'">Mongolia</smart-list-item>
    <smart-list-item [value]="'Montserrat'">Montserrat</smart-list-item>
    <smart-list-item [value]="'Morocco'">Morocco</smart-list-item>
    <smart-list-item [value]="'Mozambique'">Mozambique</smart-list-item>
    <smart-list-item [value]="'Myanmar'">Myanmar</smart-list-item>
    <smart-list-item [value]="'Namibia'">Namibia</smart-list-item>
    <smart-list-item [value]="'Nauru'">Nauru</smart-list-item>
    <smart-list-item [value]="'Nepal'">Nepal</smart-list-item>
    <smart-list-item [value]="'Netherlands'">Netherlands</smart-list-item>
    <smart-list-item [value]="'Netherlands Antilles'">Netherlands Antilles</smart-list-item>
    <smart-list-item [value]="'New Caledonia'">New Caledonia</smart-list-item>
    <smart-list-item [value]="'New Zealand'">New Zealand</smart-list-item>
    <smart-list-item [value]="'Nicaragua'">Nicaragua</smart-list-item>
    <smart-list-item [value]="'Niger'">Niger</smart-list-item>
    <smart-list-item [value]="'Nigeria'">Nigeria</smart-list-item>
    <smart-list-item [value]="'Niue'">Niue</smart-list-item>
    <smart-list-item [value]="'Norfolk Island'">Norfolk Island</smart-list-item>
    <smart-list-item [value]="'Northern Mariana Islands'">Northern Mariana Islands</smart-list-item>
    <smart-list-item [value]="'Norway'">Norway</smart-list-item>
    <smart-list-item [value]="'Oman'">Oman</smart-list-item>
    <smart-list-item [value]="'Pakistan'">Pakistan</smart-list-item>
    <smart-list-item [value]="'Palau'">Palau</smart-list-item>
    <smart-list-item [value]="'Palestinian Territory, Occupied'">Palestinian Territory, Occupied</smart-list-item>
    <smart-list-item [value]="'Panama'">Panama</smart-list-item>
    <smart-list-item [value]="'Papua New Guinea'">Papua New Guinea</smart-list-item>
    <smart-list-item [value]="'Paraguay'">Paraguay</smart-list-item>
    <smart-list-item [value]="'Peru'">Peru</smart-list-item>
    <smart-list-item [value]="'Philippines'">Philippines</smart-list-item>
    <smart-list-item [value]="'Pitcairn'">Pitcairn</smart-list-item>
    <smart-list-item [value]="'Poland'">Poland</smart-list-item>
    <smart-list-item [value]="'Portugal'">Portugal</smart-list-item>
    <smart-list-item [value]="'Puerto Rico'">Puerto Rico</smart-list-item>
    <smart-list-item [value]="'Qatar'">Qatar</smart-list-item>
    <smart-list-item [value]="'Reunion'">Reunion</smart-list-item>
    <smart-list-item [value]="'Romania'">Romania</smart-list-item>
    <smart-list-item [value]="'Russian Federation'">Russian Federation</smart-list-item>
    <smart-list-item [value]="'Rwanda'">Rwanda</smart-list-item>
    <smart-list-item [value]="'Saint Helena'">Saint Helena</smart-list-item>
    <smart-list-item [value]="'Saint Kitts and Nevis'">Saint Kitts and Nevis</smart-list-item>
    <smart-list-item [value]="'Saint Lucia'">Saint Lucia</smart-list-item>
    <smart-list-item [value]="'Saint Pierre and Miquelon'">Saint Pierre and Miquelon</smart-list-item>
    <smart-list-item [value]="'Saint Vincent and The Grenadines'">Saint Vincent and The Grenadines</smart-list-item>
    <smart-list-item [value]="'Samoa'">Samoa</smart-list-item>
    <smart-list-item [value]="'San Marino'">San Marino</smart-list-item>
    <smart-list-item [value]="'Sao Tome and Principe'">Sao Tome and Principe</smart-list-item>
    <smart-list-item [value]="'Saudi Arabia'">Saudi Arabia</smart-list-item>
    <smart-list-item [value]="'Senegal'">Senegal</smart-list-item>
    <smart-list-item [value]="'Serbia and Montenegro'">Serbia and Montenegro</smart-list-item>
    <smart-list-item [value]="'Seychelles'">Seychelles</smart-list-item>
    <smart-list-item [value]="'Sierra Leone'">Sierra Leone</smart-list-item>
    <smart-list-item [value]="'Singapore'">Singapore</smart-list-item>
    <smart-list-item [value]="'Slovakia'">Slovakia</smart-list-item>
    <smart-list-item [value]="'Slovenia'">Slovenia</smart-list-item>
    <smart-list-item [value]="'Solomon Islands'">Solomon Islands</smart-list-item>
    <smart-list-item [value]="'Somalia'">Somalia</smart-list-item>
    <smart-list-item [value]="'South Africa'">South Africa</smart-list-item>
    <smart-list-item [value]="'South Georgia and The South Sandwich Islands'">South Georgia</smart-list-item>
    <smart-list-item [value]="'Spain'">Spain</smart-list-item>
    <smart-list-item [value]="'Sri Lanka'">Sri Lanka</smart-list-item>
    <smart-list-item [value]="'Sudan'">Sudan</smart-list-item>
    <smart-list-item [value]="'Suriname'">Suriname</smart-list-item>
    <smart-list-item [value]="'Svalbard and Jan Mayen'">Svalbard and Jan Mayen</smart-list-item>
    <smart-list-item [value]="'Swaziland'">Swaziland</smart-list-item>
    <smart-list-item [value]="'Sweden'">Sweden</smart-list-item>
    <smart-list-item [value]="'Switzerland'">Switzerland</smart-list-item>
    <smart-list-item [value]="'Syrian Arab Republic'">Syrian Arab Republic</smart-list-item>
    <smart-list-item [value]="'Taiwan, Province of China'">Taiwan, Province of China</smart-list-item>
    <smart-list-item [value]="'Tajikistan'">Tajikistan</smart-list-item>
    <smart-list-item [value]="'Tanzania, United Republic of'">Tanzania, United Republic of</smart-list-item>
    <smart-list-item [value]="'Thailand'">Thailand</smart-list-item>
    <smart-list-item [value]="'Timor-leste'">Timor-leste</smart-list-item>
    <smart-list-item [value]="'Togo'">Togo</smart-list-item>
    <smart-list-item [value]="'Tokelau'">Tokelau</smart-list-item>
    <smart-list-item [value]="'Tonga'">Tonga</smart-list-item>
    <smart-list-item [value]="'Trinidad and Tobago'">Trinidad and Tobago</smart-list-item>
    <smart-list-item [value]="'Tunisia'">Tunisia</smart-list-item>
    <smart-list-item [value]="'Turkey'">Turkey</smart-list-item>
    <smart-list-item [value]="'Turkmenistan'">Turkmenistan</smart-list-item>
    <smart-list-item [value]="'Turks and Caicos Islands'">Turks and Caicos Islands</smart-list-item>
    <smart-list-item [value]="'Tuvalu'">Tuvalu</smart-list-item>
    <smart-list-item [value]="'Uganda'">Uganda</smart-list-item>
    <smart-list-item [value]="'Ukraine'">Ukraine</smart-list-item>
    <smart-list-item [value]="'United Arab Emirates'">United Arab Emirates</smart-list-item>
    <smart-list-item [value]="'United Kingdom'">United Kingdom</smart-list-item>
    <smart-list-item [value]="'United States'">United States</smart-list-item>
    <smart-list-item [value]="'United States Minor Outlying Islands'">United States Minor Outlying Islands
    </smart-list-item>
    <smart-list-item [value]="'Uruguay'">Uruguay</smart-list-item>
    <smart-list-item [value]="'Uzbekistan'">Uzbekistan</smart-list-item>
    <smart-list-item [value]="'Vanuatu'">Vanuatu</smart-list-item>
    <smart-list-item [value]="'Venezuela'">Venezuela</smart-list-item>
    <smart-list-item [value]="'Viet Nam'">Viet Nam</smart-list-item>
    <smart-list-item [value]="'Virgin Islands, British'">Virgin Islands, British</smart-list-item>
    <smart-list-item [value]="'Virgin Islands, U.S.'">Virgin Islands, U.S.</smart-list-item>
    <smart-list-item [value]="'Wallis and Futuna'">Wallis and Futuna</smart-list-item>
    <smart-list-item [value]="'Western Sahara'">Western Sahara</smart-list-item>
    <smart-list-item [value]="'Yemen'">Yemen</smart-list-item>
    <smart-list-item [value]="'Zambia'">Zambia</smart-list-item>
    <smart-list-item [value]="'Zimbabwe'">Zimbabwe</smart-list-item>
</smart-multi-split-button>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { MultiSplitButtonComponent } from '@smart-webcomponents-angular/multisplitbutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('multisplitbutton', { read: MultiSplitButtonComponent, static: false }) multisplitbutton: MultiSplitButtonComponent;
	
 
	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 { MultiSplitButtonModule } from '@smart-webcomponents-angular/multisplitbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, MultiSplitButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.NumberInput for Angular

NPM package: @smart-webcomponents-angular/numberinput

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-numberinput

Navigate to the created project folder 

cd smart-angular-numberinput

Setup the NumberInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/numberinput
  2. Once installed, import the NumberInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NumberInputModule } from '@smart-webcomponents-angular/numberinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, NumberInputModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.numberinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/numberinput/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/numberinput/styles/smart.numberinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/numberinput/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.NumberInput</b> is an input that allows you to easily enter and
        format numbers. It uses the Intl.NumberFormat API for formatting the numbers.</p>
</div>
	<h2>Styling and Appearance</h2>
	<h3>Default "1000"</h3>
<smart-number-input #numberinput [placeholder]="'Please Enter a Number'"></smart-number-input>
	<h3>Underlined</h3>
<smart-number-input #numberinput2 class="underlined" [placeholder]="'Please Enter a Number'"></smart-number-input>
	<h3>Outlined</h3>
<smart-number-input #numberinput3 class="outlined" [placeholder]="'Please Enter a Number'"></smart-number-input>
	<h2>Number Formats</h2>
	<h3>Number "1000.42"</h3>
<smart-number-input #numberinput4 [value]="1000.42" id="numericInput" [placeholder]="'Please Enter a Number'"></smart-number-input>
	<h4>Currency "$1000.42"</h4>
<smart-number-input #numberinput5 [value]="1000.42" id="currencyInput" [placeholder]="'Please Enter a Currency'"></smart-number-input>
	<h4>Accounting "($1000.42)"</h4>
<smart-number-input #numberinput6 [value]="-1000.42" [min]="-9999" id="accountingInput"
[placeholder]="'Please Enter a Currency'"></smart-number-input>
	<h4>Currency Localized "1000,42 EUR"</h4>
<smart-number-input #numberinput7 [value]="1000.42" id="currencyInputLocalized"
[placeholder]="'Please Enter a Currency'"></smart-number-input>
	<h4>Percent "10%"</h4>
<smart-number-input #numberinput8 [value]="10" id="percentInput" [placeholder]="'Please Enter a Percent'"></smart-number-input>
	<h4>Custom "10 litres"</h4>
<smart-number-input #numberinput9 [value]="10" id="customInput" [placeholder]="'Please Enter litres'"></smart-number-input>
<br/>
<br/>
<br/>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { NumberInputComponent } from '@smart-webcomponents-angular/numberinput';


@Component({
    selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('numberinput', { read: NumberInputComponent, static: false }) numberinput!: NumberInputComponent;
	@ViewChild('numberinput2', { read: NumberInputComponent, static: false }) numberinput2!: NumberInputComponent;
	@ViewChild('numberinput3', { read: NumberInputComponent, static: false }) numberinput3!: NumberInputComponent;
	@ViewChild('numberinput4', { read: NumberInputComponent, static: false }) numericInput!: NumberInputComponent;
	@ViewChild('numberinput5', { read: NumberInputComponent, static: false }) currencyInput!: NumberInputComponent;
	@ViewChild('numberinput6', { read: NumberInputComponent, static: false }) accountingInput!: NumberInputComponent;
	@ViewChild('numberinput7', { read: NumberInputComponent, static: false }) currencyInputLocalized!: NumberInputComponent;
	@ViewChild('numberinput8', { read: NumberInputComponent, static: false }) percentInput!: NumberInputComponent;
	@ViewChild('numberinput9', { read: NumberInputComponent, static: false }) customInput!: NumberInputComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
    	this.numericInput.numberFormat = { minimumFractionDigits: 2 };
    	this.currencyInput.numberFormat = { style: 'currency', currency: 'USD' };
    	this.currencyInputLocalized.numberFormat = { style: 'currency', currency: 'EUR' };
    	this.currencyInputLocalized.locale = 'de';
    	this.accountingInput.numberFormat = { style: 'currency', currency: 'USD', currencySign: 'accounting' };
    	this.percentInput.numberFormat = { style: "percent" };
    	this.customInput.numberFormat = { style: "unit", unit: "liter", unitDisplay: "long" };
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NumberInputModule } from '@smart-webcomponents-angular/numberinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, NumberInputModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.NumericTextBox for Angular

NPM package: @smart-webcomponents-angular/numerictextbox

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-numerictextbox

Navigate to the created project folder 

cd smart-angular-numerictextbox

Setup the NumericTextBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/numerictextbox
  2. Once installed, import the NumericTextBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NumericTextBoxModule } from '@smart-webcomponents-angular/numerictextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, NumericTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.numerictextbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/numerictextbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/numerictextbox/styles/smart.numerictextbox.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/numerictextbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-numeric-text-box #numerictextbox id="myCustomElement" [inputFormat]="'floatingPoint'"
                        [value]="100" [spinButtons]="true" [spinButtonsPosition]="'right'" [spinButtonsStep]="1"
                        [enableMouseWheelAction]="true"></smart-numeric-text-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { NumericTextBoxComponent } from '@smart-webcomponents-angular/numerictextbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('numerictextbox', { read: NumericTextBoxComponent, static: false }) numerictextbox!: NumericTextBoxComponent;
	
 
	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 { NumericTextBoxModule } from '@smart-webcomponents-angular/numerictextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, NumericTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Pager for Angular

NPM package: @smart-webcomponents-angular/pager

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-pager

Navigate to the created project folder 

cd smart-angular-pager

Setup the Pager

  1. Download and install the package.
    npm install @smart-webcomponents-angular/pager
  2. Once installed, import the PagerModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { PagerModule } from '@smart-webcomponents-angular/pager';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PagerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.pager.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/pager/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/pager/styles/smart.pager.css",
				"./node_modules/@smart-webcomponents-angular/pager/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-pager #pager [showPrevNextNavigationButtons]="true" [showFirstLastNavigationButtons]="true"
    [showPageIndexSelectors]="true" [pagesCount]="5" [pageIndexSelectors]="5"></smart-pager>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { PagerComponent } from '@smart-webcomponents-angular/pager';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('pager', { read: PagerComponent, static: false }) pager!: PagerComponent;
	
 
	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 { PagerModule } from '@smart-webcomponents-angular/pager';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PagerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.PasswordInput for Angular

NPM package: @smart-webcomponents-angular/passwordinput

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-passwordinput

Navigate to the created project folder 

cd smart-angular-passwordinput

Setup the PasswordInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/passwordinput
  2. Once installed, import the PasswordInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { PasswordInputModule } from '@smart-webcomponents-angular/passwordinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PasswordInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.passwordinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.Input</b> is a simple input that can have a predefined options
        list.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-input #input [placeholder]='"Empty"'></smart-input>
<div class="options">
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { PasswordInputComponent } from '@smart-webcomponents-angular/passwordinput';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('input', { read: PasswordInputComponent, static: false }) input!: PasswordInputComponent;
    @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton!: RadioButtonComponent;
    @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2!: RadioButtonComponent;
    @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3!: RadioButtonComponent;

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code
        const input = this.input;

        document.querySelector('.options').addEventListener('change', function (event) {
            const target = event.target as HTMLElement,
                inputClassList = input.nativeElement.classList;

            if (target.classList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { PasswordInputModule } from '@smart-webcomponents-angular/passwordinput';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PasswordInputModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.PasswordTextBox for Angular

NPM package: @smart-webcomponents-angular/passwordtextbox

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-passwordtextbox

Navigate to the created project folder 

cd smart-angular-passwordtextbox

Setup the PasswordTextBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/passwordtextbox
  2. Once installed, import the PasswordTextBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { PasswordTextBoxModule } from '@smart-webcomponents-angular/passwordtextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PasswordTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.passwordtextbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/passwordtextbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/passwordtextbox/styles/smart.passwordtextbox.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/passwordtextbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">Simple password field.</div>
<smart-password-text-box #passwordtextbox [placeholder]="'Your password'"></smart-password-text-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { PasswordTextBoxComponent } from '@smart-webcomponents-angular/passwordtextbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('passwordtextbox', { read: PasswordTextBoxComponent, static: false }) passwordtextbox!: PasswordTextBoxComponent;
	
 
	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 { PasswordTextBoxModule } from '@smart-webcomponents-angular/passwordtextbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PasswordTextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.PivotTable for Angular

NPM package: @smart-webcomponents-angular/pivottable

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-pivottable

Navigate to the created project folder 

cd smart-angular-pivottable

Setup the PivotTable

  1. Download and install the package.
    npm install @smart-webcomponents-angular/pivottable
  2. Once installed, import the PivotTableModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { PivotTableModule } from '@smart-webcomponents-angular/pivottable';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PivotTableModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.pivottable.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/table/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/table/styles/smart.table.css",
				"./node_modules/@smart-webcomponents-angular/pivottable/styles/smart.pivottable.css",
				"./node_modules/@smart-webcomponents-angular/table/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">This demo showcases the basic functionality of smart-pivot-table
    - a table of statistics that summarizes tabular data.</div>
<smart-pivot-table #pivottable id="pivotTable" [dataSource]="dataSource" [freezeHeader]="freezeHeader"
    [grandTotal]="grandTotal" [keyboardNavigation]="keyboardNavigation" [columns]="columns"></smart-pivot-table>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { PivotTableComponent } from '@smart-webcomponents-angular/pivottable';
import { GetData } from '../assets/data';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('pivottable', { read: PivotTableComponent, static: false }) pivottable!: PivotTableComponent;

    dataSource = new window.Smart.DataAdapter({
        dataSource: GetData(50),
        dataFields: [
            'firstName: string',
            'lastName: string',
            'productName: string',
            'quantity: number',
            'price: number',
            'date: date'
        ]
    });
    freezeHeader = true;
    grandTotal = true;
    keyboardNavigation = true;
    columns = [
        { label: 'First Name', dataField: 'firstName', dataType: 'string' },
        { label: 'Last Name', dataField: 'lastName', dataType: 'string', allowRowGroup: true, rowGroup: true },
        { label: 'Product Name', dataField: 'productName', dataType: 'string', allowPivot: true, pivot: true },
        { label: 'Quantity', dataField: 'quantity', dataType: 'number', summary: 'sum' },
        { label: 'Price', dataField: 'price', dataType: 'number', summary: 'sum', summarySettings: { prefix: '$', decimalPlaces: 2 } },
        { label: 'Date Purchased', dataField: 'date', dataType: 'date' } // column is not rendered, because it is neither "pivot", "rowGroup", nor it has "summary"
    ];

    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 { PivotTableModule } from '@smart-webcomponents-angular/pivottable';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, PivotTableModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ProgressBar for Angular

NPM package: @smart-webcomponents-angular/progressbar

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-progressbar

Navigate to the created project folder 

cd smart-angular-progressbar

Setup the ProgressBar

  1. Download and install the package.
    npm install @smart-webcomponents-angular/progressbar
  2. Once installed, import the ProgressBarModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ProgressBarModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.progressbar.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.progressbar.css",
				"./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-progress-bar #progressbar id="progressbar1" [value]="50"></smart-progress-bar>
<smart-progress-bar #progressbar2 id="progressbar2" [orientation]="'vertical'" [value]="50"></smart-progress-bar>
<smart-circular-progress-bar id="progressbar3" [value]="50"></smart-circular-progress-bar>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ProgressBarComponent } from '@smart-webcomponents-angular/progressbar';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('progressbar', { read: ProgressBarComponent, static: false }) progressbar!: ProgressBarComponent;
	@ViewChild('progressbar2', { read: ProgressBarComponent, static: false }) progressbar2!: ProgressBarComponent;
	
 
	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 { ProgressBarModule } from '@smart-webcomponents-angular/progressbar';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ProgressBarModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.QueryBuilder for Angular

NPM package: @smart-webcomponents-angular/querybuilder

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-querybuilder

Navigate to the created project folder 

cd smart-angular-querybuilder

Setup the QueryBuilder

  1. Download and install the package.
    npm install @smart-webcomponents-angular/querybuilder
  2. Once installed, import the QueryBuilderModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { QueryBuilderModule } from '@smart-webcomponents-angular/querybuilder';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, QueryBuilderModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.querybuilder.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/querybuilder/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/querybuilder/styles/smart.querybuilder.css",
				"./node_modules/@smart-webcomponents-angular/querybuilder/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">The Query Builder component allows you to build complex quieries through
    UI. The output of the component is a JSON object with the query.</div>
<smart-query-builder
#querybuilder id="queryBuilder"></smart-query-builder>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { QueryBuilderComponent } from '@smart-webcomponents-angular/querybuilder';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('querybuilder', { read: QueryBuilderComponent, static: false }) querybuilder!: QueryBuilderComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    window.Smart('#queryBuilder', class {
        get properties() {
            return {
                allowDrag: true,
                fields: [
                    { label: 'Id', dataField: 'id', dataType: 'number' },
                    { label: 'Product', dataField: 'productName', dataType: 'string' },
                    { label: 'Unit Price', dataField: 'price', dataType: 'number' },
                    { label: 'Purchased', dataField: 'purchased', dataType: 'datetime' },
                    { label: 'Available', dataField: 'available', dataType: 'boolean' }
                ]
            };
        }
    });

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { QueryBuilderModule } from '@smart-webcomponents-angular/querybuilder';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, QueryBuilderModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.RadioButton for Angular

NPM package: @smart-webcomponents-angular/radiobutton

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-radiobutton

Navigate to the created project folder 

cd smart-angular-radiobutton

Setup the RadioButton

  1. Download and install the package.
    npm install @smart-webcomponents-angular/radiobutton
  2. Once installed, import the RadioButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.radiobutton.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-radio-button #radiobutton>Radio Button 1</smart-radio-button>
<smart-radio-button #radiobutton2 [checked]="true">Radio Button 2</smart-radio-button>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton!: RadioButtonComponent;
	@ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2!: RadioButtonComponent;
	
 
	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 { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Rating for Angular

NPM package: @smart-webcomponents-angular/rating

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-rating

Navigate to the created project folder 

cd smart-angular-rating

Setup the Rating

  1. Download and install the package.
    npm install @smart-webcomponents-angular/rating
  2. Once installed, import the RatingModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';



import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule,  ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.rating.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-rating></smart-rating>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	
 
	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 { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule,  ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.RepeatButton for Angular

NPM package: @smart-webcomponents-angular/repeatbutton

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-repeatbutton

Navigate to the created project folder 

cd smart-angular-repeatbutton

Setup the RepeatButton

  1. Download and install the package.
    npm install @smart-webcomponents-angular/repeatbutton
  2. Once installed, import the RepeatButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar';import { RepeatButtonModule } from '@smart-webcomponents-angular/repeatbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ProgressBarModule, RepeatButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.repeatbutton.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.progressbar.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="smart-demo-container">
    <div class="module">
        <p>Repeat buttons are normal buttons that repeat a single action until release.</p>
        <p>The repeat button can simply trigger an action multiple times depending
            on the time interval applied.</p>
    </div>
    <div class="module">
        <div class="repeat-buttons-container">
            <smart-repeat-button #repeatbutton><i class="material-icons">keyboard_arrow_left</i>
            </smart-repeat-button>
            <smart-repeat-button #repeatbutton2><i class="material-icons">keyboard_arrow_right</i>
            </smart-repeat-button>
            <smart-repeat-button #repeatbutton3><i class="material-icons">keyboard_arrow_up</i>
            </smart-repeat-button>
            <smart-repeat-button #repeatbutton4><i class="material-icons">keyboard_arrow_down</i>
            </smart-repeat-button>
        </div>
        <p>Repeat buttons can be used for navigation.</p>
    </div>
    <div class="module">
        <div class="repeat-buttons-container">
            <smart-repeat-button #repeatbutton5><i class="material-icons">replay_10</i>
            </smart-repeat-button>
            <smart-repeat-button #repeatbutton6><i class="material-icons">forward_10</i>
            </smart-repeat-button>
        </div>
        <p>A repeat button can also be used to configure a range control.</p>
    </div>
    </section>
    <section id="repeat-button-demo">
        <div class="module">
             <h2>Demo usage</h2>
            <br />
            <p>Repeating actions can be performed using Repeat buttons.</p>
        </div>
        <div class="module">
            <div class="repeat-buttons-container">
                <smart-repeat-button #repeatbutton7 id="progressUp"><i class="material-icons">arrow_upward</i>
                </smart-repeat-button>
                <smart-repeat-button #repeatbutton8 id="progressDown"><i class="material-icons">arrow_downward</i>
                </smart-repeat-button>
            </div>
            <p>Repeat buttons that control the fill of the progress bar.</p>
        </div>
        <div class="module">
            <div class="progress-bar-container">
                <smart-progress-bar #progressbar id="progressBar" orientation="vertical"
                inverted show-progress-value value="5"></smart-progress-bar>
                <smart-circular-progress-bar id="progressBarCircular"
                show-progress-value value="5"></smart-circular-progress-bar>
            </div>
            <p>Progress bars : vertical and circular.</p>
        </div>
        <div class="module">
            <p>Repeat button nested inside a Circular progress bar.</p>
        </div>
        <div class="module">
            <div class="progress-bar-container">
                <smart-circular-progress-bar id="progressBarCircularControl" value="25">
                    <smart-repeat-button #repeatbutton9 id="incrementButton"><i class="material-icons">arrow_upward</i>
                    </smart-repeat-button>
                    <smart-repeat-button #repeatbutton10 id="decrementButton"><i class="material-icons">arrow_downward</i>
                    </smart-repeat-button>
                </smart-circular-progress-bar>
            </div>
        </div>
    </section>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ProgressBarComponent } from '@smart-webcomponents-angular/progressbar';
import { RepeatButtonComponent } from '@smart-webcomponents-angular/repeatbutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('progressbar', { read: ProgressBarComponent, static: false }) progressbar!: ProgressBarComponent;
	@ViewChild('repeatbutton', { read: RepeatButtonComponent, static: false }) repeatbutton!: RepeatButtonComponent;
	@ViewChild('repeatbutton2', { read: RepeatButtonComponent, static: false }) repeatbutton2!: RepeatButtonComponent;
	@ViewChild('repeatbutton3', { read: RepeatButtonComponent, static: false }) repeatbutton3!: RepeatButtonComponent;
	@ViewChild('repeatbutton4', { read: RepeatButtonComponent, static: false }) repeatbutton4!: RepeatButtonComponent;
	@ViewChild('repeatbutton5', { read: RepeatButtonComponent, static: false }) repeatbutton5!: RepeatButtonComponent;
	@ViewChild('repeatbutton6', { read: RepeatButtonComponent, static: false }) repeatbutton6!: RepeatButtonComponent;
	@ViewChild('repeatbutton7', { read: RepeatButtonComponent, static: false }) repeatbutton7!: RepeatButtonComponent;
	@ViewChild('repeatbutton8', { read: RepeatButtonComponent, static: false }) repeatbutton8!: RepeatButtonComponent;
	@ViewChild('repeatbutton9', { read: RepeatButtonComponent, static: false }) repeatbutton9!: RepeatButtonComponent;
	@ViewChild('repeatbutton10', { read: RepeatButtonComponent, static: false }) repeatbutton10!: RepeatButtonComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        let hoverArea = document.getElementById('hover-area'), floatingHoverButton = document.getElementById('floating-hover-action'), floatingClickButton = document.getElementById('floating-click-action'), toggleButtons = document.getElementsByClassName('exclusive-selection'), progressBar = document.getElementById('progressBar'), circularProgressBar = document.getElementById('progressBarCircular');
        for (let i = 0; i < toggleButtons.length; i++) {
            toggleButtons[i].addEventListener('change', function (event) {
                if (event.detail.value) {
                    for (let k = 0; k < toggleButtons.length; k++) {
                        if (toggleButtons[k] !== this) {
                            toggleButtons[k].checked = false;
                        }
                    }
                }
            });
        }
        document.getElementById('progressUp').addEventListener('click', function () {
            progressBar.value = Math.min(progressBar.max, progressBar.value + 1);
            circularProgressBar.value = Math.min(circularProgressBar.max, circularProgressBar.value + 1);
        });
        document.getElementById('progressDown').addEventListener('click', function () {
            progressBar.value = Math.max(progressBar.min, progressBar.value - 1);
            circularProgressBar.value = Math.max(circularProgressBar.min, circularProgressBar.value - 1);
        });
        document.getElementById('incrementButton').addEventListener('click', function () {
            let progressBar = document.getElementById('progressBarCircularControl');
            progressBar.value = Math.min(progressBar.max, progressBar.value + 1);
        });
        document.getElementById('decrementButton').addEventListener('click', function () {
            let progressBar = document.getElementById('progressBarCircularControl');
            progressBar.value = Math.max(progressBar.min, progressBar.value - 1);
        });
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar';import { RepeatButtonModule } from '@smart-webcomponents-angular/repeatbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ProgressBarModule, RepeatButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Scheduler for Angular

NPM package: @smart-webcomponents-angular/scheduler

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-scheduler

Navigate to the created project folder 

cd smart-angular-scheduler

Setup the Scheduler

  1. Download and install the package.
    npm install @smart-webcomponents-angular/scheduler
  2. Once installed, import the SchedulerModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';
import { CalendarModule } from '@smart-webcomponents-angular/calendar';
import { InputModule } from '@smart-webcomponents-angular/input';
import { TreeModule } from '@smart-webcomponents-angular/tree';
import { SchedulerModule } from '@smart-webcomponents-angular/scheduler';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, CalendarModule, InputModule, TreeModule, SchedulerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.scheduler.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/calendar/styles/smart.calendar.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/tree/styles/smart.tree.css",
				"./node_modules/@smart-webcomponents-angular/scheduler/styles/smart.scheduler.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div id="primaryContainer" #primaryContainer>
    <div id="header">
        <smart-button #button id="toggleButton" (onClick)="handleToggle()"></smart-button>
        <div id="title">Scheduler</div>
        <smart-button #button2 id="addNew" class="floating" (onClick)="addNew()"><span>Create</span>
        </smart-button>
    </div>
    <div class="content">
        <section id="sideA">
            <div class="button-container">
                <div id="logo"></div>
            </div>
            <div class="controls-container">
                <smart-calendar #calendar id="calendar" [scrollButtonsPosition]="scrollButtonsPosition" (onChange)="handleCalendarChange($event)">
                </smart-calendar>
                <smart-input #input id="searchBar" class="underlined" [placeholder]="'Search for people'"></smart-input>
                <smart-tree #tree id="tree" [selectionMode]="'checkBox'" [toggleElementPosition]="'far'"
                    (onChange)="handleTreeChange($event)">
                    <smart-tree-items-group [expanded]="true">My calendars
                        <smart-tree-item [value]="'birthday'" [selected]="true">Birthdays</smart-tree-item>
                        <smart-tree-item [value]="'holiday'" [selected]="true">Holidays</smart-tree-item>
                        <smart-tree-item [value]="'event'" [selected]="true">Events</smart-tree-item>
                    </smart-tree-items-group>
                </smart-tree>
            </div>
        </section>
        <section id="sideB">
            <smart-scheduler #scheduler id="scheduler" [dataSource]="dataSource" [view]="view" [views]="views"
                [nonworkingDays]="nonworkingDays" [dataSource]="dataSource" [firstDayOfWeek]="firstDayOfWeek"
                [disableDateMenu]="disableDateMenu" [currentTimeIndicator]="currentTimeIndicator"
                (onDragEnd)="updateData($event)" (onResizeEnd)="updateData($event)" (onItemUpdate)="updateData($event)"
                (onItemRemove)="updateData($event)" (onDateChange)="handleDateChange($event)">
            </smart-scheduler>
        </section>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation, ElementRef } from '@angular/core';
import { ButtonComponent } from '@smart-webcomponents-angular/button';
import { CalendarComponent } from '@smart-webcomponents-angular/calendar';
import { InputComponent } from '@smart-webcomponents-angular/input';
import { TreeComponent, Tree, TreeItem } from '@smart-webcomponents-angular/tree';
import { SchedulerComponent, SchedulerDataSource, SchedulerViewType } from '@smart-webcomponents-angular/scheduler';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('button', { read: ButtonComponent, static: false }) button!: ButtonComponent;
    @ViewChild('button2', { read: ButtonComponent, static: false }) button2!: ButtonComponent;
    @ViewChild('calendar', { read: CalendarComponent, static: false }) calendar!: CalendarComponent;
    @ViewChild('input', { read: InputComponent, static: false }) input!: InputComponent;
    @ViewChild('tree', { read: TreeComponent, static: false }) tree!: TreeComponent;
    @ViewChild('scheduler', { read: SchedulerComponent, static: false }) scheduler!: SchedulerComponent;
    @ViewChild('primaryContainer', { read: ElementRef, static: false }) primaryContainer!: ElementRef;

    today = new Date();

    thanksgiving = (() => {
        const tempDate = new Date(this.today.getFullYear(), 10, 1);

        //4th Thursday of November
        tempDate.setDate(tempDate.getDate() - tempDate.getDay() + 25);
        return tempDate;
    })();

    data: any[] = (() => {
        const currentDate = this.today.getDate(),
            currentYear = this.today.getFullYear(),
            currentMonth = this.today.getMonth();

        return [
            {
                label: 'Brochure Design Review',
                dateStart: new Date(currentYear, currentMonth, 10, 13, 15),
                dateEnd: new Date(currentYear, currentMonth, 12, 16, 15),
                status: 'tentative',
                class: 'event'
            }, {
                label: 'Website Re-Design Plan',
                dateStart: new Date(currentYear, currentMonth, 16, 16, 45),
                dateEnd: new Date(currentYear, currentMonth, 18, 11, 15),
                class: 'event'
            }, {
                label: 'Update Sales Strategy Documents',
                dateStart: new Date(currentYear, currentMonth, 2, 12, 0),
                dateEnd: new Date(currentYear, currentMonth, 2, 13, 45),
                class: 'event',
                repeat: {
                    repeatFreq: 'daily',
                    repeatInterval: 2,
                    repeatEnd: 5,
                    exceptions: [
                        {
                            date: new Date(currentYear, currentMonth, 4, 12, 0),
                            label: 'Employee on sick leave. Reschedule for next day',
                            dateStart: new Date(currentYear, currentMonth, 5),
                            dateEnd: new Date(currentYear, currentMonth, 6),
                            status: 'outOfOffice',
                            backgroundColor: '#F06292'
                        },
                        {
                            date: new Date(currentYear, currentMonth, 8, 12, 0),
                            label: 'Employee on sick leave. Reschedule for next day',
                            dateStart: new Date(currentYear, currentMonth, 9),
                            dateEnd: new Date(currentYear, currentMonth, 10),
                            status: 'outOfOffice',
                            backgroundColor: '#FFA000'
                        }
                    ]
                }
            }, {
                label: 'Non-Compete Agreements',
                dateStart: new Date(currentYear, currentMonth, currentDate - 1, 8, 15),
                dateEnd: new Date(currentYear, currentMonth, currentDate - 1, 9, 0),
                status: 'outOfOffice',
                class: 'event'
            }, {
                label: 'Approve Hiring of John Jeffers',
                dateStart: new Date(currentYear, currentMonth, currentDate + 1, 10, 0),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 11, 15),
                notifications: [
                    {
                        interval: 1,
                        type: 'days',
                        time: [this.today.getHours(), this.today.getMinutes()],
                        message: 'Approve Hiring of John Jeffers tomorrow',
                        iconType: 'success'
                    }
                ],
                status: 'busy',
                class: 'event'
            }, {
                label: 'Update NDA Agreement',
                dateStart: new Date(currentYear, currentMonth, currentDate - 2, 11, 45),
                dateEnd: new Date(currentYear, currentMonth, currentDate - 2, 13, 45),
                class: 'event'
            }, {
                label: 'Update Employee Files with New NDA',
                dateStart: new Date(currentYear, currentMonth, currentDate + 2, 14, 0),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 2, 16, 45),
                class: 'event'
            }, {
                label: 'Compete Agreements',
                dateStart: new Date(currentYear, currentMonth, currentDate, this.today.getHours(), this.today.getMinutes() + 15),
                dateEnd: new Date(currentYear, currentMonth, currentDate, this.today.getHours() + 1, 45),
                notifications: [
                    {
                        interval: 0,
                        type: 'days',
                        time: [this.today.getHours(), this.today.getMinutes() + 1],
                        message: 'Compete Agreements in 15 minutes',
                        iconType: 'time'
                    },
                    {
                        interval: 0,
                        type: 'days',
                        time: [this.today.getHours(), this.today.getMinutes() + 2],
                        message: 'Compete Agreements in 14 minutes',
                        iconType: 'warning'
                    }
                ],
                status: 'outOfOffice',
                class: 'event'
            }, {
                label: 'Approve Hiring of Mark Waterberg',
                dateStart: new Date(currentYear, currentMonth, currentDate + 3, 10, 0),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 3, 11, 15),
                status: 'busy',
                class: 'event'
            }, {
                label: 'Update Employees Information',
                dateStart: new Date(currentYear, currentMonth, currentDate, 14, 0),
                dateEnd: new Date(currentYear, currentMonth, currentDate, 16, 45),
                class: 'event',
                repeat: {
                    repeatFreq: 'weekly',
                    repeatInterval: 2,
                    repeatOn: [2, 4],
                    repeatEnd: new Date(2021, 5, 24)
                }
            },
            {
                label: 'Prepare Shipping Cost Analysis Report',
                dateStart: new Date(currentYear, currentMonth, currentDate + 1, 12, 30),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 13, 30),
                class: 'event',
                repeat: {
                    repeatFreq: 'monthly',
                    repeatInterval: 1,
                    repeatOn: [new Date(currentYear, currentMonth, currentDate + 1)]
                }
            }, {
                label: 'Provide Feedback on Shippers',
                dateStart: new Date(currentYear, currentMonth, currentDate + 1, 14, 15),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 16, 0),
                status: 'tentative',
                class: 'event'
            }, {
                label: 'Complete Shipper Selection Form',
                dateStart: new Date(currentYear, currentMonth, currentDate + 1, 8, 30),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 10, 0),
                class: 'event'
            }, {
                label: 'Upgrade Server Hardware',
                dateStart: new Date(currentYear, currentMonth, currentDate + 1, 12, 0),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 14, 15),
                class: 'event'
            }, {
                label: 'Upgrade Apps to Windows RT or stay with WinForms',
                dateStart: new Date(currentYear, currentMonth, currentDate + 2, this.today.getHours(), this.today.getMinutes() + 5),
                dateEnd: new Date(currentYear, currentMonth, currentDate + 2, this.today.getHours() + 2),
                status: 'tentative',
                class: 'event',
                repeat: {
                    repeatFreq: 'daily',
                    repeatInterval: 1,
                    repeatOn: currentDate + 1,
                    repeatEnd: new Date(currentYear, currentMonth, currentDate + 7),
                    exceptions: [{
                        date: new Date(currentYear, currentMonth, currentDate + 4, 10, 30),
                        label: 'A day off work',
                        status: 'busy',
                        backgroundColor: '#64DD17'
                    }]
                },
                notifications: [
                    {
                        interval: 2,
                        type: 'days',
                        time: [this.today.getHours(), this.today.getMinutes()],
                        message: 'Upgrade Apps to Windows RT in 5 minutes',
                        iconType: 'time'
                    }
                ],
            },
            {
                label: 'Peter\'s Birthday',
                dateStart: new Date(currentYear, currentMonth, 5),
                dateEnd: new Date(currentYear, currentMonth, 6),
                class: 'birthday'
            },
            {
                label: 'Michael\'s Brithday',
                dateStart: new Date(currentYear, currentMonth, 10),
                dateEnd: new Date(currentYear, currentMonth, 11),
                class: 'birthday'
            },
            {
                label: 'Christina\'s Birthday',
                dateStart: new Date(currentYear, currentMonth, 20),
                dateEnd: new Date(currentYear, currentMonth, 21),
                class: 'birthday'
            }, {
                label: 'Halloween',
                dateStart: new Date(currentYear, 9, 31),
                dateEnd: new Date(currentYear, 9, 32),
                class: 'holiday'
            }, {
                label: 'Marry Christmas',
                dateStart: new Date(currentYear, 11, 24),
                dateEnd: new Date(currentYear, 11, 26, 23, 59, 59),
                class: 'holiday'
            },
            {
                label: 'Thanksgiving',
                dateStart: this.thanksgiving,
                dateEnd: new Date(currentYear, 10, this.thanksgiving.getDate() + 1),
                class: 'holiday'
            },
            {
                label: 'Day after Thanksgiving',
                dateStart: new Date(currentYear, 10, this.thanksgiving.getDate() + 1),
                dateEnd: new Date(currentYear, 10, this.thanksgiving.getDate() + 2),
                class: 'holiday'
            },
            {
                label: 'Indipendence Day',
                dateStart: new Date(currentYear, 6, 4),
                dateEnd: new Date(currentYear, 6, 5),
                class: 'holiday'
            },
            {
                label: 'New Year\'s Eve',
                dateStart: new Date(currentYear, 11, 31),
                dateEnd: new Date(currentYear + 1, 0, 1),
                class: 'holiday'
            }
        ];
    })();

    view: SchedulerViewType = 'month';

    views: any[] = ['day',
        {
            type: 'week',
            hideWeekend: true,
        },
        {
            type: 'month',
            hideWeekend: true,
        }, 'agenda',
        {
            label: '4 days',
            value: 'workWeek',
            type: 'week',
            shortcutKey: 'X',
            hideWeekend: false,
            hideNonworkingWeekdays: true,
        }];

    nonworkingDays: number[] = this.getPastThreeWeekdays(this.today.getDay());

    dataSource: SchedulerDataSource[] = this.data;

    firstDayOfWeek: number = 1;

    disableDateMenu: boolean = true;

    currentTimeIndicator: boolean = true;

    getPastThreeWeekdays(weekday: number) {
        let weekdays = [];

        for (let i = 0; i < 3; i++) {
            weekdays.push((weekday - i + 7) % 7);
        }

        return weekdays;
    }

    updateData(event: CustomEvent) {
        const item = event.detail.item,
            data = this.data;

        for (let i = 0; i < data.length; i++) {
            const dataItem = data[i];

            if (dataItem.label === item.label && dataItem.class === item.class) {
                event.type === 'itemRemove' ? data.splice(i, 1) : data.splice(i, 1, item);
                return;
            }
        }
    }

    scrollButtonsPosition: string = 'far';

    handleDateChange(event: CustomEvent) {
        this.calendar.selectedDates = [event.detail.value];
    }

    handleTreeChange(event: CustomEvent) {
        const tree = event.target as Tree,
            types = tree.selectedIndexes.map((i) => (tree.getItem(i)).value);

        this.scheduler.dataSource = this.data.filter(d => types.indexOf(d.class) > -1);
    }

    handleCalendarChange(event: CustomEvent) {
        this.scheduler.dateCurrent = event.detail.value;
    }

    addNew() {
        this.scheduler.openWindow({ class: 'event' });
    }

    handleToggle() {
        const primaryContainer = this.primaryContainer.nativeElement;

        primaryContainer.classList.toggle('collapse');

        this.scheduler.disableDateMenu = !primaryContainer.classList.contains('collapse');
    }

    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 { ButtonModule } from '@smart-webcomponents-angular/button';
import { CalendarModule } from '@smart-webcomponents-angular/calendar';
import { InputModule } from '@smart-webcomponents-angular/input';
import { TreeModule } from '@smart-webcomponents-angular/tree';
import { SchedulerModule } from '@smart-webcomponents-angular/scheduler';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, CalendarModule, InputModule, TreeModule, SchedulerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ScrollBar for Angular

NPM package: @smart-webcomponents-angular/scrollbar

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-scrollbar

Navigate to the created project folder 

cd smart-angular-scrollbar

Setup the ScrollBar

  1. Download and install the package.
    npm install @smart-webcomponents-angular/scrollbar
  2. Once installed, import the ScrollBarModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ScrollBarModule } from '@smart-webcomponents-angular/scrollbar';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ScrollBarModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.scrollbar.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/scrollbar/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/scrollbar/styles/smart.scrollbar.css",
				"./node_modules/@smart-webcomponents-angular/scrollbar/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<section>
  <div>
    <h2>Scrollbars let users to select values by moving the scrollbar thumb.</h2>
    <div class="module">
      <p>Scrollbars are ideal components for adjusting settings that reflect intensity
        levels, such as volume, brightness, or color saturation.</p>
    </div>
  </div>
</section>
<section id="continuousSliders">
  <h2>Continuous scrollbar</h2>
  <div class="module">
    <p>Use continuous scrollbars for subjective settings that do not require
      a specific value for the user to make meaningful adjustments.</p>
  </div>
  <div class="module continuousSliderLight">
    <table>
      <tr>
        <td>
          <p>Normal</p>
        </td>
      </tr>
      <tr>
        <td>
          <smart-scroll-bar #scrollbar></smart-scroll-bar>
        </td>
      </tr>
      <tr>
        <td>
          <smart-scroll-bar #scrollbar2 max="100" value="50"></smart-scroll-bar>
        </td>
      </tr>
      <tr>
        <td>
          <smart-scroll-bar #scrollbar3 max="100" value="100"></smart-scroll-bar>
        </td>
      </tr>
      <tr>
        <td>
          <p>Disabled</p>
        </td>
      </tr>
      <tr>
        <td>
          <smart-scroll-bar #scrollbar4 [disabled]="true" max="100"></smart-scroll-bar>
        </td>
      </tr>
      <tr>
        <td>
          <smart-scroll-bar #scrollbar5 [disabled]="true" max="100" value="50"></smart-scroll-bar>
        </td>
      </tr>
      <tr>
        <td>
          <smart-scroll-bar #scrollbar6 [disabled]="true" max="100" value="100"></smart-scroll-bar>
        </td>
      </tr>
    </table>
  </div>
</section>
<section id="verticalSliders">
  <h2>Orientation</h2>
  <div class="module">
    <p>smartScrollBar can be horizontal or vertical depending on the orientation
      property.</p>
  </div>
  <div class="module">
    <div>
      <smart-scroll-bar #scrollbar7 max="100" value="50"></smart-scroll-bar>
      <br/>
      <br/>
      <smart-scroll-bar #scrollbar8 orientation="vertical" max="100" value="75"></smart-scroll-bar>
    </div>
    <br/>
    <p>Vertical scrollbars</p>
  </div>
</section>
<section id="demoSliders">
  <h2>Demo</h2>
  <div class="module">
    <p>ScrollBars are controls that are used for adjusting values precisely.</p>
  </div>
  <div class="module media-controls">
    <div>
      <h2>Volumes</h2>
      <div>
        <h3>Media volume</h3>
        <div id="mediaControl" class="controls"> <i class="material-icons">&#xE04D;</i>
          <smart-scroll-bar #scrollbar9 id="mediaSlider" max="100" value="25"></smart-scroll-bar>
        </div>
      </div>
      <div>
        <h3>Alarm volume</h3>
        <div id="alarmControl" class="controls"> <i class="material-icons">&#xE855;</i>
          <smart-scroll-bar #scrollbar10 id="alarmSlider" max="100" value="50"></smart-scroll-bar>
        </div>
      </div>
      <div>
        <h3>Ring volume</h3>
        <div id="ringControl" class="controls"> <i class="material-icons">&#xE7F4;</i>
          <smart-scroll-bar #scrollbar11 id="volumeSlider" max="100" value="75"></smart-scroll-bar>
        </div>
      </div>
    </div>
  </div>
  <div class="module power-controls">
    <div>
      <h2>Battery Saver Mode</h2>
      <div>
        <h3>Low battery alert on <b id="lowBatteryAlert">15</b> %</h3>
        <div id="mediaControl" class="controls"> <i class="material-icons">&#xE8B2;</i>
          <smart-scroll-bar #scrollbar12 id="lowBatterySlider" max="100" value="15" scale-type="integer">
          </smart-scroll-bar>
        </div>
      </div>
      <div>
        <h3>Power saver mode active on <b id="powerSaver">50</b>%</h3>
        <div id="alarmControl" class="controls"> <i class="material-icons">&#xE19C;</i>
          <smart-scroll-bar #scrollbar13 id="powerSaverSlider" max="100" value="50" scale-type="integer">
          </smart-scroll-bar>
        </div>
      </div>
    </div>
  </div>
</section>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ScrollBarComponent } from '@smart-webcomponents-angular/scrollbar';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('scrollbar', { read: ScrollBarComponent, static: false }) scrollbar!: ScrollBarComponent;
	@ViewChild('scrollbar2', { read: ScrollBarComponent, static: false }) scrollbar2!: ScrollBarComponent;
	@ViewChild('scrollbar3', { read: ScrollBarComponent, static: false }) scrollbar3!: ScrollBarComponent;
	@ViewChild('scrollbar4', { read: ScrollBarComponent, static: false }) scrollbar4!: ScrollBarComponent;
	@ViewChild('scrollbar5', { read: ScrollBarComponent, static: false }) scrollbar5!: ScrollBarComponent;
	@ViewChild('scrollbar6', { read: ScrollBarComponent, static: false }) scrollbar6!: ScrollBarComponent;
	@ViewChild('scrollbar7', { read: ScrollBarComponent, static: false }) scrollbar7!: ScrollBarComponent;
	@ViewChild('scrollbar8', { read: ScrollBarComponent, static: false }) scrollbar8!: ScrollBarComponent;
	@ViewChild('scrollbar9', { read: ScrollBarComponent, static: false }) scrollbar9!: ScrollBarComponent;
	@ViewChild('scrollbar10', { read: ScrollBarComponent, static: false }) scrollbar10!: ScrollBarComponent;
	@ViewChild('scrollbar11', { read: ScrollBarComponent, static: false }) scrollbar11!: ScrollBarComponent;
	@ViewChild('scrollbar12', { read: ScrollBarComponent, static: false }) scrollbar12!: ScrollBarComponent;
	@ViewChild('scrollbar13', { read: ScrollBarComponent, static: false }) scrollbar13!: ScrollBarComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        const mediaSlider = document.getElementById('mediaSlider'), alarmSlider = document.getElementById('alarmSlider'), volumeSlider = document.getElementById('volumeSlider'), lowBatterySlider = document.getElementById('lowBatterySlider'), powerSaverSlider = document.getElementById('powerSaverSlider');
        function setIcon(event) {
            let below = "", above = "", off = "";
            const slider = event.target;
            switch (slider) {
                case mediaSlider:
                    below = '';
                    above = '';
                    off = '';
                    break;
                case alarmSlider:
                    below = above = '';
                    off = '';
                    break;
                case volumeSlider:
                    below = '';
                    above = '';
                    off = '';
                    break;
            }
            if (slider.value === slider.min) {
                slider.previousElementSibling.innerHTML = off;
            }
            else if (slider.value < slider.max / 2) {
                slider.previousElementSibling.innerHTML = below;
            }
            else {
                slider.previousElementSibling.innerHTML = above;
            }
        }
        function setBatteryLevel(event) {
            const slider = event.target;
            if (slider === lowBatterySlider) {
                document.getElementById('lowBatteryAlert').textContent = slider.value.toString();
            }
            else {
                document.getElementById('powerSaver').textContent = slider.value.toString();
            }
        }
        mediaSlider.addEventListener('change', setIcon);
        alarmSlider.addEventListener('change', setIcon);
        volumeSlider.addEventListener('change', setIcon);
        lowBatterySlider.addEventListener('change', setBatteryLevel);
        powerSaverSlider.addEventListener('change', setBatteryLevel);
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ScrollBarModule } from '@smart-webcomponents-angular/scrollbar';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ScrollBarModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Slider for Angular

NPM package: @smart-webcomponents-angular/slider

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-slider

Navigate to the created project folder 

cd smart-angular-slider

Setup the Slider

  1. Download and install the package.
    npm install @smart-webcomponents-angular/slider
  2. Once installed, import the SliderModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SliderModule } from '@smart-webcomponents-angular/slider';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, SliderModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.slider.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/slider/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/slider/styles/smart.slider.css",
				"./node_modules/@smart-webcomponents-angular/slider/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="container">
    <div class="underlined">Horizontal slider</div>Value: <span id="horizontalSlider[value]" #horizontalSliderValue>30.00</span>
    <smart-slider #slider id="horizontalSlider" [showTooltip]="true" [orientation]="'horizontal'" [min]="0"
                  [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
    <br />
    <div class="underlined">Vertical slider</div>Value: <span id="verticalSlider[value]" #verticalSliderValue>30.00</span>
    <smart-slider #slider2 id="verticalSlider" [showTooltip]="true" [tooltipPosition]="'far'" [orientation]="'vertical'"
                  [min]="0" [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
</div>
<div class="container">
    <div class="underlined">Inverted horizontal slider</div>Value: <span id="invertedHorizontalSlider[value]" #invertedHorizontalSliderValue>30.00</span>
    <smart-slider #slider3 id="invertedHorizontalSlider" [showTooltip]="true" [orientation]="'horizontal'"
                  [inverted]="true" [min]="0" [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
    <br />
    <div class="underlined">Inverted vertical slider</div>Value: <span id="invertedVerticalSlider[value]" #invertedVerticalSliderValue>30.00</span>
    <smart-slider #slider4 id="invertedVerticalSlider" [showTooltip]="true" [tooltipPosition]="'far'"
                  [orientation]="'vertical'" [inverted]="true" [min]="0" [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core';
import { SliderComponent } from '@smart-webcomponents-angular/slider';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('slider', { read: SliderComponent, static: false }) slider!: SliderComponent;
    @ViewChild('slider2', { read: SliderComponent, static: false }) slider2!: SliderComponent;
    @ViewChild('slider3', { read: SliderComponent, static: false }) slider3!: SliderComponent;
    @ViewChild('slider4', { read: SliderComponent, static: false }) slider4!: SliderComponent;
    @ViewChild('horizontalSliderValue', { read: ElementRef, static: false }) horizontalSliderValue!: ElementRef;
    @ViewChild('verticalSliderValue', { read: ElementRef, static: false }) verticalSliderValue!: ElementRef;
    @ViewChild('invertedHorizontalSliderValue', { read: ElementRef, static: false }) invertedHorizontalSliderValue!: ElementRef;
    @ViewChild('invertedVerticalSliderValue', { read: ElementRef, static: false }) invertedVerticalSliderValue!: ElementRef;

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.
        const that = this,
            sliders = [that.slider, that.slider2, that.slider3, that.slider4];

        for (let i = 0; i < sliders.length; i++) {
            const slider = sliders[i];

            slider.addEventListener('change', function (event: CustomEvent) {
                const value = event.detail.value;
                that[slider.nativeElement.id + 'Value'].nativeElement.innerHTML = parseFloat('' + value).toFixed(2);
            });
        }
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SliderModule } from '@smart-webcomponents-angular/slider';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, SliderModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Sortable for Angular

NPM package: @smart-webcomponents-angular/sortable

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-sortable

Navigate to the created project folder 

cd smart-angular-sortable

Setup the Sortable

  1. Download and install the package.
    npm install @smart-webcomponents-angular/sortable
  2. Once installed, import the SortableModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';import { SortableModule } from '@smart-webcomponents-angular/sortable';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, SortableModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.sortable.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css",
				"./node_modules/@smart-webcomponents-angular/sortable/styles/smart.sortable.css",
				"./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<em>Drag and drop to change list order</em>
<smart-sortable #sortable id="sortable"
items="li">
    <ol>
        <li>Strawberries</li>
        <li>Mango</li>
        <li>Watermelon</li>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Grapes</li>
        <li>Pineapples</li>
        <li>Oranges</li>
        <li>Raspberries</li>
        <li>Peaches</li>
        <li>Cherries</li>
        <li>Kiwi</li>
        <li>Blueberries</li>
        <li>Pomegranate</li>
        <li>Lemons</li>
    </ol>
</smart-sortable>
<div class="options">
    <smart-check-box #checkbox id="handle"><code>drag-mode="handle"</code>
    </smart-check-box>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { CheckBoxComponent } from '@smart-webcomponents-angular/checkbox';
import { SortableComponent } from '@smart-webcomponents-angular/sortable';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox!: CheckBoxComponent;
	@ViewChild('sortable', { read: SortableComponent, static: false }) sortable!: SortableComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        const sortable = document.getElementById('sortable');
        document.getElementById('handle').addEventListener('change', function () {
            if (event.detail.value) {
                sortable.dragMode = 'handle';
                sortable.handleVisibility = 'visible';
            }
            else {
                sortable.dragMode = 'item';
            }
        });
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox';import { SortableModule } from '@smart-webcomponents-angular/sortable';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, CheckBoxModule, SortableModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Splitter for Angular

NPM package: @smart-webcomponents-angular/splitter

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-splitter

Navigate to the created project folder 

cd smart-angular-splitter

Setup the Splitter

  1. Download and install the package.
    npm install @smart-webcomponents-angular/splitter
  2. Once installed, import the SplitterModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SplitterModule } from '@smart-webcomponents-angular/splitter';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, SplitterModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.splitter.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/splitter/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/splitter/styles/smart.splitter.css",
				"./node_modules/@smart-webcomponents-angular/splitter/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-splitter #splitter orientation="horizontal" id="horizontalSplitter"></smart-splitter>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { SplitterComponent } from '@smart-webcomponents-angular/splitter';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('splitter', { read: SplitterComponent, static: false }) splitter: SplitterComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    
        const splitter = document.querySelector('smart-splitter');
        splitter.dataSource = [
            {
                id: 'item0',
                size: '50%',
                content: '' +
                    'Item 1' +
                    'Item 2' +
                    'Item 3' +
                    ''
            },
            {
                size: '25%',
                id: 'item4',
                content: 'Item 4',
            },
            {
                id: 'item5',
                content: 'Item 5'
            }
        ];
    

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SplitterModule } from '@smart-webcomponents-angular/splitter';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, SplitterModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.SwitchButton for Angular

NPM package: @smart-webcomponents-angular/switchbutton

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-switchbutton

Navigate to the created project folder 

cd smart-angular-switchbutton

Setup the SwitchButton

  1. Download and install the package.
    npm install @smart-webcomponents-angular/switchbutton
  2. Once installed, import the SwitchButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SwitchButtonModule } from '@smart-webcomponents-angular/switchbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, SwitchButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.switchbutton.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/switchbutton/styles/smart.switchbutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<p>On/off switches toggle the state of a single settings option. The option
    that the switch controls, as well as the state it’s in, should be made
    clear from the corresponding inline label. Switches take on the same visual
    properties of the radio button.</p>
<br/>
<br/>
<smart-switch-button #switchbutton checked></smart-switch-button>
<br/>
<br/>
<smart-switch-button></smart-switch-button>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { SwitchButtonComponent } from '@smart-webcomponents-angular/switchbutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('switchbutton', { read: SwitchButtonComponent, static: false }) switchbutton: SwitchButtonComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
    // Your code here

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SwitchButtonModule } from '@smart-webcomponents-angular/switchbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, SwitchButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Table for Angular

NPM package: @smart-webcomponents-angular/table

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-table

Navigate to the created project folder 

cd smart-angular-table

Setup the Table

  1. Download and install the package.
    npm install @smart-webcomponents-angular/table
  2. Once installed, import the TableModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TableModule } from '@smart-webcomponents-angular/table';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TableModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.table.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/table/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/table/styles/smart.table.css",
				"./node_modules/@smart-webcomponents-angular/table/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">Our Table web component can be used to wrap or replace standard Tables
    and add different styles, hover effects, sorting by one or multiple columns,
    add, remove and update rows.</div>
<smart-table #table id="table">
    <table>
        <thead>
            <tr>
                <th scope="col">Country</th>
                <th scope="col">Area</th>
                <th scope="col">Population_Rural</th>
                <th scope="col">Population_Total</th>
                <th scope="col">GDP_Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Brazil</td>
                <td>8515767</td>
                <td>0.15</td>
                <td>205809000</td>
                <td>2353025</td>
            </tr>
            <tr>
                <td>China</td>
                <td>9388211</td>
                <td>0.46</td>
                <td>1375530000</td>
                <td>10380380</td>
            </tr>
            <tr>
                <td>France</td>
                <td>675417</td>
                <td>0.21</td>
                <td>64529000</td>
                <td>2846889</td>
            </tr>
            <tr>
                <td>Germany</td>
                <td>357021</td>
                <td>0.25</td>
                <td>81459000</td>
                <td>3859547</td>
            </tr>
            <tr>
                <td>India</td>
                <td>3287590</td>
                <td>0.68</td>
                <td>1286260000</td>
                <td>2047811</td>
            </tr>
            <tr>
                <td>Italy</td>
                <td>301230</td>
                <td>0.31</td>
                <td>60676361</td>
                <td>2147952</td>
            </tr>
            <tr>
                <td>Japan</td>
                <td>377835</td>
                <td>0.07</td>
                <td>126920000</td>
                <td>4616335</td>
            </tr>
            <tr>
                <td>Russia</td>
                <td>17098242</td>
                <td>0.26</td>
                <td>146544710</td>
                <td>1857461</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>9147420</td>
                <td>0.19</td>
                <td>323097000</td>
                <td>17418925</td>
            </tr>
            <tr>
                <td>United Kingdom</td>
                <td>244820</td>
                <td>0.18</td>
                <td>65097000</td>
                <td>2945146</td>
            </tr>
        </tbody>
    </table>
</smart-table>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TableComponent, TableColumn } from '@smart-webcomponents-angular/table';


@Component({
    selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('table', { read: TableComponent, static: false }) table!: TableComponent;
	
 
	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 { TableModule } from '@smart-webcomponents-angular/table';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TableModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Tabs for Angular

NPM package: @smart-webcomponents-angular/tabs

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-tabs

Navigate to the created project folder 

cd smart-angular-tabs

Setup the Tabs

  1. Download and install the package.
    npm install @smart-webcomponents-angular/tabs
  2. Once installed, import the TabsModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TabsModule } from '@smart-webcomponents-angular/tabs';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TabsModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.tabs.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/tabs/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/tabs/styles/smart.tabs.css",
				"./node_modules/@smart-webcomponents-angular/tabs/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-tabs #tabs class="demoTabs" [selectedIndex]="1">
    <smart-tab-item [label]="'TAB 1'">Content 1</smart-tab-item>
    <smart-tab-item [label]="'TAB 2'">Content 2</smart-tab-item>
    <smart-tab-item [label]="'TAB 3'">Content 3</smart-tab-item>
    <smart-tab-item [label]="'TAB 4'">Content 4</smart-tab-item>
</smart-tabs>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TabsComponent } from '@smart-webcomponents-angular/tabs';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('tabs', { read: TabsComponent, static: false }) tabs!: TabsComponent;
	
 
	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 { TabsModule } from '@smart-webcomponents-angular/tabs';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TabsModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Tank for Angular

NPM package: @smart-webcomponents-angular/tank

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-tank

Navigate to the created project folder 

cd smart-angular-tank

Setup the Tank

  1. Download and install the package.
    npm install @smart-webcomponents-angular/tank
  2. Once installed, import the TankModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TankModule } from '@smart-webcomponents-angular/tank';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TankModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.tank.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/tank/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/tank/styles/smart.tank.css",
				"./node_modules/@smart-webcomponents-angular/tank/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-tank #tank id="tank" [max]="100" [value]="22" [interval]="10"></smart-tank>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TankComponent } from '@smart-webcomponents-angular/tank';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('tank', { read: TankComponent, static: false }) tank!: TankComponent;
	
 
	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 { TankModule } from '@smart-webcomponents-angular/tank';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TankModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.TextArea for Angular

NPM package: @smart-webcomponents-angular/textarea

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-textarea

Navigate to the created project folder 

cd smart-angular-textarea

Setup the TextArea

  1. Download and install the package.
    npm install @smart-webcomponents-angular/textarea
  2. Once installed, import the TextAreaModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TextAreaModule } from '@smart-webcomponents-angular/textarea';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TextAreaModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.textarea.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.TextArea</b> is a simple TextArea that can have a predefined options
        list.</p>
    <p><b>RenderMode</b> radio buttons allow to change the appearance of the input.</p>
</div>
<smart-text-area #input [placeholder]='"Empty"'></smart-text-area>
<div class="options">
    <div class="option">
        <div class="description">Render Mode</div>
        <smart-radio-button #radiobutton [checked]="true" class="render-mode">Default</smart-radio-button>
        <smart-radio-button #radiobutton2 class="render-mode">Outlined</smart-radio-button>
        <smart-radio-button #radiobutton3 class="render-mode">Underlined</smart-radio-button>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TextAreaComponent } from '@smart-webcomponents-angular/textarea';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('input', { read: TextAreaComponent, static: false }) input!: TextAreaComponent;
    @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton!: RadioButtonComponent;
    @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2!: RadioButtonComponent;
    @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3!: RadioButtonComponent;

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code
        const input = this.input;

        document.querySelector('.options').addEventListener('change', function (event) {
            const target = event.target as HTMLElement,
                inputClassList = input.nativeElement.classList;

            if (target.classList.contains('render-mode')) {
                inputClassList.remove('underlined', 'outlined');

                const textContent = target.textContent.toLowerCase();

                if (textContent.indexOf('underlined') > -1) {
                    inputClassList.add('underlined');
                }
                else if (textContent.indexOf('outlined') > -1) {
                    inputClassList.add('outlined');
                }
            }
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TextAreaModule } from '@smart-webcomponents-angular/textarea';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TextAreaModule, RadioButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.TextBox for Angular

NPM package: @smart-webcomponents-angular/textbox

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-textbox

Navigate to the created project folder 

cd smart-angular-textbox

Setup the TextBox

  1. Download and install the package.
    npm install @smart-webcomponents-angular/textbox
  2. Once installed, import the TextBoxModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TextBoxModule } from '@smart-webcomponents-angular/textbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.textbox.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css",
				"./node_modules/@smart-webcomponents-angular/textbox/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-text-box #textbox [selectAllOnFocus]="true" [placeholder]="'smart Text Box'"></smart-text-box>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TextBoxComponent } from '@smart-webcomponents-angular/textbox';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('textbox', { read: TextBoxComponent, static: false }) textbox: TextBoxComponent;
	
 
	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 { TextBoxModule } from '@smart-webcomponents-angular/textbox';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TextBoxModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.TimeInput for Angular

NPM package: @smart-webcomponents-angular/timeinput

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-timeinput

Navigate to the created project folder 

cd smart-angular-timeinput

Setup the TimeInput

  1. Download and install the package.
    npm install @smart-webcomponents-angular/timeinput
  2. Once installed, import the TimeInputModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TimeInputModule } from '@smart-webcomponents-angular/timeinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TimeInputModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.timeinput.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/timeinput/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/timeinput/styles/smart.timeinput.css",
				"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
				"./node_modules/@smart-webcomponents-angular/timeinput/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-description">
    <p> <b>Smart.TimeInput</b> is an input that allows selection of a Time. It
        uses the Intl.DateTimeFormat API for formatting the time.</p>
</div>
	<h3>Default</h3>
<smart-time-input #timeinput [placeholder]="'Please Enter a Time'"></smart-time-input>
<br/>
<br/>
<br/>
	<h3>Underlined</h3>
<smart-time-input #timeinput2 class="underlined" [placeholder]="'Please Enter a Time'"></smart-time-input>
<br/>
<br/>
<br/>
	<h3>Outlined</h3>
<smart-time-input #timeinput3 class="outlined" [placeholder]="'Please Enter a Time'"></smart-time-input>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TimeInputComponent } from '@smart-webcomponents-angular/timeinput';


@Component({
    selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('timeinput', { read: TimeInputComponent, static: false }) timeinput!: TimeInputComponent;
	@ViewChild('timeinput2', { read: TimeInputComponent, static: false }) timeinput2!: TimeInputComponent;
	@ViewChild('timeinput3', { read: TimeInputComponent, static: false }) timeinput3!: TimeInputComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    "use strict";

	}	
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TimeInputModule } from '@smart-webcomponents-angular/timeinput';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TimeInputModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.TimePicker for Angular

NPM package: @smart-webcomponents-angular/timepicker

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-timepicker

Navigate to the created project folder 

cd smart-angular-timepicker

Setup the TimePicker

  1. Download and install the package.
    npm install @smart-webcomponents-angular/timepicker
  2. Once installed, import the TimePickerModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TimePickerModule } from '@smart-webcomponents-angular/timepicker';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, TimePickerModule],
    bootstrap: [AppComponent]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.timepicker.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css",
				"./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-time-picker #timepicker></smart-time-picker>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TimePickerComponent } from '@smart-webcomponents-angular/timepicker';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('timepicker', { read: TimePickerComponent, static: false }) timepicker!: TimePickerComponent;


    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 { TimePickerModule } from '@smart-webcomponents-angular/timepicker';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, TimePickerModule],
    bootstrap: [AppComponent]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Toast for Angular

NPM package: @smart-webcomponents-angular/toast

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-toast

Navigate to the created project folder 

cd smart-angular-toast

Setup the Toast

  1. Download and install the package.
    npm install @smart-webcomponents-angular/toast
  2. Once installed, import the ToastModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ToastModule } from '@smart-webcomponents-angular/toast';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ToastModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.toast.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/toast/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/toast/styles/smart.toast.css",
				"./node_modules/@smart-webcomponents-angular/toast/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-toast #toast [position]="'top-left'" [autoOpen]="true" [showCloseButton]="true" [type]="'mail'" class="blink">You
    have 2 new messages.</smart-toast>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ToastComponent } from '@smart-webcomponents-angular/toast';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('toast', { read: ToastComponent, static: false }) toast!: ToastComponent;
	
 
	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 { ToastModule } from '@smart-webcomponents-angular/toast';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ToastModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.ToggleButton for Angular

NPM package: @smart-webcomponents-angular/togglebutton

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-togglebutton

Navigate to the created project folder 

cd smart-angular-togglebutton

Setup the ToggleButton

  1. Download and install the package.
    npm install @smart-webcomponents-angular/togglebutton
  2. Once installed, import the ToggleButtonModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.togglebutton.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<div class="demo-horizontal-layout">
    <div>
        <div class="demo-buttons-group">
            <smart-toggle-button #togglebutton class="primary">Toggle Button</smart-toggle-button>
            <smart-toggle-button #togglebutton2
            class="primary raised">Raised Toggle Button</smart-toggle-button>
            <smart-toggle-button #togglebutton3
            class="primary outlined">Outlined Toggle Button</smart-toggle-button>
            <smart-toggle-button #togglebutton4
            class="primary flat">Flat Toggle Button</smart-toggle-button>
            <smart-toggle-button #togglebutton5
            class="primary floating"><span class="glyphicon glyphicon-cloud"></span>
            </smart-toggle-button>
        </div>
    </div>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ToggleButtonComponent } from '@smart-webcomponents-angular/button';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('togglebutton', { read: ToggleButtonComponent, static: false }) togglebutton!: ToggleButtonComponent;
	@ViewChild('togglebutton2', { read: ToggleButtonComponent, static: false }) togglebutton2!: ToggleButtonComponent;
	@ViewChild('togglebutton3', { read: ToggleButtonComponent, static: false }) togglebutton3!: ToggleButtonComponent;
	@ViewChild('togglebutton4', { read: ToggleButtonComponent, static: false }) togglebutton4!: ToggleButtonComponent;
	@ViewChild('togglebutton5', { read: ToggleButtonComponent, static: false }) togglebutton5!: ToggleButtonComponent;
	
 
	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 { ButtonModule } from '@smart-webcomponents-angular/button';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Tooltip for Angular

NPM package: @smart-webcomponents-angular/tooltip

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-tooltip

Navigate to the created project folder 

cd smart-angular-tooltip

Setup the Tooltip

  1. Download and install the package.
    npm install @smart-webcomponents-angular/tooltip
  2. Once installed, import the TooltipModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';
import { TooltipModule } from '@smart-webcomponents-angular/tooltip';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, RadioButtonModule, TooltipModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.tooltip.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css",
				"./node_modules/@smart-webcomponents-angular/tooltip/styles/smart.tooltip.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-button #button id="button">Button</smart-button>
<smart-tooltip #tooltip id="tooltip" [selector]="'button'" [arrow]="true">This is a tooltip for smartButton</smart-tooltip>
<div class="options">
     <h3>Tooltip Position:</h3>
    <smart-radio-button #radiobutton [checked]="true">Top</smart-radio-button>
    <br/>
    <smart-radio-button #radiobutton2>Bottom</smart-radio-button>
    <br/>
    <smart-radio-button #radiobutton3>Left</smart-radio-button>
    <br/>
    <smart-radio-button #radiobutton4>Right</smart-radio-button>
    <br/>
</div>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ButtonComponent } from '@smart-webcomponents-angular/button';
import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton';
import { TooltipComponent } from '@smart-webcomponents-angular/tooltip';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('button', { read: ButtonComponent, static: false }) button!: ButtonComponent;
    @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton!: RadioButtonComponent;
    @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2!: RadioButtonComponent;
    @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3!: RadioButtonComponent;
    @ViewChild('radiobutton4', { read: RadioButtonComponent, static: false }) radiobutton4!: RadioButtonComponent;
    @ViewChild('tooltip', { read: TooltipComponent, static: false }) tooltip!: TooltipComponent;


    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.

        const that = this,
            tooltip = that.tooltip;

        that.radiobutton.addEventListener('change', function ():void {
            tooltip.position = 'top';
        });

        that.radiobutton2.addEventListener('change', function ():void {
            tooltip.position = 'bottom';
        });

        that.radiobutton3.addEventListener('change', function ():void {
            tooltip.position = 'left';
        });

        that.radiobutton4.addEventListener('change', function ():void {
            tooltip.position = 'right';
        });
    }
}

    app.module.ts

     
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';
import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton';
import { TooltipModule } from '@smart-webcomponents-angular/tooltip';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, RadioButtonModule, TooltipModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Tree for Angular

NPM package: @smart-webcomponents-angular/tree

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-tree

Navigate to the created project folder 

cd smart-angular-tree

Setup the Tree

  1. Download and install the package.
    npm install @smart-webcomponents-angular/tree
  2. Once installed, import the TreeModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { TreeModule } from '@smart-webcomponents-angular/tree';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TreeModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.tree.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/tree/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/tree/styles/smart.tree.css",
				"./node_modules/@smart-webcomponents-angular/tree/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-tree #tree id="tree">
    <smart-tree-items-group> <i class="material-icons">&#xE53F;</i> Attractions
        <smart-tree-item>Movies</smart-tree-item>
        <smart-tree-item>Circus</smart-tree-item>
        <smart-tree-item>Concerts</smart-tree-item>
        <smart-tree-item>Monuments</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE56C;</i> Dining
        <smart-tree-item>Restaurants</smart-tree-item>
        <smart-tree-item>Caf&eacute;s</smart-tree-item>
        <smart-tree-item>Bars</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE80C;</i> Education
        <smart-tree-item>Schools</smart-tree-item>
        <smart-tree-item>Colleges</smart-tree-item>
        <smart-tree-item>Universities</smart-tree-item>
        <smart-tree-item>Educational courses</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xEB41;</i> Family
        <smart-tree-item>Babysitting</smart-tree-item>
        <smart-tree-item>Family trips</smart-tree-item>
        <smart-tree-item>Theme parks</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE87D;</i> Health
        <smart-tree-item>Hospitals</smart-tree-item>
        <smart-tree-item>Family physicians</smart-tree-item>
        <smart-tree-item>Optics</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE30A;</i> Office
        <smart-tree-item>Offices for rent</smart-tree-item>
        <smart-tree-item>Office equipment</smart-tree-item>
        <smart-tree-item>Repair works</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE25C;</i> Promotions
        <smart-tree-item>Sales</smart-tree-item>
        <smart-tree-item>Malls</smart-tree-item>
        <smart-tree-item>Collective buying</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE03E;</i> Radio
        <smart-tree-item>Available stations</smart-tree-item>
        <smart-tree-item>Search</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE7E9;</i> Recipes
        <smart-tree-item>With meat</smart-tree-item>
        <smart-tree-item>With fish</smart-tree-item>
        <smart-tree-item>Vegetarian recipes</smart-tree-item>
        <smart-tree-item>Vegan recipes</smart-tree-item>
        <smart-tree-item>Desserts</smart-tree-item>
        <smart-tree-item>Chef's recommendations</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE52F;</i> Sports
        <smart-tree-item>Football</smart-tree-item>
        <smart-tree-item>Basketball</smart-tree-item>
        <smart-tree-item>Tennis</smart-tree-item>
        <smart-tree-item>Baseball</smart-tree-item>
        <smart-tree-item>Cycling</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE53D;</i> Travel
        <smart-tree-item>Local destinations</smart-tree-item>
        <smart-tree-item>Book tickets</smart-tree-item>
        <smart-tree-item>Organised travel</smart-tree-item>
    </smart-tree-items-group>
</smart-tree>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TreeComponent } from '@smart-webcomponents-angular/tree';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('tree', { read: TreeComponent, static: false }) tree!: TreeComponent;
	
 
	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 { TreeModule } from '@smart-webcomponents-angular/tree';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, TreeModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz


Getting Started with Smart.Window for Angular

NPM package: @smart-webcomponents-angular/window

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-window

Navigate to the created project folder 

cd smart-angular-window

Setup the Window

  1. Download and install the package.
    npm install @smart-webcomponents-angular/window
  2. Once installed, import the WindowModule in your application root or feature module.

    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from '@smart-webcomponents-angular/button';
import { WindowModule } from '@smart-webcomponents-angular/window';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, WindowModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. Adding CSS reference


    Edit the angular.json file and in the styles add the necessary styles. 

    	"styles": [
		"node_modules/@smart-webcomponents-angular/styles/smart.base.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.window.css",
		"node_modules/@smart-webcomponents-angular/styles/smart.common.css"	
	]
    If you plan to use more than one component, add its style before smart.common.css.

    anglar.json

     
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "demo": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
                "src/assets"
            ],
            "styles": [
               	"./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css",
				"./node_modules/@smart-webcomponents-angular/window/styles/smart.window.css",
				"./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css",
                "src/assets/fonts.css",
			    "src/assets/styles.css"
            ],
            "scripts": []
            },
            "configurations": {
            "production": {
                "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
                ],
                "optimization": false,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": false
            }
            }
        },
        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
            "browserTarget": "demo:build"
            },
            "configurations": {
            "production": {
                "browserTarget": "demo:build:production"
            }
            }
        },
        "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
            "browserTarget": "demo:build"
            }
        },
        "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ]
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    },
    "demo-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
        "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo:serve"
            }
        },
        "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
                "**/node_modules/**"
            ]
            }
        }
        }
    }
    },
    "defaultProject": "demo"
}
  4. Example


    app.component.html

     
<smart-button #button (onClick)="onButtonClick($event)" id="openButton">Open/Close</smart-button>
<smart-window #window [opened]="true" [label]="'Window 1'">
    <div id="article">
        <section>
             <h3>What is Lorem Ipsum?</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the
                1500s, when an unknown printer took a galley of type and scrambled it to
                make a type specimen book. It has survived not only five centuries, but
                also the leap into electronic typesetting, remaining essentially unchanged.
                It was popularised in the 1960s with the release of Letraset sheets containing
                Lorem Ipsum passages, and more recently with desktop publishing software
                like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </section>
        <section>
             <h3>Where does it come from?</h3>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It
                has roots in a piece of classical Latin literature from 45 BC, making it
                over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
                College in Virginia, looked up one of the more obscure Latin words, consectetur,
                from a Lorem Ipsum passage, and going through the cites of the word in
                classical literature, discovered the undoubtable source. Lorem Ipsum comes
                from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
                Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a
                treatise on the theory of ethics, very popular during the Renaissance.
                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
                a line in section 1.10.32. The standard chunk of Lorem Ipsum used since
                the 1500s is reproduced below for those interested. Sections 1.10.32 and
                1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
                in their exact original form, accompanied by English versions from the
                1914 translation by H. Rackham.</p>
        </section>
    </div>
</smart-window>

    app.component.ts

     
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { ButtonComponent } from '@smart-webcomponents-angular/button';
import { WindowComponent } from '@smart-webcomponents-angular/window';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
	encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('button', { read: ButtonComponent, static: false }) button!: ButtonComponent;
	@ViewChild('window', { read: WindowComponent, static: false }) smartWindow!: WindowComponent;
	
	onButtonClick(event:any): void {
		const smartWindow = this.smartWindow;

		smartWindow.opened ? smartWindow.close() : smartWindow.open();
	}

	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 { ButtonModule } from '@smart-webcomponents-angular/button';
import { WindowModule } from '@smart-webcomponents-angular/window';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, WindowModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }


Running the Angular application

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

ng serve
and open localhost:4200 in your favorite web browser.

Edit in Stackblitz