Angular PrimeNG SplitButton Component

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: http://primefaces.org/primeng/splitbutton