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. Java面试题之CyclicBarrier和CountDownLatch的区别

    1.CyclicBarrier的某个线程运行到某个点后停止运行,直到所有线程都达到同一个点,所有线程才会重新运行: CountDownLatch线程运行到某个点后,计数值-1,该线程继续运行,直到计数 ...

  2. zepto方法

    1.$.inArray $.inArray v1.0+ $.inArray(element, array, [fromIndex]) ⇒ number 搜索数组中指定值并返回它的索引(如果没有找到则返 ...

  3. 关闭vscode打开新文件自动关闭预览文件功能

    经常碰到这个问题,我打开文件就是有用的,每次给我自动关闭了我还得去打开. 当然这个问题可以双击文件,接触那个文件的预览状态就可以解决了.不过还有一个更懒的方法,直接修改vscode配置就好了. // ...

  4. weblogic12c配置免密码启动

    在运行startWeblogic.sh时需要输入有效的账号密码才能启动weblogic,为简化操作,可以配置boot.properties来免输账号密码,配置方法如下:1.查看在./domains/x ...

  5. GitHub上README写法暨markdown语法解读

    原文: GitHub上README写法暨markdown语法解读 自从开始玩GitHub以来,就 越来越 感觉它有爱.最近对它的 README.md 文件颇为感兴趣.便写下这贴,帮助更多的还不会编写R ...

  6. 关于math头文件

    math.h是c语言里的 cmath是c++里的 fabs是对小数求绝对值 abs是对整数绝对值 用math.h里的abs对小数不能求绝对值- - fabs对小数取绝对值 abs是对整数 现在要对一个 ...

  7. flask框架基本使用(1)(基本框架搭建与请求参数接收)

    #转载请留言联系 Flask 是一个 Python 实现的 Web 开发微框架. 1.搭建Flask开发环境 在你开发项目的时候,你拥有的项目越多,同时使用不同版本的 Python 工作的可能性也就越 ...

  8. hdu 5062(水题)

    Beautiful Palindrome Number Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  9. [BZOJ1634][Usaco2007 Jan]Protecting the Flowers 护花 贪心

    1634: [Usaco2007 Jan]Protecting the Flowers 护花 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 885  So ...

  10. [thinkphp] 如何解析ajaxReturn返回的json字符串

    success: function(data){ var dataObj=eval("("+data+")");//转换为json对象 alert(dataOb ...