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

import { RepeatButtonModule } from 'smart-webcomponents-angular/repeatbutton';

4 Root component (standalone)

Add RepeatButtonModule 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 { ProgressBarComponent, CircularProgressBarComponent } from 'smart-webcomponents-angular/progressbar';

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

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

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

export class App implements AfterViewInit, OnInit {
    @ViewChild('progressbar', { read: ProgressBarComponent, static: false }) progressBar!: ProgressBarComponent;
    @ViewChild('progressBarCircularControl', { read: CircularProgressBarComponent, static: false }) progressBarCircularControl!: CircularProgressBarComponent;
    @ViewChild('progressBarCircular', { read: CircularProgressBarComponent, static: false }) progressBarCircular!: CircularProgressBarComponent;

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

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

    init(): void {
        // init code.

        document.getElementById('progressUp')?.addEventListener('click', () => {
            this.progressBar.value = Math.min(this.progressBar.max, this.progressBar.value + 1);
            this.progressBarCircular.value = Math.min(this.progressBarCircular.max, this.progressBarCircular.value + 1);
        });
        document.getElementById('progressDown')?.addEventListener('click', () => {
            this.progressBar.value = Math.max(this.progressBar.min, this.progressBar.value - 1);
            this.progressBarCircular.value = Math.max(this.progressBarCircular.min, this.progressBarCircular.value - 1);
        });
        document.getElementById('incrementButton')?.addEventListener('click', () => {
            this.progressBarCircularControl.value = Math.min(this.progressBarCircularControl.max, this.progressBarCircularControl.value + 1);
        });
        document.getElementById('decrementButton')?.addEventListener('click', () => {
            this.progressBarCircularControl.value = Math.max(this.progressBarCircularControl.min, this.progressBarCircularControl.value - 1);
        });


    }
}

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

 <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><i class="material-icons">keyboard_arrow_left</i>
            </smart-repeat-button>
            <smart-repeat-button><i class="material-icons">keyboard_arrow_right</i>
            </smart-repeat-button>
            <smart-repeat-button><i class="material-icons">keyboard_arrow_up</i>
            </smart-repeat-button>
            <smart-repeat-button><i class="material-icons">keyboard_arrow_down</i>
            </smart-repeat-button>
        </div>
        <p>Repeat buttons can be used for navigation.</p>
    </div>
    <section>
    <div class="module">
        <div class="repeat-buttons-container">
            <smart-repeat-button><i class="material-icons">replay_10</i>
            </smart-repeat-button>
            <smart-repeat-button><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 id="progressUp"><i class="material-icons">arrow_upward</i>
                </smart-repeat-button>
                <smart-repeat-button 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]="true" show-progress-value [value]="5"></smart-progress-bar>
                <smart-circular-progress-bar #progressBarCircular 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 #progressBarCircularControl id="progressBarCircularControl" [value]="25">
                    <smart-repeat-button id="incrementButton"><i class="material-icons">arrow_upward</i>
                    </smart-repeat-button>
                    <smart-repeat-button id="decrementButton"><i class="material-icons">arrow_downward</i>
                    </smart-repeat-button>
                </smart-circular-progress-bar>
            </div>
        </div>
    </section>
</div>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put RepeatButtonModule 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 RepeatButtonModule from smart-webcomponents-angular/repeatbutton 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 { RepeatButtonModule } from 'smart-webcomponents-angular/repeatbutton';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, RepeatButtonModule ],
	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.