Angular 4 - Materiales

Materialsofrecen una gran cantidad de módulos integrados para su proyecto. Las funciones como autocompletar, selector de fecha, control deslizante, menús, cuadrículas y barra de herramientas están disponibles para usar con materiales en Angular 4.

Para usar materiales, necesitamos importar el paquete. Angular 2 también tiene todas las características anteriores, pero están disponibles como parte del módulo @ angular / core. Angular 4 ha creado un módulo separado@angular/materials.. Esto ayuda al usuario a importar los materiales necesarios.

Para comenzar a usar materiales, debe instalar dos paquetes: materiales y cdk. Los componentes del material dependen del módulo de animación para las funciones avanzadas, por lo que necesita el paquete de animación para el mismo, es decir, @ angular / animaciones. El paquete ya se actualizó en el capítulo anterior.

npm install --save @angular/material @angular/cdk

Veamos ahora el package.json. @angular/material y @angular/cdk están instalados.

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   
   "private": true,
   
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },
   
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

Hemos destacado los paquetes que se instalan para trabajar con materiales.

Ahora importaremos los módulos en el módulo principal: app.module.ts Como se muestra abajo.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

En el archivo anterior, hemos importado los siguientes módulos de @ angular / materials.

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

Y lo mismo se usa en la matriz de importaciones como se muestra a continuación:

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

los app.component.ts es como se muestra a continuación -

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

Agreguemos ahora el material en app.component.html.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

En el archivo anterior, hemos agregado Menú y SideNav.

Menú

Para agregar un menú, <md-menu></md-menu>se utiliza. losfile y Save As los elementos se agregan al botón debajo md-menu. Hay un botón principal agregadoMenu. La referencia del mismo se da en <md-menu> usando[mdMenuTriggerFor]=”menu” y usando el menú con # in <md-menu>.

SideNav

Para agregar sidenav, necesitamos <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-sidenav>se agrega como hijo al contenedor. Hay otro div agregado, que activa el sidenav usando(click)=”sidenav.open()”. A continuación se muestra la visualización del menú y la navegación lateral en el navegador:

Al hacer clic opensidenav, muestra la barra lateral como se muestra a continuación -

Al hacer clic en Menú, obtendrá dos elementos File y Save As como se muestra a continuación -

Agreguemos ahora un selector de fechas usando materiales. Para agregar un selector de fechas, necesitamos importar los módulos necesarios para mostrar el selector de fechas.

En app.module.ts, hemos importado el siguiente módulo como se muestra a continuación para datepicker.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aquí, hemos importado módulos como MdDatepickerModule, MdInputModule, y MdNativeDateModule.

Ahora el app.component.ts es como se muestra a continuación -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

los app.component.html es como se muestra a continuación -

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

Así es como se muestra el selector de fechas en el navegador: