Angular PrimeNG SplitButton Raised and Rounded Buttons 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 the SplitButton Raised and Rounded Component in Angular PrimeNG.

The SplitButton component is used to make a button as a dropdown. There are classes you apply to make the split button raised or rounded.

Angular PrimeNG SplitButton Classes:

• p-button-raised: It is used to make the button background appear higher than the normal level.
• p-button-rounded: It is used to change the shape of a button to round.

Syntax:

<p-splitButton 
    styleClass="p-button-raised p-button-rounded">
</p-splitButton>

Creating Angular application & Module Installation:

Step 1: To create an angular app, you need to install the angular command line interface through the npm command:

npm install -g angular-cli

Step 2: Now, we will create an angular project:

ng new project_name

Step 3: After creating your angular project, move into the folder to perform different operations:

cd project_name

Step 4: After creating the Angular application, Install the required module using the following command:

npm install primeng --save
npm install primeicons --save

Project Structure: After successful installation, the following project structure will appear:

Project Structure

Step to Run Application: Run the application using the following command from the root directory of the project:

ng serve --open

Example 1: This example describes the Raised and Rounded Split Button Components in Angular PrimeNG.

• app.component.html

HTML

<div style="margin:100px; text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        Angular PrimeNG SplitButton Raised
        and Rounded Buttons Component
    </h3>
    <br />

    <p>Raised Split button</p>
    <p-splitButton label="Geeks for Geeks"
        styleClass="p-button-raised p-button-warning"
        [model]="gfg">
    </p-splitButton>
    <br /><br />

    <p>Rounded Split button</p>
    <p-splitButton label="Geeks for Geeks"
        styleClass="p-button-rounded p-button-help"
        [model]="gfg">
    </p-splitButton>
    <br /><br />

    <p>Raised and Rounded Split button</p>
    <p-splitButton label="Geeks for Geeks"
        styleClass="p-button-raised
            p-button-rounded p-button-success"
        [model]="gfg">
    </p-splitButton>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    gfg: MenuItem[] = [
        {
            label: 'Home',
            icon: 'pi pi-home'
        },
        {
            label: 'Practice',
            icon: 'pi pi-bolt'
        },
        {
            label: 'Courses',
            icon: 'pi pi-book'
        },
        {
            separator: true
        },
        {
            label: 'Logout',
            icon: 'pi pi-user'
        },
    ];
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SplitButtonModule } from 'primeng/splitbutton';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        SplitButtonModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This example describes a Large Raised and Rounded Split Button Component in Angular PrimeNG.

• app.component.html

HTML

<div style="margin:100px; text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>Angular PrimeNG SplitButton Raised & Rounded</h3>
    <br />

    <p-splitButton label="SplitButton"
        styleClass="p-button-lg p-button-raised
            p-button-rounded p-button-success"
        [model]="gfg">
    </p-splitButton>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    gfg: MenuItem[] = [
        {
            label: 'Item - 1',
            icon: 'pi pi-check-square'
        },
        {
            separator: true
        },
        {
            label: 'Item - 2',
            icon: 'pi pi-check-square'
        },
        {
            separator: true
        },
        {
            label: 'Item - 3',
            icon: 'pi pi-check-square'
        },
        {
            separator: true
        },
        {
            label: 'Item - 4',
            icon: 'pi pi-check-square'
        },
    ];
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SplitButtonModule } from 'primeng/splitbutton';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        SplitButtonModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/splitbutton