Material angular y angular 6: diseño de material para angular

Esta publicación ha sido publicada primero en CodingTheSmartWay.com.

Suscríbase en YouTube | Demo en vivo | Código en GitHub

Angular Material es una colección de componentes de Material Design para Angular. Al usar estos componentes, puede aplicar Diseño de materiales con mucha facilidad. Con el lanzamiento de Angular 6, el uso de material angular también se ha vuelto más fácil. En este tutorial veremos los cambios recientes. Aprenderá cómo usar el material angular en su proyecto Angular 6 de la manera más fácil.

El sitio web de Angular Material se puede encontrar en https://material.angular.io/.

Configuración del proyecto Angular 6

Para comenzar, primero necesitamos configurar el proyecto Angular 6. Esto se realiza mediante CLI angular (https://cli.angular.io/). Si aún no ha instalado Angular CLI en su sistema, primero debe seguir los pasos del sitio web del proyecto para que la interfaz de línea de comandos esté disponible en su sistema.

Una vez que Angular CLI se haya instalado correctamente, puede iniciar el nuevo proyecto utilizando el comando ng de la siguiente manera:

$ ng nuevo ngMat01

En este ejemplo, ngMat01 es el nombre del nuevo proyecto. Se crea una nueva carpeta de proyecto (con ese nombre), se descarga la plantilla de proyecto Angular y se instalan las dependencias necesarias.

Usando ng add para agregar material angular

Con el lanzamiento de Angular 6, el nuevo comando ng add está disponible, lo que facilita agregar nuevas capacidades al proyecto. Este comando usará el administrador de paquetes para descargar nuevas dependencias e invocar los scripts de instalación correspondientes. Esto se asegura de que el proyecto se actualice con dependencias, cambios de configuración y que se ejecute el código de inicialización específico del paquete.

A continuación, utilizaremos el comando ng add para agregar material angular a la aplicación Angular 6 creada anteriormente:

$ ng add @ angular / material

Al ejecutar este comando estamos instalando Angular Material y el tema correspondiente en el proyecto. Además, los nuevos componentes de inicio se registran en ng generate.

Exploración de componentes angulares de materiales fijos

La adición de nuevos componentes de inicio de material angular para generar ng hace que sea muy fácil comenzar con material angular. Los siguientes componentes de arranque están disponibles:

  • @ angular / material: material Panel: crea un componente de panel basado en tarjeta
  • @ angular / material: materialTable: crea un componente que muestra datos con una tabla de datos
  • @ angular / material: materialNav: crea un componente con una navegación lateral receptiva para la navegación

Para hacer uso de esos componentes iniciales, debe usar el comando ng generate de las siguientes maneras:

$ ng generate @ angular / material: materialNav --name myNav
$ ng generate @ angular / material: materialDashboard --name myDashboard
$ ng generate @ angular / material: materialTable - nombre myTable

P.ej. Si usa el primer comando para generar un nuevo componente myNav, debería poder ver la siguiente salida en la línea de comando:

CREAR src / app / my-nav / my-nav.component.css (110 bytes)
CREAR src / app / my-nav / my-nav.component.html (945 bytes)
CREAR src / app / my-nav / my-nav.component.spec.ts (605 bytes)
CREAR src / app / my-nav / my-nav.component.ts (481 bytes)
ACTUALIZACIÓN src / app / app.module.ts (795 bytes)

Se han agregado cuatro archivos nuevos al proyecto. Esos archivos contienen la implementación del componente de navegación de material angular. MyNavComponent se ha agregado a la matriz de declaraciones del decorador @NgModule en AppModule, para que el componente se pueda usar en nuestra aplicación Angular.

Para que sea visible para el usuario, elimine el contenido predeterminado del archivo app.component.html e inserte el siguiente elemento:

Este es el elemento que se utiliza para incluir la salida de MyNavComponent en la salida que se presenta en el navegador.

Habiendo comenzado el servidor web de desarrollo con

$ ng servidor - abierto

deberías poder ver el siguiente resultado:

Agregar el enrutador

Ahora que el diseño de navegación está disponible, podemos agregar la funcionalidad de enrutador angular fácilmente. En app.module.ts, agregue la siguiente instrucción de importación para importar RouterModule y Routes:

importar {RouterModule, Routes} desde '@ angular / router';

A continuación, agregue una matriz de configuración de enrutador en el mismo archivo:

const appRoutes: Routes = [
  {ruta: 'primera página', componente: FirstPageComponent},
  {ruta: 'segunda página', componente: SecondPageComponent},
  {ruta: 'tercera página', componente: ThirdPageComponent}
];

Por supuesto, FirstPageComponent, SecondPageComponent y ThirdPageComponent aún no están disponibles. Vamos a agregar esos componentes en los siguientes pasos.

Para activar la configuración del enrutador para nuestra aplicación Angular, debemos asegurarnos de agregar RouterModule a la matriz de importación de @NgModule de la siguiente manera:

importaciones: [
    ...
    RouterModule.forRoot (appRoutes),
    ...
  ],

A continuación, debemos agregar la salida del enrutador (el lugar donde se inserta el contenido del componente de ruta) dentro del -Element en el archivo my-nav.component.html:

 

Además, necesitamos actualizar los enlaces desde el menú de la barra lateral y usar la directiva routerLink para apuntar a las rutas respectivas:


       Primera página 
       Segunda página 
       Tercera página 
    

Finalmente, para que la configuración del enrutador funcione, agregue los tres componentes con los siguientes comandos:

$ ng generar componente FirstPage
$ ng generar componente SecondPage
$ ng generar componente ThirdPage

Uso de otros componentes de material angular

Hemos utilizado el componente de inicio de navegación en nuestra aplicación hasta ahora. También puede utilizar cualquiera de los otros componentes de material angular. Para obtener una descripción general de los componentes disponibles, consulte https://material.angular.io/components/categories.

En el siguiente paso, utilizaremos el componente MatCard de la biblioteca de material angular en uno de nuestros componentes de página (por ejemplo, FirstPageComponent).

Primero agregue la importación MatCardModule en el archivo app.module.ts:

importar {MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule} desde '@ angular / material';

Añádelo también a la matriz de importaciones:

importaciones: [
    BrowserModule,
    BrowserAnimationsModule,
    LayoutModule,
    RouterModule.forRoot (appRoutes),
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule
  ],

Ahora estamos listos para usar componentes de MatCardModule en el código de la plantilla (por ejemplo, first-page.component.html):


  
    
     Shiba Inu      Raza de perro   
  Foto de un Shiba Inu        

      El Shiba Inu es la más pequeña de las seis razas de perros spitz originales y distintas de Japón.       Un perro pequeño y ágil que se adapta muy bien al terreno montañoso, el Shiba Inu fue originalmente       criado para la caza.     

                  

Inserte el código CSS en first-page.component.css también:

.example-card {
  ancho máximo: 400px;
}
.example-header-image {
  background-image: url ('https://material.angular.io/assets/img/examples/shiba1.jpg');
  tamaño de fondo: cubierta;
}

Todos los demás componentes de diseño de materiales de la biblioteca de materiales angulares se pueden usar de la misma manera.

Esta publicación ha sido publicada primero en CodingTheSmartWay.com.

# 1 Angular 6 - La guía completa

Domine Angular (Angular 2+, incl. Angular 6) y cree aplicaciones web increíbles y reactivas con el sucesor de Angular.js
Ir al curso ...

Descargo de responsabilidad: esta publicación contiene enlaces de afiliados, lo que significa que si hace clic en uno de los enlaces de productos, recibiré una pequeña comisión. ¡Esto ayuda a apoyar este blog!