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 ButtonModule from smart-webcomponents-angular/button: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

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

4 Root component (standalone)

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

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

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ ButtonModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

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

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

	}	
}

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-button as needed:

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

6 NgModule bootstrap (also supported)

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

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put ButtonModule from smart-webcomponents-angular/button on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from 'smart-webcomponents-angular/button';

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

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.