Angular PrimeNG SplitButton Raised and Rounded Buttons Component️‍🔥

Q: What is Angular PrimeNG SplitButton Raised and Rounded Buttons Component?

In this article, we will learn Angular PrimeNG SplitButton Raised and Rounded Buttons Component,This free Angular tutorial for complete beginners will help you learn Angular from scratch.

Q: How to use Angular PrimeNG SplitButton Raised and Rounded Buttons Component in Angular?

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

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;"> 
        w3wiki 
    </h1> 
      
    <h3> 
        Angular PrimeNG SplitButton Raised  
        and Rounded Buttons Component 
    </h3> 
    <br /> 
      
    <p>Raised Split button</p> 
    <p-splitButton label="Beginner for Beginner" 
        styleClass="p-button-raised p-button-warning" 
        [model]="gfg"> 
    </p-splitButton> 
    <br /><br /> 
  
    <p>Rounded Split button</p> 
    <p-splitButton label="Beginner for Beginner" 
        styleClass="p-button-rounded p-button-help" 
        [model]="gfg"> 
    </p-splitButton> 
    <br /><br /> 
  
    <p>Raised and Rounded Split button</p> 
    <p-splitButton label="Beginner for Beginner" 
        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;"> 
        w3wiki 
    </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