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. HDU1520 树形DP入门

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. symfony3常用记忆

    1.控制器里获取当前用户信息 $user = $this->getUser(); 2.判断当前用户是否登录 // yay! Use this to see if the user is logg ...

  3. fatal error LNK1104: 无法打开文件“LIBC.lib”错误（转）

    原文转自 http://blog.csdn.net/qq1028850792/article/details/41546043 方法一: 用VS2005重新编译某个工程的发生了链接错误,现在把这个解决 ...

  4. windows 自动关机

    按WIN+R在窗口中输入:shutdown -S -T 3600  然后回车.即可在一小时后关机,如果你想在半个小时后关机,那么就把3600改成1800单位是秒

  5. 掌握 Linux 调试技术【转】

    转自:https://www.ibm.com/developerworks/cn/linux/sdk/l-debug/index.html 您可以用各种方法来监控运行着的用户空间程序:可以为其运行调试 ...

  6. Linux内存管理之mmap详解 【转】

    转自:http://blog.chinaunix.net/uid-26669729-id-3077015.html 一. mmap系统调用 1. mmap系统调用 mmap将一个文件或者其它对象映射进 ...

  7. 第一章：1-10、试在下列条件下比较电路交换和分组交换。要传送的报文共x（bit），从源站到目的站共经过k段链路，每段链路的传播时延为d（s），数据率为C（bit/s）。在电路交换时电路的建立时间为s（s）。在分组交换时分组长度为p（bit），且各结点的排队等待时间可忽略不计。问在怎样的条件下，分组交换的时延比电路交换的要小？

    <计算机网络>谢希仁著第四版课后习题答案答:对电路交换,当t=s时,链路建立: 当t=s+x/C,发送完最后一bit:                 当t=s+x/C+kd,所有的信息到 ...

  8. asp.net生成word文档服务器配置

    一.asp.net生成word文档,布署到正式的服务器上就出现           错误:System.Runtime.InteropServices.COMException (0x800A1098 ...

  9. HDU 1171 Big Event in HDU【01背包/求两堆数分别求和以后的差最小】

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  10. Python与数据库[2] -> 关系对象映射/ORM[3] -> sqlalchemy 的声明层 ORM 访问方式

    sqlalchemy的声明层ORM访问方式 sqlalchemy中可以利用声明层进行表格类的建立,并利用ORM对象进行数据库的操作及访问,另一种方式为显式的 ORM 访问方式. 主要的建立步骤包括: ...