Material (including Material Icon) in Angular2, materialangular2

Material (including Material Icon) in Angular2, materialangular2

1. Introduce the material npm package

npm install @angular/material @angular/cdk

2. Create a ebiz-material.module.ts to facilitate management of modules that introduce material

ng g module ebiz-material -app=ebiz-ui

3. Introduce ebiz-material.module.ts in the root module of the app

import { EbizMaterialModule } from './ebiz-material/ebiz-material.module';@NgModule({  imports: [..., EbizMaterialModule],  declarations: [    ...  ],  schemas: [CUSTOM_ELEMENTS_SCHEMA]})

Use the material Component

1. first introduce the material component module in the ebiz-material.module.ts, for example, we need to use checkbox

(Https://material.angular.io/components/checkbox/overview), then introduce MatCheckboxModule, and then exports.

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { MatCheckboxModule } from '@angular/material';@NgModule({ imports: [CommonModule, MatCheckboxModule], declarations: [], exports: [ MatCheckboxModule ]})export class EbizMaterialModule { }

2. Use components in html files

<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>

Use material-icon

1. Introduce material-icon

npm install material-design-icons

If the download fails (I failed to install or ignore it, you can use it), download it from github, and then take out the iconfont folder and put it in your project directory, in addition, we will introduce the css (scss) that requires icons. Generally, we will place them in style. scss is used globally.

@ Font-face {font-family: 'material icons'; font-style: normal; font-weight: 400; src: url (assets/iconfont/MaterialIcons-Regular.eot ); /* For IE6-8 */src: local ('material icons'), local ('materialicons-Regular '), url (assets/iconfont/MaterialIcons-Regular.woff2) format ('woff2 '), url (assets/iconfont/MaterialIcons-Regular.woff) format ('woff'), url (assets/iconfont/MaterialIcons-Regular.ttf) format ('truetype ');}/* meterial icon setting */. material-icons {font-family: 'material icons'; font-weight: normal; font-style: normal; font-size: 24px;/* Preferred icon size */display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */-webkit-font-smoothing: antialiased;/* Support for Safari and Chrome. */text-rendering: optimizeLegibility;/* Support for Firefox. */-moz-osx-font-smoothing: grayscale;/* Support for IE. */font-feature-settings: 'liga ';}

2. Place tags in the appropriate html location

<i class="material-icon">iconName<i>

Use material built-in theme and custom theme

1. Components in material will be presented in different styles according to theme. However, the differences between these styles are limited to the internal components of material, and do not affect the styles of custom components.

2.styles.css file name changed to styles. scss and fixed

"styles": [    "styles.scss"   ],

3. Introduce the material pre-created topic in the style. scss file (4 in total)

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';  @import '~@angular/material/prebuilt-themes/indigo-pink.css';  @import '~@angular/material/prebuilt-themes/pink-bluegrey.css';  @import '~@angular/material/prebuilt-themes/purple-green.css';

4. If you think these theme is not suitable, you can customize the theme, create a theme. scss In the styles. scss directory at the same level, and write the contents of the custom theme (https://material.angular.io/guide/theming)

@import '~@angular/material/theming';@include mat-core();$my-app-primary: mat-palette($mat-blue); $my-app-accent: mat-palette($mat-teal, A200, A100, A400); $my-app-warn: mat-palette($mat-red); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);@include angular-material-theme($my-app-theme);

5. Some colors are used in step 3, for example, $ mat-blue.

6. If you want to develop a topic for a component, refer to here

7. Introduce custom themes in styles. scss

@import './theme';

Summary

The above section describes the use of Material (including Material Icon) in Angular2. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!