Componente de la barra de herramientas de Angular PrimeNG

Angular PrimeNG es un marco que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.

En este artículo, sabremos cómo usar el componente Barra de herramientas en angular primeNG. El componente de barra de herramientas se utiliza para agrupar botones y otro componente. 

Propiedades:

• style: Es el estilo del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass: Es la clase del componente. Es de tipo de datos de string, el valor predeterminado es nulo.

Estilo:

• p-toolbar: Es el elemento contenedor principal.
• p-toolbar-group-left: Es el contenedor de contenido izquierdo.
• p-toolbar-group-right: Es el contenedor de contenido derecho.

Creación de una aplicación angular e instalación del módulo:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto : Se verá como lo siguiente.

Ejemplo: Este es el ejemplo básico que muestra cómo usar el componente Barra de herramientas 

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

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 {}

Producción:

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