markdown Angular 2 Snippets - 基础知识

Posted 2021-05-06

# Basics

## Component syntax

...

## AppModule

...

## Data binding

### String interpolation

* Used to OUTPUT DATA in our template
* Put between `{{ }}` any expression which can be resolved to a string:
`{{ serverStatus }}` //value of a property
`{{ getServerStatus() }}` //a method that returns a string

### Property binding

* Used to CHANGE PROPERTIES in your DOM elements
* Put between `[]` a native property/attribute of an HTML tag that you want to dynamically bind to some property:
`allowedNewServer = true;
<button [disabled]="!allowedNewServer">`
**don't mix property binding with string interpolation: `[disabled]="{{allowNewServer}}"`**

### Event binding

* Put the name of the event between `()` and then the method to execute:
`<button (click)="onCreateServer()">`

`onCreateServer() {
	this.status = "Created";
}` // 'on' naming convention to indicate who or when this method will be called

* Passing and using data with event binding:

`<input type="text" (input)="onUpdateServerName($event)">` //$event is the data that this event emitted (it depends on the event: click, input, etc). We capture this data here passing it to the method.
`<p>{{ serverName }}</p>`

`serverName: string = '';`

`onUpdateServerName(event: Event){` //argument is of type 'Event'
`  this.serverName = (<HTMLInputElement>event.target).value;` //explicit casting of the HTML element to typescript
`}`

### Two-way data binding

* Use the 'banana-in-a-box' syntax `[( )]` to get property and event binding at once (works in two directions):
`<input type="text" [(ngModel)]="serverName">`
`<p>{{ serverName }}</p>`
* will trigger at the input event and will update the value in our component automatically. 
* Also, will update the value of the input element if we change te property value from another place.

*Note: FormsModule is necessary for two-way data binding to work, import it in your AppModule:
`import { FormsModule } from '@angular/forms';`*

## Built in directives

### Structural directives

* Add/remove DOM elements conditionally / repeatedly 
* the `*` is necessary to indicate that is a structural directive

#### `*ngIf`

`serverCreated = false;`
`<p *ngIf="serverCreated">Server created</p>` // the condition has to be an expression that can be evaluated to true or false

Adding an 'else' case:
```
<p *ngIf="serverCreated; else noServer">Server created</p>
<ng-template #noServer>
	<p>No server was created!</p>
</ng-template>
```
* `#noServer` is a local reference, like a marker
* `ng-template` is a directive you use to mark some places in the DOM. 

Si solo trabajamos con `ng-template` para ambas partes del `ngIf`:
```
<ng-template [ngIf]="isAuthenticated" [ngIfElse]=" notAuthenticatedMenu">
  <p>Authenticated</p>
</ng-template>
<ng-template #notAuthenticatedMenu>
  <p>Not authenticated</p>
</ng-template>
```

#### `*ngSwitch`

```javascript
<div [ngSwitch]="value"> //property to switch
  <p *ngSwitchCase="5">Value is 5</p>
  <p *ngSwitchCase="10">Value is 10</p>
  <p *ngSwitchDefault>Value is Default</p> //default value
</div>
```


#### `*ngFor`

`<app-server *ngFor="let server of servers"></app-server>`
`<p *ngFor="let server of servers; let i = index">` //gives you access to the index of the current iteration (starting at zero)

### Attribute directives

* Add/remove styles or classes conditionally
* Unlike structural directives, attribute directives don't add or remove elements. They only change the element they were placed on.

#### `ngStyle`

`<p [ngStyle]="{ 'background-color': getColor()}">Server is {{ getServerStatus() }}</p>` // the directive is just `ngStyle`, with `[ngStyle]` we are binding to this `ngStyle` in this directive

`getColor() {
	return this.serverStatus === 'online' ? 'green' : 'red';
}`

#### `ngClass`

* with `ngClass` you pass an object where: keys = classNames, values = the conditions wheter this class should be attached or not
`<p [ngClass]="{ 'online': serverStatus === 'online' }">Server is {{ getServerStatus() }}</p>`