3.0 / 5

Jlopezjujuy

Angular 6 y Angular Material — Material Design para Angular

24 mayo, 2018
Category : Angular,Javascript,programacion

Hola buenas a todos, les comparto un nuevo articulo en el cual veremos un poco como poder usar Angular Material junto a Angular 6.

Angular Material es una colección de componentes de diseño de materiales para angular. Al usar estos componentes se puede aplicar Material Design muy fácilmente. Con el lanzamiento de Angular 6, el uso de Angular Material también se ha vuelto más fácil la integración. En este tutorial veremos los cambios recientes. Aprenderemos a usar Angular Material en un proyecto Angular 6 de manera más fácil.

El sitio web de Angular Material, aquí.

Configurando el Proyecto Angular 6

Para empezar, primero tenemos que configurar el proyecto Angular 6. Esto se hace usando Angular CLI ( https://cli.angular.io/ ). Si aún no ha instalado Angular CLI es un buen momento para poder instalarlo.

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

ng new pruebaMaterial

En este ejemplo pruebaMaterial 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 Angular Material

Con el lanzamiento de Angular 6 se agrego un nuevo comando, ng add, este facilita la incorporación de nuevos componentes al proyecto. Este comando usará el administrador de paquetes para descargar nuevas dependencias e invocar las secuencias de comandos 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 template correspondiente en el proyecto. Además, los nuevos componentes iniciales se crearan usando ng generate.

Creación de componentes iniciales

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

@ angular / material: materialDashboard : crea un componente de tablero basado en tarjetas
@ angular / material: materialTable : crea un componente que muestre datos con una tabla de datos
@ angular / material: materialNav : crea un componente con sidenav receptivo 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 -- name myTable

Por ejemplo, si usa el primer comando para generar un nuevo componente myNav , debería poder ver el siguiente resultado 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) 
CREATE src / app / my-nav / my-nav.component.ts (481 bytes) 
ACTUALIZACIÓN src / app / app.module.ts (795 bytes)

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

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

<my-nav></my-nav>

Este es el elemento que se usa para incluir el resultado de MyNavComponenten la salida que se presenta en el navegador.

Habiendo comenzado el desarrollo del servidor web con

ng server --open

deberías poder ver el siguiente resultado:

Agregar el enrutador(Router)

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

import { RouterModule, Routes } from '@angular/router';

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

const appRoutes: Routes = [
  { path: 'first-page', component: FirstPageComponent },
  { path: 'second-page', component: SecondPageComponent },
  { path: 'third-page', component: 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 al array de importaciones del @NgModule de la siguiente manera:

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

A continuación, tenemos que agregar la salida del enrutador (el lugar donde se inserta el contenido del componente de ruta) dentro del <mat-sidenav-content> -Elemento en el archivo my-nav.component.html:

<router-outlet></router-outlet>

Además, debemos actualizar los enlaces desde el menú de la barra lateral y usar la directiva routerLink para señalar las rutas respectivas:

<mat-nav-list>
      <a mat-list-item routerLink="/first-page">First Page</a>
      <a mat-list-item routerLink="/second-page">Second Page</a>
      <a mat-list-item routerLink="/third-page">Third Page</a>
    </mat-nav-list>

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

ng generate component FirstPage
ng generate component SecondPage
ng generate component ThirdPage

Uso de otros componentes de Angular Material

Hasta ahora, hemos utilizado el componente de inicio de navegación en nuestra aplicación. 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 vamos a usar el componente MatCard de la biblioteca de Material angular en uno de los componentes de nuestra página (por ejemplo, FirstPageComponent ).

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

import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule } from '@angular/material';

Agréguelo a las importaciones -Array también:

imports: [
    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 ):

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

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

.example-card {
  max-width: 400px;
}
.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  background-size: cover;
}

Todos los demás componentes de Diseño de materiales de la biblioteca Material angular se pueden usar de la misma manera.

Espero les agrade este articulo y les ayude como me ayudo ami. Saludos

Fuente: Angular Material And Angular 6 — Material Design For Angular

Tags:Angular 6 Angular Material aplicación web aprendiendo Angular Curso Angular programacion