Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Angular PrimeNG Toolbar Component

  • Last Updated : 24 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 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!