Scribd Logo
Upload

Welcome to Scribd!

  • Tutorial Angular Materialize HFR

    Uploaded by

    Hernan flores ramirez
    43 views4 pages
    s

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    s

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    43 views4 pages

    Tutorial Angular Materialize HFR

    Uploaded by

    Hernan flores ramirez
    s

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    ANGULAR & MATERIALIZE

    1.- Instalación Los siguientes comandos agregarán la biblioteca ngx-materialize a su


    archivo package.json junto con sus dependencias: Materialize CSS y jQuery
    npm install --save ngx-materialize
    2.- No olvides incluir Materialise y jQuery en tu aplicación. Si está utilizando Angular-
    CLI, puede seguir el siguiente ejemplo:

    angular.json
    "styles": [
    "src/styles.scss",
    + "node_modules/materialize-css/dist/css/materialize.min.css"
    ],
    "scripts": [
    + "node_modules/jquery/dist/jquery.min.js",
    + "node_modules/materialize-css/dist/js/materialize.min.js"
    ],
    y

    tsconfig
    {
    "extends": "../tsconfig.json",
    "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": [
    + "jquery",
    + "materialize-css"
    ]
    },
    "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
    ]
    }
    4.- Icons
    Ngx-materialize offers two "out-of-the-box" options for icons although you are free to
    use the library of your choice.
    Material Design Icons
    To use Material Design Icons (community project based on Google Material Icons with
    lots of added icons), which is used with mz-icon-mdi directive, you will need to add the
    library with the following command:
    npm install --save @mdi/font

    4.- Don't forget to include Mdi library to your application.

    If you are using Angular-CLI you can follow the example below :

    angular.json
    "styles": [
    "src/styles.scss",
    "node_modules/materialize-css/dist/css/materialize.min.css",
    + "node_modules/@mdi/font/css/materialdesignicons.min.css"
    ],
    5.- Iconos de material

    Para usar Íconos de Material (biblioteca oficial de Íconos de Material de Google), que
    se usa con la directiva mz-icon, deberá agregar lo siguiente en la etiqueta <head> de
    su archivo index.html:
    <link href="https://fonts.googleapis.com/icon?
    family=Material+Icons" rel="stylesheet">

    6.- Animación
    6.1.- Algunos componentes están utilizando la transición de
    animación avanzada. Necesita instalar @ angular / animations e
    incluir BrowserAnimationsModule si desea que esas animaciones
    funcionen.
    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    + import { BrowserAnimationsModule } from '@angular/platform-
    browser/animations';

    import { AppModule } from './app.module';


    @NgModule({
    imports: [
    + BrowserAnimationsModule,
    ],
    })
    export class AppModule { }

    6.2.- Si no desea instalar una nueva dependencia en su aplicación, puede incluir


    NoopAnimationsModule.
    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    + import { NoopAnimationsModule } from '@angular/platform-
    browser/animations';

    import { AppModule } from './app.module';

    @NgModule({
    imports: [
    + NoopAnimationsModule,
    ],
    })
    export class AppModule { }
    7.- Uso Debe importar el módulo de componente que desea usar dentro de su
    módulo para poder usar los componentes de Materialize.
    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    + import { MzButtonModule, MzInputModule } from 'ngx-materialize';

    import { HomeComponent } from './home.component';

    @NgModule({
    imports: [
    CommonModule,
    + MzButtonModule,
    + MzInputModule,
    ],
    declarations: [ HomeComponent ],
    })
    export class HomeModule { }

    You might also like