angular/aio/content/cheatsheet/built-in-directives.md
Pete Bacon Darwin 600402d440 build(aio): big move of docs related files (#14361)
All the docs related files (docs-app, doc-gen, content, etc)
are now to be found inside the `/aio` folder.

The related gulp tasks have been moved from the top level
gulp file to a new one inside the `/aio` folder.

The structure of the `/aio` folder now looks like:

```
/aio/
  build/         # gulp tasks
  content/       #MARKDOWN FILES for devguides, cheatsheet, etc
    devguides/
    cheatsheets/
  transforms/    #dgeni packages, templates, etc
  src/
    app/
    assets/
    content/    #HTML + JSON build artifacts produced by dgeni from /aio/content.
                #This dir is .gitignored-ed
  e2e/           #protractor tests for the doc viewer app
  node_modules/ #dependencies for both the doc viewer builds and the dgeni stuff
                #This dir is .gitignored-ed
  gulpfile.js   #Tasks for generating docs and building & deploying the doc viewer
```

Closes #14361
2017-02-09 11:58:36 -08:00

1.3 KiB

@cheatsheetSection Built-in directives @cheatsheetIndex 3 @description {@target ts}import { CommonModule } from '@angular/common';{@endtarget} {@target js}Available using the ng.common.CommonModule module{@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="let 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 [ngSwitchCase]="case1Exp">... ... ...

`|`[ngSwitch]`|`[ngSwitchCase]`|`ngSwitchCase`|`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 expression should return {class-name: true/false} map.