Angular PrimeNG Toolbar 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 know how to use the Toolbar component in angular primeNG. The Toolbar Component is used to group buttons and another component. 

Properties:

• style: It is the style of the component.  It is of object data type, the default value is null.
• styleClass: It is the class of the component. It is of string data type, the default value is null.

Styling:

• p-toolbar: It is the main container element.
• p-toolbar-group-left: It is the Left content container.
• p-toolbar-group-right: It is the Right content container.

Creating Angular Application And Installing Module:

• Step 1: Create an 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 Toolbar component

app.component.html

<p-toolbar>
    <div class="p-toolbar-group-left">
        <p-button label="GeeksforGeeks"
            styleClass="p-button-warning">
        </p-button>

        <p-button label="GeeksforGeeks"
            styleClass="p-button-danger">
        </p-button>

        <p-button label="GeeksforGeeks"
            styleClass="p-button-success">
        </p-button>
    </div>
</p-toolbar>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
       from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { ToolbarModule } from 'primeng/toolbar';
import { ButtonModule } from 'primeng/button';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToolbarModule,
    ButtonModule
  ],

  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Output:

Reference: https://primefaces.org/primeng/showcase/#/toolbar