# Angular 學習筆記

### Day 1

都在引入component

### Day 2
印象最深的是與vue的不同之處
1. #### Property Binding

| Angular | vue |
|:-----------------:|:----------------:|
| [] | : |
| [disabled]="data" | :disabled="data" |

2. #### Function Binding
| Angular | vue |
|:----------------:|:-------------:|
| () | @ |
| (click)="ooxx()" | @click="ooxx" |

3. #### Two-way-databinding

#### Hint:
You need to enable the ngModel directive.
This is done by adding the **FormsModule** to the **imports[]** array in the **AppModule**.
You then also need to add the import from @angular/forms in the app.module.ts file:

    import { FormsModule } from '@angular/forms'; 

| Angular | vue |
|:-----------------------:|:------------------:|
| ([ngModule])="dataName" | v-model="dataName" |
| @ | |

4. #### *ngIf v.s. v-if

<p *ngIf="serverCreated; else noServer"></p>
<ng-template #noServer>
<p>NO SERVER LA !!!!</p>
</ng-template>

Hint: ng-template #name

5. #### ngFor v.s. v-for

    <app-server *ngFor="let item of servers;let i = index">
        {{ i }} :{{ item }} 
    </app-server>

6. #### [ngStyle], [ngClass] 用法如Vue的 :style , :class相同

    <div *ngFor="let item of log; let i = index" 
         [ngStyle]="{backgroundColor: i >= 4 ? 'blue':'green'}" 
         [ngClass]="{online: i >= 4}">{{ item }}</div>

### Day 3

1.資料綁定

| Angular | vue |
|:-----------------------:|:----------------------:|
| [dataName]="parentData" | :dataName="parentData" |
| | props:['dataName'] |