Componente de barra de herramientas de material angular

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por Google para que los desarrolladores de Angular puedan desarrollar aplicaciones modernas de una manera estructurada y receptiva. Al hacer uso de esta biblioteca, podemos aumentar en gran medida la experiencia de usuario de un usuario final, ganando así popularidad para nuestra aplicación. Esta biblioteca contiene elementos modernos listos para usar que se pueden usar directamente con un mínimo de código adicional o sin él.

La <mat-toolbar> en la parte superior de la aplicación que puede incluir el título o alguna acción en la posición específica de una aplicación. La barra de herramientas puede tener una sola fila o varias filas, según el requisito específico. La creación de la barra de herramientas con una sola fila se puede lograr con las etiquetas <mat-toolbar> y </mat-toolbar>. Para crear la barra de herramientas con varias filas, podemos colocar los elementos <mat-toolbar-row> dentro de una <mat-toolbar>.

Sintaxis:

<mat-toolbar> Content </mat-toolbar>

Sintaxis de instalación:

El requisito previo básico es que debemos tener Angular CLI instalado en el sistema para poder agregar y configurar la biblioteca de materiales de Angular. Después de cumplir con la condición requerida, podemos escribir el siguiente comando en Angular CLI:

ng add @angular/material

Consulte el artículo Adición de un componente de material angular a una aplicación angular para conocer el procedimiento de instalación detallado.

Agregar componente de la barra de herramientas:

Para usar el componente de la barra de herramientas, debemos importarlo al archivo module.ts . 

import { MatToolbarModule } from '@angular/material/toolbar';

Luego, debemos agregar este componente a nuestra array de importaciones . Después de esto, podemos usarlo en nuestro código.

Estructura del proyecto:

Después de una instalación exitosa, la estructura del proyecto se verá como la siguiente imagen:

Ejemplo: El siguiente ejemplo ilustra la implementación de la barra de herramientas de material angular.

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
  
import { MatToolbarModule } from "@angular/material/toolbar";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
      from "@angular/platform-browser/animations";
import { MatIconModule } from "@angular/material/icon";
  
@NgModule({
  declarations: [AppComponent],
  exports: [AppComponent],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    BrowserModule,
    MatIconModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {}

<mat-toolbar class="title-toolbar">
  <mat-toolbar-row>
    <span class="title-center">GeeksforGeeks</span>
  </mat-toolbar-row>
</mat-toolbar>
  
<mat-toolbar>
  <mat-toolbar-row>
    <span>Tutorials</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon" 
              aria-hidden="false" 
              aria-label="Tutorials">assignment
    </mat-icon>
  </mat-toolbar-row>
  
  <mat-toolbar-row>
    <span>Contribute Article</span>
    <span class="example-spacer"></span>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Write article">create
    </mat-icon>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Login or Register">
      how_to_reg
    </mat-icon>
  </mat-toolbar-row>
</mat-toolbar>

@import "~material-icons/iconfont/material-icons.css";
  
.example-icon {
  padding: 0 14px;
}
.example-spacer {
  flex: 1 1 auto;
}
  
.title-center {
  margin: 0 auto;
  color: white;
}
  
.title-toolbar {
  background: green;
}

Producción:

Barra de herramientas de material angular

Referencia: https://material.angular.io/components/toolbar/overview