Programación

Componentes Angular Material

Componentes predefinidos del módulo Material

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';
  3. import {BrowserModule} from "@angular/platform-browser";
  4. import  {MatToolbarModule, MatButtonModule,MatIconModule,MatExpansionModule } from "@angular/material";
  5. import { MaterialDemoComponent } from './material-demo/material-demo.component';
  6. @NgModule({
  7.   imports: [
  8.     CommonModule,
  9.     MatToolbarModule,MatButtonModule,MatIconModule,MatExpansionModule
  10.   ],
  11.   declarations: [ MaterialDemoComponent ],
  12.   exports: [MatToolbarModule,MatButtonModule,MatIconModule,MatExpansionModule]
  13. })
  14. export class MaterialModule { }


  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.


    1. <mat-list>
    2.   <mat-list-item>
    3.     <img matLine mat-list-avatar src="//lakewangaryschool.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg">
    4.     <span matLine>Mónica Cañero</span>
    5.     <span mat-line>Málaga</span>
    6.   </mat-list-item>
    7.   <mat-list-item>
    8.     <img mat-line mat-list-avatar src="//lakewangaryschool.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg">
    9.     <span mat-line>Susana Beltrán</span>
    10.     <span mat-line>Barcelona</span>
    11.   </mat-list-item>
    12.   <mat-list-item>
    13.     <img mat-line mat-list-avatar src="//lakewangaryschool.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg">
    14.     <span mat-line>Vanesa Pantoja</span>
    15.     <span mat-line>Asturias</span>
    16.   </mat-list-item>
    17. </mat-list>
    MODELOS DE DATOS

    Los modelos de datos determinan la estructura y facilitan el acceso e intercambio de datos. Es recomendable crear un modelo de datos en un archivo separado y exportable en el cual declarar los tipos de datos para después importar desde cualquier lugar del proyecto. La ruta recomendada para la creación de los modelos es el directorio "/shared/model/", de esta forma, Angular pretende mantener una estructura ordenada del proyecto. Para definir estos tipos es necesaria la creación de una clase o una interface. Las clases son las más comunes en distintos lenguajes y permiten apoyarse en su método constructor, sin embargo en TypeScript las interfaces son ideales si algunos datos son proporcionados, por ejemplo, mediante web services por peticiones ajax. 

    INTERFACES

     Las interfaces son conjuntos de atributos y métodos que, implementados desde una clase, determinan las características y el funcionamiento a esa clase. Las clases que implementan una o varias interfaces deben obligatoriamente añadir todos los atributos y todos los métodos de tales interfaces.La diferencia principal entre una clase y una interface es que en la interface los atributos no tienen valores y los métodos no contienen código, solamente pueden definir el tipo de dato y el tipo de retorno. Las interfaces, en Angular, también se definen como un contrato que exige su cumplimiento (definir todos los atributos y métodos de esa interface) y en caso de que no se cumpla, el compilador TypeScript marcará un error.

    Crear interface:

    1. ng generate shared/model/[nombreModelo]

    De forma abreviada:

    1. ng g i shared/model/estudiante

    Declaración de tipos de datos:

    1. export interface Estudiante{
    2.     id:number;
    3.     nombre: string;
    4.     ciudad: string;
    5.     fotoURL?: string;  // parámetro ? permite que sea opcional
    6. }

    Una vez creada la interface y declarados los tipos es posible declarar objetos desde el módulo TypeScript correspondiente.

    1. import { Component, OnInit } from '@angular/core';
    2. import { Estudiante } from "../../shared/model/estudiante";
    4. @Component({
    5.   selector: 'ed-material-list',
    6.   templateUrl: './material-list.component.html',
    7.   styleUrls: ['./material-list.component.css']
    8. })
    9. export class MaterialListComponent implements OnInit {
    11.   estudiante1: Estudiante;
    12.   estudiante2: Estudiante;
    13.   estudiante3: Estudiante;
    15.   constructor() { }
    17.   ngOnInit() {
    18.     console.log("Inicializando el componente MaterialList");
    19.     this.estudiante1 = {
    20.       id:1,
    21.       nombre: "Mónica Cañero",
    22.       ciudad: "Málaga",
    23.       fotoURL: "//mipagina.com/foto.jpg"
    24.     };
    26.     this.estudiante2 = {
    27.       id:2,
    28.       nombre: "Susana Beltrán",
    29.       ciudad: "Barcelona",
    30.     };
    31.     this.estudiante3 = {
    32.       id:3,
    33.       nombre: "Vanesa Pantoja",
    34.       ciudad: "Asturias"
    35.     };    
    36.   }
    38. }

    INTERPOLACIÓN

    La interpolación es un mecanismo de sustitución de expresiones por valores de tipo cadena en una vista. Angular analiza las expresiones entre dobles llaves "{{...}}" y permite acceder a propiedades de un modelo de datos. 

    1. <mat-list>
    2.   <mat-list-item>
    3.     <img matLine mat-list-avatar src="//lakewangaryschool.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg">
    4.     <span matLine>{{ estudiante1.nombre}}</span>
    5.     <span mat-line>{{ estudiante1.ciudad}}</span>
    6.   </mat-list-item>
    7.   <mat-list-item>
    8.     <img mat-line mat-list-avatar src="//lakewangaryschool.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg">
    9.     <span mat-line>{{ estudiante2.nombre }}</span>
    10.     <span mat-line>{{ estudiante2.ciudad }}</span>
    11.   </mat-list-item>
    12.   <mat-list-item>
    13.     <img mat-line mat-list-avatar src="//lakewangaryschool.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg">
    14.     <span mat-line>{{ estudiante3.nombre }}</span>
    15.     <span mat-line>{{ estudiante3.ciudad }}</span>
    16.   </mat-list-item>
    17. </mat-list>

    Nota: Si el valor no es una cadena Angular intenta leerlo como tal.

    1. import { Component, OnInit } from '@angular/core';
    2. import { Estudiante } from "../../shared/model/estudiante";

    4. @Component({
    5.   selector: 'ed-material-list',
    6.   templateUrl: './material-list.component.html',
    7.   styleUrls: ['./material-list.component.css']
    8. })
    9. export class MaterialListComponent implements OnInit {
    10.   estudiante1: Estudiante;
    11.   estudiante2: Estudiante;
    12.   estudiante3: Estudiante;
    13.   constructor() { }
    14.   ngOnInit() {
    15.     console.log("Inicializando el componente MaterialList");
    16.     this.estudiante1 = {
    17.       id:1,
    18.       nombre: "Mónica Cañero",
    19.       ciudad: "Málaga",
    20.       fotoURL: "//mipagina.com/foto.jpg"
    21.     };
    22.     this.estudiante2 = {
    23.       id:2,
    24.       nombre: "Susana Beltrán",
    25.       ciudad: "Barcelona",
    26.     };
    27.     this.estudiante3 = {
    28.       id:3,
    29.       nombre: "Vanesa Pantoja",
    30.       ciudad: "Asturias"
    31.     };
    32.     setTimeout(() => {
    33.       this.estudiante3 = {
    34.         id:4,
    35.         nombre: "José Becerra",
    36.         ciudad: "Sant Joan Despí"
    37.       }
    38.     }, 3000);
    39.   }
    40. }

    Una de la características de la interpolación es que permite mantener los datos actualizados. El código de arriba incluye la función setTimeout con la que permite mostrar la actualización constante de la vista. Angular utiliza el mecanismo Change Detect Strategy que detecta cualquier cambio. En este caso, Angular renderiza la vista con los cambios efectuados al detectar el cambio del nombre y de la ciudad de estudiante3 a los 3 segundos.

    Según la complejidad es preferible definir una clase  en lugar de una interface. La clase dispone del método constructor y es más práctica si se requieren métodos que manejen esos datos, si al contrario sólo es necesario el tipo de dato es más práctica una interface.

    1. ng generate class shared/model/class-estudiante


    1. export class ClassEstudiante {
    4.   constructor(public id:number,public nombre:string,public ciudad:string){
    6.   }
    8.   getEdad():number{
    10.     return 0;
    11.   }
    12. }


    1. import { Component, OnInit } from '@angular/core';
    2. import { Estudiante } from "../../shared/model/estudiante";
    3. import { ClassEstudiante } from "../../shared/model/class-estudiante";
    4. @Component({
    5.   selector: 'ed-material-list',
    6.   templateUrl: './material-list.component.html',
    7.   styleUrls: ['./material-list.component.css']
    8. })
    9. export class MaterialListComponent implements OnInit {
    10.   estudiante1: ClassEstudiante;
    11.   estudiante2: Estudiante;
    12.   estudiante3: Estudiante;
    13.   constructor() { }
    14.   ngOnInit() {
    15.     console.log("Inicializando el componente MaterialList");
    16.     /*this.estudiante1 = {
    17.       id:1,
    18.       nombre: "Mónica Cañero",
    19.       ciudad: "Málaga",
    20.       fotoURL: "//mipagina.com/foto.jpg"
    21.     };*/
    22.     this.estudiante1 = new ClassEstudiante(1,"Mónica Cañero", "Málaga");
    23.     console.log("edad de estudiante: "+this.estudiante1.getEdad());
    24.     this.estudiante2 = {
    25.       id:2,
    26.       nombre: "Susana Beltrán",
    27.       ciudad: "Barcelona",
    28.     };
    29.     this.estudiante3 = {
    30.       id:3,
    31.       nombre: "Vanesa Pantoja",
    32.       ciudad: "Asturias"
    33.     };
    34.     setTimeout(() => {
    35.       this.estudiante3 = {
    36.         id:4,
    37.         nombre: "José Becerra",
    38.         ciudad: "Sant Joan Despí"
    39.       }
    40.     }, 3000);
    41.   }
    42. }


    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