Angular PrimeNG SplitButton Component - GeeksforGeeks

30 Sep, 2021
Angular PrimeNG is a framework used with angular to create components with great styling and this framework is very easy to use and is used to make responsive websites.
In this article, we will see how to use SplitButton component in angular primeNG. The SplitButton component is used to make a button as a dropdown.
Properties:
label: it is the text of the button.  It is of string data type, the default value is null.
icon: it is the name of the icon. It is of string data type, the default value is null.
iconPos: it is the position of the icon. It is of string data type, the default value is null.
style: It is the Inline style of the component. It is of string data type, the default value is null.
styleClass: It is the Style class of the component. It is of string data type, the default value is null.
menuStyle: It is the Inline style of the overlay menu. It is of string data type, the default value is null.
menuStyleClass: It is the Style class of the overlay menu. It is of string data type, the default value is null.
appendTo: It is the Target element to attach the overlay. It is of string data type, the default value is null.
disabled: it specifies that the component should be disabled. It is of boolean data type, the default value is false.
tabindex: It is the Index of the element in tabbing order. It is of number data type, the default value is null.
dir: It Indicates the direction of the element. It is of string data type, the default value is null.
showTransitionOptions: These are the Transition options of the show animation. It is of string data type, the default value is null.
hideTransitionOptions: These are the Transition options of the hide animation. It is of string data type, the default value is null.
Event:
onClick: It is the Callback to invoke when default command button is clicked.
onDropdownClick: It is the Callback to invoke when dropdown button is clicked.
 
Styling:
p-splitbutton: It is the Container element.
p-splitbutton-menubutton: It is the Dropdown button.
p-menu: It is the Overlay menu
Creating Angular Application And Installing Module:
Step 1: Create a Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: It will look like the following.
Example: This is the basic example that shows how to use SplitButton component.
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG SplitButton Component</h5><p-splitButton label="GeeksforGeeks" [model]="gfg"></p-splitButton>
app.module.ts
import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import {RouterModule} from '@angular/router';import {BrowserAnimationsModule}         from '@angular/platform-browser/animations';  import { AppComponent }   from './app.component';  import { SplitButtonModule } from 'primeng/splitbutton';  @NgModule({  imports: [    BrowserModule,    BrowserAnimationsModule,    SplitButtonModule,    RouterModule.forRoot([      {path:'',component: AppComponent}        ])  ],  declarations: [ AppComponent ],  bootstrap:    [ AppComponent ]})  export class AppModule { }
app.component.ts
import { Component, OnInit, ViewEncapsulation}     from '@angular/core';import {MenuItem} from 'primeng/api';import {MessageService} from 'primeng/api';  @Component({  selector: 'app-root',  providers: [MessageService],  templateUrl: './app.component.html',  styles: [`      :host ::ng-deep .ui-splitbutton {          margin-right: .25em;      }  `]})export class AppComponent {     gfg: MenuItem[];          constructor(private messageService: MessageService) {}          ngOnInit() {        this.gfg = [            {label: 'Angular'},            {label: 'PrimeNG'},            {label: 'SplitButton'}        ];    }}
Output:
Reference: https://primefaces.org/primeng/showcase/#/splitbutton
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?