Programación

Angular Material

Angular Material

Angular Material es un conjunto de módulos y componentes que facilita el desarrollo de un proyecto Angular. Proporciona distintos tipos de componentes testeados y desarrollados por el equipo de Angular y dispone de componentes y módulos que, una vez implementados facilitan la reutilización de código y se comportan correctamente en las distintas resoluciones. Para la instalación de Angular Material es necesario instalar las dependencias, importar el módulo BrowserAnimationsModule y añadir los estilos.

INSTALAR ANGULAR MATERIAL

  1. npm install @angular/material @angular/cdk --save
  2. npm install @angular/animations --save

Importar módulo BrowserAnimationsModule en app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
  4. import { AppComponent } from './app.component';

  7. @NgModule({
  8.   declarations: [
  9.     AppComponent
  10.   ],
  11.   imports: [
  12.     BrowserModule,
  13.     BrowserAnimationsModule,
  14.   ],
  16.   providers: [],
  17.   bootstrap: [AppComponent]
  18. })
  19. export class AppModule { }

Añadir estilos de iconos con Angular Material 

Añadiendo enlace externo de estilos en index.html de Material Icons

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Edproyecto</title>
  6.   <base href="/">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">
  9.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  10.   <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  11. </head>
  12. <body>
  14.   <ed-root></ed-root>
  15. </body>
  16. </html>

Añadir tema en styles.css

  1. /*@import "~@angular/material/prebuilt-themes/indigo-pink.css";*/
  2. @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

A continuación distintos módulos de Angular Material.

MATTOOLBAR

El módulo MatToolbar es un módulo Angular que permite insertar una barra de herramientas con un conjunto de características que ofrece Angular Material. Para poder disponer del módulo solo es necesario importar el módulo correspondiente, tal como se muestra en el siguiente código.

  1. import  {MatToolbarModule } from "@angular/material";
  2. @NgModule({
  3.   imports: [    MatToolbarModule ],
  4.   declarations: [  ],
  5.   exports: [ MatToolbarModule ]
  6. })
  7. export class MaterialModule { }

Para poder instanciar un MatToolbar es necesario indicar el selector correspondiente desde el componente Angular.

Ejemplo: material.module.ts

  1. import { NgModule } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import {BrowserModule} from "@angular/platform-browser";
  4. import  {MatToolbarModule } from "@angular/material";
  5. @NgModule({
  6.   imports: [
  7.     CommonModule,MatToolbarModule
  8.   ],
  9.  declarations: [  ],
  11.   exports: [MatToolbarModule ]
  12. })
  13. export class MaterialModule { }

Ejemplo: app.component.html

  1. <mat-toolbar color="primary">  
  2.   <span>Angular</span>
  3. </mat-toolbar>
  5. <router-outlet></router-outlet>

MATBUTTON Y MATICON

MatButton y MatIcon son módulos Angular, uno para botones y otro para iconos. De la misma manera que MatToolbar, es necesario añadir al módulo las lineas correspondientes de dichos módulos para disponer de ellos.

  1. import { NgModule } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  4. import {BrowserModule} from "@angular/platform-browser";
  5. import  {MatToolbarModule, MatButtonModule,MatIconModule } from "@angular/material";
  6. import { MaterialDemoComponent } from './material-demo/material-demo.component';
  7. @NgModule({
  9.   imports: [
  10.     CommonModule,
  11.     MatToolbarModule,MatButtonModule,MatIconModule
  12.   ],
  13.   declarations: [ MaterialDemoComponent ],
  14.   exports: [MatToolbarModule,MatButtonModule,MatIconModule ]
  15. })
  16. export class MaterialModule { }

Desde el componente html añadimos los selectores

  1. <mat-toolbar color="primary">
  2.   <button mat-icon-button type="button">
  3.     <a href="/"><mat-icon>restaurant_menu</mat-icon></a>
  4.   </button>
  5.   <span>Angular</span>
  6. </mat-toolbar>
  7. <nav>
  8.   <a href="material-demo" >
  9.     <button type="" mat-button color="primary">
  10.       Home
  11.     </button>
  12.   </a>
  13. </nav>
  14. <router-outlet></router-outlet>

Angular Material ofrece al usuario una gran variedad de iconos desde Material Design Icons

RUTAS BÁSICAS EN ANGULAR

Las rutas se manejan en el archivo app-routing.module.ts. En este archivo debemos importar los componentes  necesarios al inicio del archivo y añadirlos en la constante "routes". De esta forma desde cualquier enlace o botón es posible acceder a otro componente.

  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { MaterialDemoComponent } from './material/material-demo/material-demo.component';
  4. //import { NuevoComponent } from "rutaNuevoComponent";
  5. const routes: Routes = [
  6.   {
  7.     path: 'material-demo',
  8.     component: MaterialDemoComponent,
  9.   }
  10. /*,{
  11.     path:selector NuevoComponent,
  12.     component: NuevoComponent
  13. }*/
  14. ];
  15. @NgModule({
  16.   imports: [RouterModule.forRoot(routes)],
  17.   exports: [RouterModule]
  18. })
  19. export class AppRoutingModule { }

