angular-cn/modules/angular2/docs/cheatsheet/built-in-directives.md
Victor Berchet da9b46a071 feat: camelCase Angular (kebab-case removal)
BREAKING CHANGE:

Angular is now fully camel case.

Before:

    <p *ng-if="cond">
    <my-cmp [my-prop]="exp">
    <my-cmp (my-event)="action()">
    <my-cmp [(my-prop)]="prop">
    <input #my-input>
    <template ng-for #my-item [ng-for-of]=items #my-index="index">

After

    <p *ngIf="cond">
    <my-cmp [myProp]="exp">
    <my-cmp (myEvent)="action()">
    <my-cmp [(myProp)]="prop">
    <input #myInput>`,
    <template ngFor="#my-item" [ngForOf]=items #myIndex="index">

The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
2015-12-09 19:59:40 -08:00

1.3 KiB

@cheatsheetSection Built-in directives @cheatsheetIndex 2 @description {@target js ts}import {NgIf, ...} from 'angular2/angular2';{@endtarget} {@target dart}import 'package:angular2/angular2.dart';{@endtarget}

@cheatsheetItem syntax: <section *ngIf="showSection">|*ngIf description: Removes or recreates a portion of the DOM tree based on the showSection expression.

@cheatsheetItem syntax: <li *ngFor="#item of list">|*ngFor description: Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

@cheatsheetItem syntax: `<div [ngSwitch]="conditionExpression"> <template [ngSwitchWhen]="case1Exp">... ... ...

`|`[ngSwitch]`|`[ngSwitchWhen]`|`ngSwitchWhen`|`ngSwitchDefault` description: Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

@cheatsheetItem syntax: <div [ngClass]="{active: isActive, disabled: isDisabled}">|[ngClass] description: Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.