更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-material-dialog-not-closing-after-navigation 今天发现一些场景可能导致 dialog 不会关闭. 比如当子组件打开一个 dialog 后 某一个操作把父组件给销毁了.这个时候 dialog content 会一起销毁掉, 因为 content 是 under

为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便,尤其在开发自己的组件库时,可以让你少写许多代码,可以说只要是弹出内容的场景基本都可以使用Overlay.我们自己的组件库中弹出场景基本都已经使用Overlay,如自定义Select.Cascader.Tree Select.Tooltip.Dialog等,总结最重要的的两点好处: 让使用者不再进行

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:206-214 "export 'ɵɵinject' was not found in '@angular/core' WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 4172:172-180 "export 'ɵɵinject' was not found in '@angular/core'

iPhone的出现让手势操作大为流行,也使得手势编程成为开发人员的挑战. 拟物设计也把手势编程纳入在内,大概也想制定一个在交互模型标准.现阶段因为MD还在预发布阶段,因此还只实现了单点手势(一个指头),可是已经有足够的东西值得学习,无论对我们应用还是自己设计手势编程都是大有裨益. Angular Material有两个手划控件mdSwipeLeft和mdSwipeRight,然而真正的代码支持却不在这两个控件的定义中,而是在核心代码中,文件位置src\core\services\gesture\

1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ng g c core/header --module core 内容组件:main ng g c core/main --module core 页脚组件:footer ng g c core/footer --module core 1.2.1.2 如何让核心模块只加载一次 在核心模块对应类中

Material design调色板 https://www.materialpalette.com/ 明暗:虽然颜色不变,但是针对白天黑夜有做不同处理. 叠加:对话框,弹出菜单,事先是没有加载的.是叠加到页面上的. 一.使用Material预先设置的颜色 不再用material内建的搭配色.使用materialpalette提供的颜色. 参考:https://material.angular.io/guide/theming 1.白天模式 // @import '~@angular/mater

官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://materialdesignblog.com/ 并不是万能的,都有约束条件. 优点:兼容性好,可扩展性强,可测试性好,对主题的支持好. 缺点:组件不是特别丰富. 安装: //其它方式$ sudo cnpm i --save @angular/material@2.0.0-beta.7 $ sudo yarn add

视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, 该项目采用了: ASP.NET Core 2.1 做API Identity Server 4 Angular 6 Angular Material 这个项目比较简单, 适合ASP.NET Core Web API 和 Angular 初学者. 项目最终完成的效果如图: 视频目录 视频专辑地址: h

效果如下图 代码实现 1.导入模块 import {MatAutocompleteModule} from '@angular/material/autocomplete'; @NgModule({   imports:[       MatAutocompleteModule    ] }) 2.编写List内容 this.memberNameList = [ { onOffDist: 'オン', items: ['丁1', '徐2', '僑3'] }, { onOffDist: 'オフ',

Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD application, third party modal pop up control Part 2: Filter/Search using Angular2 pipe, Global Error handling, Debugging Client side Part 3: Angular 2 to Ang

本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular TypeScript & Html Snippets Visual Studio Code TypeScript and Html snippets and code examples for Angular 2,4,5 & 6. All code snippets are based on and

工做中经常用到Angular Material 中的好多按钮素材,奈何官网经常上不去,所以只能自己把这些常用的按钮扒下来了,留给自己同时也留给大家方便查看. Angular material mat-icon 资源参考_Action Angular material mat-icon 资源参考_Communication Angular material mat-icon 资源参考_Av Angular material mat-icon 资源参考_Connection Angular mate

  介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material Design项目,为应用开发者提供一组完整的实现Material Design的AngularJS UI元素.这听上去不错,但要深究或展示实际范例还为时尚早,感兴趣的开发者可登陆Angular Material官网了解最新进展,或进入GitHub下载源码尝鲜. 官网地址:https://materi

Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局篇 (二) : 布局容器DemoParkhttps://segmentfault.com/a/1190000007217054 Angular Material 教程之布局篇 (三) : 布局子元素DemoParkhttps://segmentfault.com/a/1190000007217765

1 问题描述 应用使用 angular4在使用@angular/material时,若果在导入模块时使用mat开头,就会报错. 2 问题原因 @angular/material版本出现问题,@angular/material 从版本5开始就必须要angular5的核心依赖:想要在angular5之前版本中的应用中使用@angular/material,要么更改@angular/material的版本(降低版本),例如:cnpm i --save @angular/material@2.0.0-b

百度了好久 ,,,最后谷歌出来了.. 该错误可能来自于您将@ angular / material设置为6.0.0, 但所有其他Angular包都是5.x.您应该始终确保Material主要版本与Angular的主要版本匹配. 把package.json file里 "dependencies": { "@angular/core": "^5.2.0", "@angular/cdk": "^6.0.1",

AngularJS中一些表单验证属性: 修改过的表单,只要用户修改过表单,无论输入是否通过验证,该值都将返回false{formName}.{inputFieldName}.$dirty 合法的表单,这个属性用来判断表单的内容是否合法的,如果合法则该属性的值为true{formName}.{inputFieldName}.$valid 不合法的表单,这个属性用来判断表单的内容是都不合法,如果不合法则该属性的值为true,与valid正好相反{formName}.{inputFieldName}.

前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的idea. 在上节中我们安装了Angular,并新建了一个简单工程.这节中我们将会将Material导入工程中,简单写一个HelloWorld的例子,并讲解Angular模块中的declarations.imports.providers以及bootstrap等概念. 环境安装 Material简单说

1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (click)="editDialog(project)"> <mat-icon>create</mat-icon>编辑 </button> <button mat-mini-fab color="warn" class="

前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候,我发现 Material 的组件基本已经够用了,其它不足的地方可以配合一些优秀的第三方库.另外,Material 的确是一个高质量的组件库,不管是设计思路还是使用方式,都近乎完美. 经过一个多月的设计与思考,我开发了这款基于 Angular Material 的中后台管理框架,初期架构设计已经完成

前言 Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量.正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量组件库. 官方列举了如下几点来解释"高质量"的含义. 国际化和可访问性,以便所有用户都可以使用. 不会让开发人员感到困惑的简单 API. 在各种各样没有 bug 的用例中按预期行事. 通过单元测试和集成测试更好地测试行为. 可在 Material Design 规范的范围内进行定制. 将性