About the use of Material in Angular2 (detailed tutorial)

This article mainly introduces the use of Material (including Material Icon) in Angular2. Friends who need it can refer to it

1.Introducing the material npm package

npm install @angular/material @angular/cdk

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

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

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

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

Using material component

1. First introduce the module of material component in ebiz-material.module.ts, For example, if we want to use checkbox

(https://material.angular.io/components/checkbox/overview), then introduce MatCheckboxModule and then export it.

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, I don’t care about it, as long as it works), you can download it from github, then take out the iconfont folder and put it in your own project directory, and use it when you need to use the icon. Introduced in css (scss), generally we will use it globally in style.scss.

@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的设定 */
.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 the icon in the appropriate position of the html

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

Use material’s built-in theme and custom theme

1. The components in material will be different according to the theme. There will be different styles presented, but these style differences are only limited to the inside of the material component and will not affect the style of the custom component.

2.Change the styles.css file name to styles.scss, and modify it in the angular-cli.json file to

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

3.Introduce the material pre-built theme into 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 feel that these themes are not suitable, you can customize the theme, create a new theme.scss in the same directory as styles.scss, and write the content 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, such as $mat-blue, you can refer to here

6. If you want To theme a certain component, you can refer here

7.Introduce a custom theme into styles.scss

@import './theme';

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement a circular progress bar in the WeChat applet

Implement dynamic introduction of files in webpack

Tricks related to JavaScript

The above is the detailed content of About the use of Material in Angular2 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!