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. ci动态设置config配置

    $this->config->set_item('cookie', 'item_value');echo $this->config->item('cookie');

  2. vue(三)

    一.vue的特点 1.响应式的数据绑定(一旦修改了数据,立马更新视图) 数据驱动思想 (数据到视图的映射.操作数据改变视图.简化对DOM的操作) 追踪依赖变化 (  Object.defineProp ...

  3. 2018超详细sublime text3+python3.x安装配置教程（附常用插件安装教程）

    导读 本文是关于2018年7月最新版sublime text3+pythin3.x下载及安装配置教程,sublime text3版本为3176,python版本为3.7,安装环境是基于windows1 ...

  4. POJ1163 The Triangle

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44997   Accepted: 27174 Description 73 ...

  5. sql 查找表引用的存储过程

    USE [master] GO /****** Object: StoredProcedure [dbo].[uspGetDepends] Script Date: 05/12/2016 14:11: ...

  6. glGenTextures

    http://blog.sina.com.cn/s/blog_67ede2d80100w3i8.html glGenTextures(GLsizei n, GLuint *textures)函数说明 ...

  7. MFC/C++/C中字符类型CString, int, string, char*之间的转换

    1 CString,int,string,char*之间的转换 string 转 CString CString.format("%s", string.c_str()); cha ...

  8. Nginx整合PHP原理

    安装Nginx        在网上,看到不少人装Nginx 时非常麻烦,配置时用了一大堆选项,请问你们真实现那么多功能么?害的我越看越郁闷.此次安装Nginx如果是按着上面笔者的步骤一步步走下来,安 ...

  9. iOS开发者证书申请及应用上线发布详解

    一个小教程登录开发者中心:http://developer.apple.com/ 第零部分:本地生成密钥1.打开mac的钥匙串访问  2.选择钥匙串的证书助理(有些可能是英文的)   3.点击继续后存 ...

  10. ECShop安装实录

    版本: ecmoban_V2.7.3_UTF8_20150623 来源: 官网 一. 给 C:\Windows\temp目录增加 IIS_Users 完全权限. 二. 安装报错: Warning: d ...