angular material怎么安装?

怎么安装angular material?

1、前期准备:npm(安装node即可),angular cli脚手架

2、自建项目

ng new my-app           //my-app项目名字
ng g c project                //组件名project

3、安装angular material和angular cdk

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

//yarn方法
yarn add @angular/material @angular/cdk

4、常用项animations(非必备)

//npm方法
npm install --save @angular/animations

//yarn方法
yarn add @angular/animations

1.png

5、引入组件模块

2.png

6、引入主题

//根目录的styles.css
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
//或者直接在index.html里使用<link>标签
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

7、手势支持

有的标签(mat-slide-toggle,mat-slider,mattooltip等)需要hammerJS来支持,为了获取这些组件的所有特性,通过npm引入到项目中。

//npm
npm install --save hammerjs
//yarn
yarn add hammerjs

然后在入口文件(main.js)中引入

import 'hammerjs';

8、添加material的icon(可选)

如果想要你的mat-icon标签获取官方的Material Design Icons,在index.html文件中加入下面的link。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

该安装的都已经安装好了,可以放心大胆地使用了,详见官网(https://material.angular.io/)哦。

Image placeholder
前端答疑
未设置
  32人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery怎么安装?

jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操

vue-cli怎么安装?

vuecli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batteries-included的

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

多个ul怎么定义不同css?

多个ul怎么定义不同css?相同的元素,定义不同的css,只需要活用选择器就可以实现了。1、给ul命名,idclass都行,例如 CSS中就是把ul换成相应的名字:(注意空格)div#myul{}//

怎么安装react-router

怎么安装react-router安装命令:npminstallreact-routerreact-router路由提供了一些router的核心api,包括Router,Route,Switch等,但是

怎么查看nodejs是否安装?

查看nodejs是否安装的方法:1、cmd执行命令开始菜单搜索框输入cmd,点击第一个结果,打开cmd命令行。在cmd命令行中,输入node-v并执行,显示node版本,证明安装成功。例如我的版本是1

html怎么加载css?

有四种加载方式:行内式通过html的style属性实现,如下所示//写在body标签中 行内式嵌入式在style标签中写css样式,在body中引用//写在style标签中的css样式 p{ colo

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为

html怎么加粗字体?

html怎么加粗字体?1、h(1~6标签)书写方式h1标签->html怎么加粗字体 h2标签->html怎么加粗字体 h3标签->html怎么加粗字体 h4标签->html怎么加粗字体 h5标签->h

全局安装react脚手架在哪装?

全局安装react脚手架在哪装?全局安装react脚手架在任何目录下都可以,因为和当前所在目录没有关系。一、全局安装react脚手架npminstall-gcreate-react-app -g参数表

HTML怎样引入jQuery?

HTML怎样引入jQuery?jquery的引入方式有两种,一种是本地引入,一种是引入在线jquery。相关专题推荐:《jQuery教程》方式一:本地引入(这种方法要求本地有jquery.js):我们

angular项目怎么运行?

angular项目怎么运行?1、新建一个项目。2、使用组合键【win+r】,打开运行面板,输入cmd3、打开cmd命令提示符窗口,使用cd命令进入项目所在文件夹例:cdmy-dream进入项目my-d

angular2怎么添加事件监听?

angular2怎么添加事件监听?在模板中为元素添加事件监听很简单,使用一对小括号包裹事件名称,并绑定到表达式即可:上面的代码实例为DOM对象h1的click事件添加监听函数onClick()。另一种

angular和vue是什么?

Angular是什么?Angular是一个基于TypeScript的开源Web应用程序框架,一个用HTML,CSS和JavaScript/TypeScript构建客户端应用程序的框架。Angular是

angular和vue之间有什么区别?

相同:1.数据绑定:vue和angular绑定都可以用{{}}2.都支持内置指令和自定义指令3.都支持内置过滤器和自定义过滤器。区别:1.学习成本和API设计:vue相比于angular来说更加的简单

angular和vue先学哪个?

angular和vue先学哪个?先学vue框架。其实react、angular、vue三个框架只要学会一个,短时间内掌握上手其他两个都不是较大的困难。vue相比于angular来说更加的简单。angu

angular的注入器是什么?

在依赖注入和依赖查找的时候注入器和提供器就需要使用。接下来就简单介绍一下注入器和提供器。注入器Angular提供的类,一般不需调用,会自动通过组件的构造函数注入。1.当一个提供器提供在模块中时,他是对

angular难吗?

Angular学起来难吗?答案是:不知道。准确的说应该是"因人而异"。我曾经说过:任何卖包治百病的大力丸的都是骗子,任何逢人就说一项技术很简单的也是骗子——你连对方的技术背景都不问就敢说很简单,这跟医

angular国内用的多吗?

angular在国内为什么用的人会少?大家会认为入门高,下面主观的总结了以下几点:Google没有营销好,刚开始Angular2出来的时候没有很好的照顾Angular1.x的用户,导致大量用户流失到其

正则表达式 Regular Expression

历史正则表达式出现于理论计算机科学的自动控制理论和形式化语言理论中。在这些领域中有对计算(自动控制)的模型和对形式化语言描述与分类的研究。1它可以转化成形式化语言或者确定型自动机。它们是语义上等价的,

使用kubei一步部署k8s高可用集群(包含docker安装、k8s组件安装、master初始化和加入nodes节点)

kubei(kubernetesinstaller)是一个go开发的用来部署kubernetes高可用集群的命令行工具,该工具可在Windows、Linux、Mac中运行kubei原理:通过ssh连接

聊聊chronos的pullFromDefaultCFAndPush

序本文主要研究一下chronos的pullFromDefaultCFAndPushpullFromDefaultCFAndPushDDMQ/carrera-chronos/src/main/java/

Stack Overflow 上最火的一个问题:什么是 NullPointerException

在逛StackOverflow的时候,发现最火的问题竟然是:什么是NullPointerException(java.lang.NullPointerException),它是由什么原因导致的,有没有

002.07 MineSweeper - PsSimleGUI 的应用

建檔日期:2019/12/07 更新日期:None 语言:Python3.7.2,PySimpleGUI4.6.0 系统:Win10Ver.10.0.17763主题:002.07MineSweeper

Spring-SpringAOP原理,手写Spring事务框架

一、Spring核心知识Spring是一个开源框架,Spring是于2003年兴起的一个轻量级的Java开发框架,由RodJohnson在其著作ExpertOne-On-OneJ2EEDevelopm