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

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

4 Root component (standalone)

Add MultiSplitButtonModule 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 { MultiSplitButtonComponent } from 'smart-webcomponents-angular/multisplitbutton';

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

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

export class App 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.
	    

	}	
}

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

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

6 NgModule bootstrap (also supported)

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

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