<div mdcChipSet="choice">

    <div mdcChip *ngFor="let item of ywDicTypes" (selectedChange)="selected($event,item)">

        <div mdcChipText> {{item | localize}}</div>

    </div>

</div>

【效果】

【备注】

mdcChipSet，可以设置的值：'choice' | 'filter' | 'input' | 'action';

【参考】 https://material-components.github.io/material-components-web-catalog/#/component/chips

Material Component--mdcChipSet使用的更多相关文章

  1. Cesium原理篇：Material

    Shader 首先,在本文开始前,我们先普及一下材质的概念,这里推荐材质,普及材质的内容都是截取自该网站,我觉得他写的已经够好了.在开始普及概念前,推荐一首我此刻想到的歌<光---陈粒>. ...

  2. Material使用08 MdDialogModule、MdAutocompleteModule

    1 MatDialog 1.1 简要描述 MdDialog是一个服务,可以利用它来打开一个具有material风格和动画效果的对话框 技巧01:虽然已经在模块级别导入了MdDialogModule但是 ...

  3. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  4. [转]Material使用08 MdDialogModule、MdAutocompleteModule

    本文转自:https://www.cnblogs.com/NeverCtrl-C/p/8125346.html 1 MatDialog 1.1 简要描述 MdDialog是一个服务,可以利用它来打开一 ...

  5. [转]Angular 4|5 Material Dialog with Example

    本文转自:https://www.techiediaries.com/angular-material-dialogs/ In this tutorial, we're going to learn ...

  6. Angular Material & Hello World

    前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的i ...

  7. angular material dialog应用

    1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (clic ...

  8. Cesium原理篇：Material【转】

    https://www.cnblogs.com/fuckgiser/p/6171245.html Shader 首先,在本文开始前,我们先普及一下材质的概念,这里推荐材质,普及材质的内容都是截取自该网 ...

  9. SpringMVC连接MongoDB操作数据库

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  10. Angular 任务列表页

    新建一个任务Module $ ng g m task 功能:项目列表显示,增加,修改,删除项目.邀请其它人员加入项目. 单一性原则:希望搭建多个组件,每个组件负责自己的功能. 一.task相关组件 $ ...

随机推荐

  1. Java实现 LeetCode 450 删除二叉搜索树中的节点

    450. 删除二叉搜索树中的节点 给定一个二叉搜索树的根节点 root 和一个值 key,删除二叉搜索树中的 key 对应的节点,并保证二叉搜索树的性质不变.返回二叉搜索树(有可能被更新)的根节点的引 ...

  2. Java实现 LeetCode 206 反转链表

    206. 反转链表 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL ...

  3. Java实现 洛谷 P1508 Likecloud-吃、吃、吃

    import java.util.Arrays; import java.util.Scanner; public class Main { static int n, m; static int[] ...

  4. java实现蔬菜价格计算

    ** 蔬菜价格计算** 计算蔬菜总价 为了丰富群众菜篮子,平抑菜价,相关部分组织了蔬菜的调运.今某箱中有多个品种的蔬菜.蔬菜的单价(元/公斤)存放在price数组中,蔬菜的重量(公斤)存放在weigh ...

  5. java实现第五届蓝桥杯扑克序列

    扑克序列 AA223344,一共4对扑克牌.请你把它们排成一行. 要求:两个A中间有1张牌,两个2之间有2张牌,两个3之间有3张牌,两个4之间有4张牌. 4A3A2432, 2342A3A4 请填写出 ...

  6. 【JavaScript】原生js实现：强制保留2位小数（由于toFixed()报错）

    function decimal(x) { var f = parseFloat(x); if (isNaN(f)) { alert("请输入数字!"); return; } va ...

  7. electron内使用vue-slider-component组件报“$attrs is readonly”错误

    解决办法 安装vue-no-ssr插件 https://www.npmjs.com/package/vue-no-ssr npm install vue-no-ssr --save-dev 代码 &l ...

  8. 基于Nginx实现访问控制、连接限制

    0 前言 Nginx自带的模块支持对并发请求数进行限制, 还有对请求来源进行限制.可以用来防止DDOS攻击.阅读本文须知道nginx的配置文件结构和语法. 1. 默认配置语法 nginx.conf作为 ...

  9. HDFS ha 格式化报错：a shared edits dir must not be specified if HA is not enabled.

    错误内容: Formatting using clusterid: CID-19921335-620f-4e72-a056-899702613a6b2019-01-12 07:28:46,986 IN ...

  10. Grafana6.4.4 + zabbix 4.2

    环境简介 OS:Centos 7.4 zabbix:4.2.6 Grafana:6.4.4 一.yum 直接安装的方式 官方推荐有几种安装方式我采用yum 直接安装的方式 官方doc: https:/ ...