When want to display different component based on some conditions:

<div class='course-category' [ngSwitch]="course.category">

    <div class="category" *ngSwitchCase="'BEGINNER'">Beginner</div>

    <div class="category" *ngSwitchCase="'INTERMEDIATE'">Intermediate</div>

    <div class="category" *ngSwitchCase="'ADVANCE'">Advance</div>

    <div class="category" *ngSwitchDefault="'BEGINNER'">All levels</div>

</div>

　　

[Angular] Angular ngSwitch Core Directive In Detail的更多相关文章

  1. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular的GitHub Repository Directive Example学习

    angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...

  3. angular自定义指令－directive

    Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...

  4. -_-#【Angular】自定义指令directive

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  5. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  6. Angular + asp.net core 入门

    一.简介 通俗的理解,Angular 只是一个前端框架,它只负责前端的事,但一个完整的项目还应该有后端,这其中之一可选的技术就是 asp.net core .这里简单学习一下两个框架之间的协同开发. ...

  7. [Angular] @ViewChild read custom directive and exportAs

    For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...

  8. Angular - - angular.Module

    angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...

  9. Angular - - Angular数据类型判断

    angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...

随机推荐

  1. nginx支持pathinfo

    server { root /webserver/www/api; listen ; server_name api.dnxia.com; location / { if (!-e $request_ ...

  2. npm下载包失败的几个原因

    1. 可能是由于网络问题导致下载包失败,因为qiang,所以,直接使用npm有些情况会导致下载包失败,使用cnpm源或者yarn下载等方法可以解决这个问题. 2. 这个包不存在,检查一下包的拼写或者路 ...

  3. 关于js的addEventListener 和一些常用事件

    element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEven ...

  4. POJ3668 Game of Lines

     Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6791   Accepted: 2523 Description Farm ...

  5. hdu 5084(矩阵操作)

    HeHe Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  6. 处理下最近的file_id小写问题

    update t_resource_info set FILE_ID = UPPER(FILE_ID);update t_resource_my_info set FILE_ID = UPPER(FI ...

  7. 计蒜客 28319.Interesting Integers-类似斐波那契数列-递推思维题 (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 I)

    I. Interesting Integers 传送门 应该是叫思维题吧,反正敲一下脑壳才知道自己哪里写错了.要敢于暴力. 这个题的题意就是给你一个数,让你逆推出递推的最开始的两个数(假设一开始的两个 ...

  8. Codeforces Round #369 (Div. 2) A. Bus to Udayland【字符串/二维字符数组求连起来的座位并改为其他字符】

    A. Bus to Udayland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. python正则表达式-re模块

    目录: 一.正则函数 二.re模块调用 三.贪婪模式 四.分组 五.正则表达式修饰符 六.正则表达式模式 七.常见的正则表达式 导读: 想要使用python的正则表达式功能就需要调用re模块,re模块 ...

  10. C语言基础之变量、作用域

    1.变量的定义 变量类型 变量名; int score; 2.变量的赋值 score = 100; score = a; score = b = 100; 3.变量的输出 int a = 200; p ...