En el post anterior se trabajó en la creación de la aplicación Angular 4 con ruteo y versionado en GitHub. Ahora se verá como incorporar componentes con Angular Material para dotar la aplicación de una apariencia más usable y profesional.
Angular Material es el framework oficial de componentes gráficos para construir interfaces de usuario con Angular 4.
Para iniciar, se debe instalar Angular Material con el comando npm install –save @angular/material @angular/cdk. Algunos componentes de Angular Material requieren de animaciones, por eso hay que instalar el paquete de animaciones: npm install –save @angular/animations. Si se desea que las animaciones funcionen en la App, se debe importar el módulo de animaciones que se acabó de crear:
import {BrowserAnimationsModule} from
‘@angular/platform-browser/animations’;
Adicionalmente, se debe especificar este módulo en el metadato de imports del módulo principal:
Finalmente, se deben importar cada uno de los componentes visuales que se desean utilizar. En este caso puntual, se van a importar los componentes de menú en la aplicación. Para efectos prácticos y académicos, se van a incluir la mayoría de módulos que tiene Angular Material en la aplicación actual, tenga en cuenta que esto puede tener un sobre peso en la aplicación y debería importarse sólo los módulos necesarios que la aplicación requiera:
import {
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdCheckboxModule,
MdChipsModule,
MdCoreModule,
MdDatepickerModule,
MdDialogModule,
MdExpansionModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdNativeDateModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdSortModule,
MdTableModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
} from
‘@angular/material’;
También se deben incorporar estos módulos en los imports del módulo principal:
Posteriormente, se debe incluir un tema CSS para que los componentes tomen un aspecto de acuerdo con el tema elegido:
@import
«~@angular/material/prebuilt-themes/indigo-pink.css»;
Una colección de temas disponibles se puede consultar en: https://material.angular.io/guide/theming. También es posible crear un tema personalizado. Una vez seleccionado el tema, este se vuelve a cambiar en styles.css:
Ahora que se han incluido los módulos con los componentes de Angular Material que se desean utilizar, se puede mejorar el menú de la aplicación basado en el componente de menú de Angular Material. Para esto se puede editar el menú de la siguiente manera:
Con lo cual la aplicación tomaría el siguiente aspecto:
Iconos:
para utilizar los íconos disponibles en Angular Material, se debe incluir la colección de iconos de Google:
<link
href=«https://fonts.googleapis.com/icon?family=Material+Icons»
rel=«stylesheet»>
Aquí está la colección de iconos de Google: https://material.io/icons/#ic_open_in_new, se selecciona el icono y se copia el nombre:
Con esto, ya se puede mejorar el botón del menú:
Luego de tener el menú funcionando, se procederá con la creación del componente para gestionar customers. Como se puede ver en la siguiente imagen, el componente customers se divide en 3 componentes: index, list
y add. El componente index, contiene list y add respectivamente.
Inicialmente, se incluirán los componentes de list y add dentro de index.
El resultado es el siguiente:
Seguidamente, se construirá el formulario de add customer. Para esto, lo primero que se debe hacer es importar el módulo de forms en el customer.module:
import { FormsModule } from
‘@angular/forms’;
Adicionalmente, se debe importar es te modulo en los imports de customer module:
El formulario de customer se debe enlazar a un model, en este caso, se creará el model customer, inicialmente con la propiedad «name»:
Luego, en el código el componente, se crea una instancia del modelo customer:
Posteriormente, en la plantilla HTML del componente, se crea el formulario.
asd
Jose Ubaldo Carvajal 