1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

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

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import PowerButtonModule from smart-webcomponents-angular/powerbutton: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { PowerButtonModule } from 'smart-webcomponents-angular/powerbutton';

4 Root component (standalone)

Add PowerButtonModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

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


import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { PowerButtonModule } from 'smart-webcomponents-angular/powerbutton';

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [CommonModule, PowerButtonModule, RouterOutlet],
	templateUrl: './app.html',
	styleUrls: ['./app.css']
})

export class App implements AfterViewInit, OnInit {
	@ViewChild('powerbutton', { read: PowerButtonComponent, static: false }) powerbutton!: PowerButtonComponent;
	@ViewChild('powerbutton2', { read: PowerButtonComponent, static: false }) powerbutton2!: PowerButtonComponent;
	@ViewChild('powerbutton3', { read: PowerButtonComponent, static: false }) powerbutton3!: PowerButtonComponent;
	@ViewChild('powerbutton4', { read: PowerButtonComponent, static: false }) powerbutton4!: PowerButtonComponent;
	@ViewChild('powerbutton5', { read: PowerButtonComponent, static: false }) powerbutton5!: PowerButtonComponent;
	@ViewChild('powerbutton6', { read: PowerButtonComponent, static: false }) powerbutton6!: PowerButtonComponent;
	@ViewChild('powerbutton7', { read: PowerButtonComponent, static: false }) powerbutton7!: PowerButtonComponent;
	@ViewChild('powerbutton8', { read: PowerButtonComponent, static: false }) powerbutton8!: PowerButtonComponent;


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

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

	init(): void {
		// init code.


		document.getElementById('powerButtonAnimation')
			?.addEventListener('change', function (event: any) {
				(document.getElementById('progressBarAnimated') as ProgressBar).indeterminate =
					event.detail.value ? false : true;
			});


	}
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-power-button as needed:

 <div class="smart-demo-container">
    <section id="power-button">
        <div class="module">
            <p>Power button is a two-state type of toggle button with an indicator.</p>
            <p>Used as indicator.</p>
        </div>
        <div class="module power-button-flat-light">
            <div>
                <smart-power-button></smart-power-button>
                <br />
                <smart-power-button #powerbutton hover></smart-power-button>
                <br />
                <smart-power-button #powerbutton2 [checked]="true"></smart-power-button>
                <br />
                <smart-power-button #powerbutton3 [disabled]="true"></smart-power-button>
            </div>
        </div>
        <div class="module"></div>
        <div class="module power-button-light">
            <div>
                <smart-power-button #powerbutton4 class="raised"></smart-power-button>
                <br />
                <smart-power-button #powerbutton5 class="raised"></smart-power-button>
                <br />
                <smart-power-button #powerbutton6 class="checked raised" [checked]="true"></smart-power-button>
                <br />
                <smart-power-button #powerbutton7 class="raised" [disabled]="true"></smart-power-button>
            </div>
            <p>Raised Power button</p>
        </div>
        <div class="module power-button-dark">
             <h2>Demo usage</h2>
        </div>
        <div class="module power-button">
            <div>
                <smart-circular-progress-bar id="progressBarAnimated" [indeterminate]="true" [value]="100">
                    <smart-power-button #powerbutton8 style="border:none;" id="powerButtonAnimation"></smart-power-button>
                </smart-circular-progress-bar>
            </div>
            <p>A power button can control the loading process.</p>
        </div>
    </section>
</div>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put PowerButtonModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

Sample NgModule layout from Smart UI demos (app.component.*, app.module.ts):

app.component.html

 <div class="smart-demo-container">
    <section id="power-button">
        <div class="module">
            <p>Power button is a two-state type of toggle button with an indicator.</p>
            <p>Used as indicator.</p>
        </div>
        <div class="module power-button-flat-light">
            <div>
                <smart-power-button></smart-power-button>
                <br />
                <smart-power-button #powerbutton hover></smart-power-button>
                <br />
                <smart-power-button #powerbutton2 [checked]="true"></smart-power-button>
                <br />
                <smart-power-button #powerbutton3 [disabled]="true"></smart-power-button>
            </div>
        </div>
        <div class="module"></div>
        <div class="module power-button-light">
            <div>
                <smart-power-button #powerbutton4 class="raised"></smart-power-button>
                <br />
                <smart-power-button #powerbutton5 class="raised"></smart-power-button>
                <br />
                <smart-power-button #powerbutton6 class="checked raised" [checked]="true"></smart-power-button>
                <br />
                <smart-power-button #powerbutton7 class="raised" [disabled]="true"></smart-power-button>
            </div>
            <p>Raised Power button</p>
        </div>
        <div class="module power-button-dark">
             <h2>Demo usage</h2>
        </div>
        <div class="module power-button">
            <div>
                <smart-circular-progress-bar id="progressBarAnimated" [indeterminate]="true" [value]="100">
                    <smart-power-button #powerbutton8 style="border:none;" id="powerButtonAnimation"></smart-power-button>
                </smart-circular-progress-bar>
            </div>
            <p>A power button can control the loading process.</p>
        </div>
    </section>
</div>

app.component.ts

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


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

export class AppComponent implements AfterViewInit, OnInit {
	@ViewChild('powerbutton', { read: PowerButtonComponent, static: false }) powerbutton!: PowerButtonComponent;
	@ViewChild('powerbutton2', { read: PowerButtonComponent, static: false }) powerbutton2!: PowerButtonComponent;
	@ViewChild('powerbutton3', { read: PowerButtonComponent, static: false }) powerbutton3!: PowerButtonComponent;
	@ViewChild('powerbutton4', { read: PowerButtonComponent, static: false }) powerbutton4!: PowerButtonComponent;
	@ViewChild('powerbutton5', { read: PowerButtonComponent, static: false }) powerbutton5!: PowerButtonComponent;
	@ViewChild('powerbutton6', { read: PowerButtonComponent, static: false }) powerbutton6!: PowerButtonComponent;
	@ViewChild('powerbutton7', { read: PowerButtonComponent, static: false }) powerbutton7!: PowerButtonComponent;
	@ViewChild('powerbutton8', { read: PowerButtonComponent, static: false }) powerbutton8!: PowerButtonComponent;


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

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

	init(): void {
		// init code.


		document.getElementById('powerButtonAnimation')
			?.addEventListener('change', function (event: any) {
				(document.getElementById('progressBarAnimated') as ProgressBar).indeterminate =
					event.detail.value ? false : true;
			});


	}
}

app.module.ts

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

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

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

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

export class AppModule { }