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. Location of ESXi 5.1 log files

    Purpose This article provides the default location of log files on an ESXi 5.1 host. For other produ ...

  2. Python 二进制，十进制，十六进制转换

    十六进制 到 十进制 使用 int() 函数 ,第一个参数是字符串 '0Xff' ,第二个参数是说明,这个字符串是几进制的数.  转化的结果是一个十进制数. >>> int('0xf ...

  3. WPF中的URI

    在 Windows Presentation Foundation (WPF) 中,使用统一资源标识符 (URI) 标识和加载文件的方式有很多,包括: 指定当应用程序第一次启动时显示的用户界面 (UI ...

  4. Android平台开发-WIFI 驱动移植 -- 详细

    一.WIFI的基本架构(代码路径)     1.WIFI Settings应用程序:       packages/apps/Settings/src/com/android/settings/wif ...

  5. Kotlin来了

    kotlin优点(主要是代码简洁度) 1.避免空指针异常,其次在一个文件中java方法必须写在class里面,而kotlin则没要求 2.在同一个文件中,有class a则不允许在class外的方法( ...

  6. Error:Execution failed for task ':bearBabyClient:processDebugManifest'. > Manifest merger failed with multiple errors, see logs

    具体报错如上: 在右侧中 大方块圈中的[com.android.support:support-v4:26.0.0-alpha1] 这个文件导致的,在这的清单文件第27行合并失败,让使用tools:r ...

  7. NetFlow流量采集与聚合的研究实现

    http://www.21ic.com/app/analog/200907/44851.htm

  8. 获取a'p'p签名

    1.第一种方式 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list& ...

  9. 洛谷——P1067 多项式输出

    P1067 多项式输出 题目描述 一元 n 次多项式可用如下的表达式表示: 其中,aixi称为 i 次项,ai 称为 i 次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输出该 ...

  10. JQuery里面的知识

    JQuery是一个javaScript库 JQuery极大的简化了javaScript编程 通过点击 "TIY" 按钮来看看它是如何运行的. 演示JQuery的hide函数,隐藏了 ...