Para poder redireccionar y evitar la duplicidad del componente  es necesario sustituir la propiedad "redirectTo" junto "pathMatch" en lugar de la propiedad component.

  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { MaterialDemoComponent } from './material/material-demo/material-demo.component';
  4. //import { NuevoComponent } from "rutaNuevoComponent";
  5. const routes: Routes = [
  6.  {
  7.     path:"",  //raíz del proyecto
  8.     redirectTo: "material-demo",
  9.     pathMatch: "full"
  10.   },
  11.   {
  12.     path: 'material-demo',
  13.     component: MaterialDemoComponent,
  14.   }
  15. /*,{
  16.     path: selector NuevoComponent,
  17.     component: NuevoComponent
  18. }*/
  19. ];
  20. @NgModule({
  21.   imports: [RouterModule.forRoot(routes)],
  22.   exports: [RouterModule]
  23. })
  24. export class AppRoutingModule { }

Todas estas rutas con accesibles desde cualquier componente mediante la propiedad [routerLink] que permite redireccionar a la ruta asignada.

  1. <button [routerLink] = "home">Home</button>

EXPANSION PANEL

Expansion Panel es un componente "Angular Material" que actúa como un contenedor expansible y que está compuesto por un header y opcionalmente por un actionbar.  Es necesario importar desde el módulo  correspondiente(archivo typescript) , el módulo de Expansion Panel y añadirlo dentro del NgModule en la sección imports y, en caso necesario, en la sección exports.

  1. import { NgModule } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  4. import {BrowserModule} from "@angular/platform-browser";
  5. import  {MatToolbarModule, MatButtonModule,MatIconModule,MatExpansionModule } from "@angular/material";
  6. import { MaterialDemoComponent } from './material-demo/material-demo.component';
  8. @NgModule({
  10.   imports: [
  11.     CommonModule,
  12.     MatToolbarModule,MatButtonModule,MatIconModule,MatExpansionModule
  13.   ],
  14.   declarations: [ MaterialDemoComponent ],
  16.   exports: [MatToolbarModule,MatButtonModule,MatIconModule,MatExpansionModule]
  17. })
  18. export class MaterialModule { }

Ejemplo de selectores con Expansion Panel en el html.

  1. <mat-expansion-panel>
  2.   <mat-expansion-panel-header>
  3.     <mat-panel-title>
  4.         Título
  5.     </mat-panel-title>
  6.   </mat-expansion-panel-header> 
  7. </mat-expansion-panel>

BUTTONS 

Angular Material dispone de varios tipos de botones predefinidos. Estos botones se obtienen añadiendo  alguno de los atributos que Angular Material proporciona y que se pueden revisar en la documentación: Botones Angular Material. En el caso de los iconos Angular Material dispone de un componente (mat-icon)que permite añadir iconos de forma rápida desde Iconos Material Design , para ello es necesario incluir el módulo Material Icon de la misma forma que Expansion Panel detallado anteriormente.

BOTONES ESTÁNDAR

  1. <div>
  2.     <button mat-button>Normal</button>
  3.     <button mat-button color="primary">Normal Primario</button>
  4. </div>

BOTONES ELEVADOS

  1. <div>
  2.     <button mat-raised-button>Elevado</button>
  3.     <button mat-raised-button color="primary">Elevado 
  4. Primario</button>
  5. </div>

BOTONES CON ICONOS

  1. <div>
  2.     <button mat-icon-button>
  3.         <mat-icon>grade</mat-icon>
  4.     </button>
  5.     <button mat-icon-button color="primary">
  6.         <mat-icon>grade</mat-icon>
  7.     </button>
  8. </div>

BOTONES FLOTANTES CON ICONOS (FAB)

  1. <div>
  2.     <button mat-fab>
  3.          <mat-icon>grade</mat-icon>
  4.     </button>
  5.     <button mat-fab color="primary">
  6.         <mat-icon>add</mat-icon>
  7.     </button>
  8. </div>

INPUTS

Al igual que los botones, Angular Material dispone de distintos tipos de campos de texto que permite cambiar el estilo haciendo uso del componente (mat-form-field) y añadiendo alguna de las directivas de Angular Material en el input. Es necesario incluir el módulo Input como los anteriores módulos.

INPUT ESTÁNDAR

  1. <div>
  2.     <mat-form-field>
  3.         <input matInput type="text" placeholder="Nombre">
  4.     </mat-form-field>
  5. </div>

INPUT CON PREFIJO Y SUFIJO

  1. <div>
  2.     <mat-form-field>
  3.         <span matPrefix>+34 </span>
  4.         <input matInput type="text" placeholder="Teléfono">
  5.         <span matSuffix>:-)</span>
  6.     </mat-form-field>
  7. </div>

INPUT CON INDICACIÓN

  1. <div>
  2.     <mat-form-field>        
  3.         <input matInput type="text" placeholder="Dirección">
  4.         <mat-hint>Calle y Número</mat-hint>
  5.     </mat-form-field>
  6. </div>

LISTS

Otro de los componentes disponibles en Angular Material son las listas (mat-list) y los elementos de lista (mat-list-item). Recomendable uso de directiva (mat-line o matLine) sobre list-item de múltiples líneas. Como el resto de componentes es necesario importar módulo List desde el archivo typescript.

Comentarios: 0

Para poder comentar es necesario iniciar sesión


Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso