Angular material 2 MatAutocompleteTrigger - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Angular 循环内使用 material datepicker

material datepicker 需要用到模板变量，如果需要在循环出来datepicker可以这么干直接把 *ngFor 中的index传给[matDatepicker]，用来引用组件 *ngFor...实例看代码 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-muldatepicker...01-18 00:00:00'), amount: 150, } ] }, { id: 2,

2.4K2 0

Angular Material 的设计之美

我可以说一下自己的感受，Angular Material 的交互更加流畅，细节做的更好。 Angular Material 组件库虽然很优秀，但是却被戴上了只适合做 C 端界面的帽子。...接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点，并且简单介绍 Angular Material 的一些使用技巧。...另外，Angular Material 的样式是基于 Sass 编写，而我最喜欢的也是 Sass，所以基于 Angular Material 编写 ng-matero 就是宿命的选择。...以下是 Angular Material 主题定制的方法。...总结文章篇幅有限，以我浅薄的资历还无法将 Angular Material 的设计之美剖析的面面俱到，但是如果大家通过这篇文章能够更好的了解 Angular Material 或者对 Angular

6.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

基于 Angular Material 的 Data Grid 设计实现

Angular Material 对于 table 的封装已经足够灵活，但是模板的定义依然很繁琐，也缺少很多刚需功能。...Extensions Data Grid 几乎整合了 Angular Material 表格的所有功能，同时又增加了很多实用功能。...'sport' }, { headerName: 'Age', field: 'age' } ], // other grid options here... } 2、...button mat-raised-button color="primary">{{row.city}} 官网示例：Custom cell template 2...官网示例：Expandable row 行展开的实现借助了 Angular Material 表格的 multiTemplateDataRows 参数，实现细节很多。

6.2K2 0

Angular 2 库

库模块 Angular 被打包成了一个 JavaScript 模块的集合。你可以理解为库模块。每一个 Angular 库命名跟着 @angular前缀。...例如，从 @angular/core 导入 Angular 组件修饰符库如下所示： import { Component } from '@angular/core'; 你也可以使用 JavaScript...的导入语句从 Angular 库中导入 Angular 模块： import { BrowserModule } from '@angular/platform-browser'; 前面根模块的简单例子中...访问这些功能，添加 @NgModule 元数据的导入如下： imports: [ BrowserModule ], 这样我们同时使用了 Angular 和 JavaScript 模块系统。

1K5 0

Ng-Matero：基于 Angular Material 搭建的中后台管理框架

matero-poster.jpg 前言目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。...经过一个多月的设计与思考，我开发了这款基于 Angular Material 的中后台管理框架，初期架构设计已经完成，在接下来的版本中会提供 schematics 支持及 vscode snippet...目录结构先看一下目录结构，这个目录结构遵循了 Angular 的最佳实践，尽量保证结构的规范化与合理性。...'#FFCDD2', 200: '#EF9A9A', 300: '#E57373', 400: '#EF5350', 500: '#F44336', 600:...'#E53935', 700: '#D32F2F', 800: '#C62828', 900: '#B71C1C', A100: '#FF8A80', A200:

3.6K2 0

Angular2 @NgModule

@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。...模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。...---- NgModule的主要属性如下 1.declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员 ---- 2.providers...（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中） ---- 3.imports：导入其他

2.9K4 0

Angular 2 数据显示

以下代码基于 Angular 2 TypeScript 环境配置来创建，你可以在该章节上下载源码，并修改以下提到的几个文件。...app/app.component.ts 文件： import { Component } from '@angular/core'; @Component({ selector: 'my-app'..., template: ` {{title}} 2>我喜欢的网站: {{mySite}}2> ` }) export class AppComponent...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值，并显示在浏览器中，显示信息如下：使用 ngFor...({ selector: 'my-app', template: ` {{title}} 2>我喜欢的网站: {{mySite}}2>

3.3K2 0

【Angular专题】——（2）【译】Angular中的ForwardRef

原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html 作者：Christoph...app.ts import { Component } from '@angular/core'; import { NameService } from '....我们理解了class为什么不适合被提升执行顺序，这对于之前的Angular的示例来说有什么指导意义呢？我们只能通过将NameService移动到代码顶部的方式来解除之前的报错吗？...五.补充以下内容摘录自Angular中文网: 在Typescript里面，类声明的顺序很重要，如果一个类尚未定义，就不能引用它。这通常都没有问题的，特别是遵循一个文件一个类规则的时候。...forwardRef( )建立一个间接引用，供Angular随后解析。

5.2K2 0

ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

视频简介 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 初学者....项目最终完成的效果如图: 视频目录视频专辑地址: http://v.qq.com/vplus/4cfb00af75c16eb8d198c58fb86eb4dc/foldervideos/8hk0029019k2fft...项目, 使用Implicit Flow进行身份认证, 访问被保护的API 建立Angular 6项目, 配置Angular Material和UI布局, 路由等.....

1.3K3 0

（2）Angular的开发

什么是 ReactNative应用，小程序与RN的关系 native端优化 Js端优化 ReactNative是？用JavaScript来写App，性能好...

1K3 0

Angular 2 架构（上)

Angular 2 应用程序应用主要由以下 8 个部分组成： 1、模块 (Modules) 2、组件 (Components) 3、模板 (Templates) 4、元数据 (Metadata) 5、数据绑定...Angular 应用是由模块化的，它有自己的模块系统：NgModules。每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。...---- 元数据(Metadata) 元数据告诉 Angular 如何处理一个类。考虑以下情况我们有一个组件叫作 Component ，它是一个类，直到我们告诉 Angular 这是一个组件为止。...实例 @Component({ selector : 'mylist', template : '2>菜鸟教程2>' directives : [ComponentDetails...Angular 会基于这些信息创建和展示组件及其视图。

2.1K1 0

Angular 2 用户输入

本章中，我们将学习如何使用 Angular 事件绑定语法来绑定这些事件。绑定到用户输入事件我们可以使用 Angular 事件绑定机制来响应任何 DOM 事件。...等号右边，引号中的文本是一个模板语句完整代码如下： app/click-me.component.ts 文件： import { Component } from '@angular/core';...我们可以使用模板引用变量来修改以上 keyup 的实例： app/keyup.components.ts (v2) 文件： @Component({ selector: 'key-up2', template... {{values}} ` }) export class KeyUpComponent_v2...Angular 可以为我们过滤键盘事件，通过绑定到 Angular 的 keyup.enter 伪事件监听回车键的事件。

2.6K2 0

Angular 2 架构（下)

保存双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。...---- 服务(Services) Angular2中的服务是封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块。服务分为很多种，包括：值、函数，以及应用所需的特性。...Angular 能通过查看构造函数的参数类型，来得知组件需要哪些服务。...如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular 。...当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

3.2K2 0

Angular 2 表单（下）

每一个 input 元素都有一个 name 属性， Angular 的表单模块需要使用它为表单注册控制器。运行以上实例输出结果如下： {{diagnostic}} 只是用于测试时候输出数据使用。...在 angular-forms 目录下创建 forms.css 文件，代码如下： forms.css 文件： .ng-valid[required], .ng-valid.required { border-left...通过 ngSubmit 来提交表单我们可以使用 Angular 的指令 NgSubmit 来提交表单，并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

2.7K1 0

Angular2 @Component

@Component是一种特殊的Directive .相当于Angular1 中 Directive 和 Controller 的合体它的配置更简单一些，非常适合组件化的app架构。...使用web组件和使用Angular风格的app架构使得编写app更为简便。...Component的优点：比普通directive要简单很多更加严谨，更加规范化更加适合组件化架构 component更容易升级到angular2 ---- Component只能控制它自己的视图和数据

9772 0

Angular 2 模块（Modules）

Angular 应用是模块化的，Angular 有自己的模块系统，叫做 Angular 模块 or NgModules。模块 ....每个 Angular 应用至少有一个模块——根模块，通常叫做 AppModule。...这里是一个简单根模块： import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser.../app.module'; platformBrowserDynamic().bootstrapModule(AppModule); Angular 模块对比 JavaScript 模块 The Angular...module — 一个类修饰符使用@NgModule — 是 Angular 的基础功能。

1.4K7 0

Angular 1 vs. Angular 2 深度比较

让我们一起了解下 Angular 2 的设计目标，以及实现它们的计划： Angular 2 主要目标更易于推论 Angular 1 vs Angular 2 变化侦测基于 Zones 的更透明的内部构件...2 迁移的路径总结 Angular 2 主要目标 Angular 2 的主要目标是创建一个简单易用并且快速工作的 web 框架。...Angular 2 如何因 Zones 而更透明 Angular 2 使用 zones 机制使摘要循环不再被需要。...目标: 迁移到 Angular 2 Angular 2 的目标之一是为 Angualr 1 提供一个清晰的迁移路径。...新的 Angular 2 路由向下兼容 Angular 1，将允许一个工程同时有 Angualr 1 和 Angular 2 路由。

4K10 0

Angular实战项目（2）

Angular 打造企业级协作平 image 项目工程 ? image.png ? image.png ? image.png https://github.com/typicode ?.../material 中的很多控件使用了 flex 布局 flex: 1 1 auto; } ?...image.png Angular Material ?...image.png materialdesignblog.com 兼容性好，可扩展性强，测试性好，对主题的支持好目前组件仍不算丰富 project\r1egot\taskmgr npm i --save @angular.../material@2.0.0-beta.7 ?

1.3K1 0

Angular 2 表单（上）

本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。...解压后，修改目录名为angular-forms，修改 angular-forms/package.json 文件中的 "name": "angular-quickstart" 为 "name": "angular-forms...创建一个表单组件每个 Angular 表单分为两部分：一个基于 HTML 的模板，和一个基于代码的组件，它用来处理数据和用户交互。...} from '@angular/core'; import { Site } from '....'@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent }

2.2K1 0

Angular2入门体验

点击这个网址,Nodejs安装文件下载在命令行中，执行： sudo npm install -g @angular/cli 注意执行命令的权限，否则会提示无法写入文件异常。...打开文件，修改： src/app/app.component.ts export class AppComponent { title = 'My First Angular App!'...更多信息可以参考： angular cli github src目录应用所有的内容都在src目录中，包括组件、模板、样式、图片或者任何app需要的东西。...src . ├── README.md ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js...file 作用 e2e 里面包含了点对点的测试文件 node_modules 依赖的资源，基于package.json管理 .angular-cli.json cli的配置文件 .editorconfig

2.3K6 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