Material angular 7 – Barra de herramientas

La, una Directiva Angular, se utiliza para crear una barra de herramientas para mostrar el título, el encabezado o cualquier botón de acción.

  • – Representa el contenedor principal.
  • – Añada una nueva fila.

En este capítulo, mostraremos la configuración requerida para dibujar un control de barra de herramientas usando Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatToolbarModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatToolbarModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

 

A continuación se muestra el contenido del archivo CSS modificado app.component.css .

.filler {
   flex:11auto;}.gap {
   margen-derecha:10px;}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

color="primary">>FileEdit>About

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado una barra de herramientas que abarca toda la página.
  • A continuación, se añaden las etiquetas.