Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Angular PrimeNG Toolbar Component

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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. 


  • 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.


  • 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 


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


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';
  imports: [
  declarations: [AppComponent],
  bootstrap: [AppComponent]
export class AppModule {}



My Personal Notes arrow_drop_up
Last Updated : 24 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials