Vincec's Dimension

Angular7 Notes

Word count: 175 / Reading time: 1 min
2019/03/07 Share

Decorator

@Component()

Binding

  • <h1></h1>
  • <h1 [textContent]="name"></h1>
  • <h1 textContent=""></h1>

Delete Example

app.component.html

1
2
3
<a class="delete" (click)="onDelete()">
remove
</a>

app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';

@Component({
selector: 'mw-media-item',
templateUrl: 'app/app.component.html',
styleUrls: ['app/media-item.component.css']
})
export class MediaItemComponent{
onDelete(){
console.log('deleted');
}
}

NGIF

1
2
3
4
5
6
<div *ngif="mediaItem.watchOn">{{mediaItem.watchOn}}</div>

<!--or-->
<ng-template [ngIf]="mediaItem.watchOn">
<div>{{mediaItem.watchOn}}</div>
</ng-template>

NGFOR

1
2
3
4
5
6
7
<section>
<mw-media-item
*ngFor="let mediaItem of mediaItems"
[mediaItem]="mediaItem"
(delete)="onMediaItemDelete($event)">
</mw-media-item>
</section>

NGCLASS

1
2
3
4
5
6
7
8
<section>
<mw-media-item
[ngClass]="{'medium-movies': mediaItem.medium==='Movies', 'medium-series': mediaItem.medium==='Serires'}"
*ngFor="let mediaItem of mediaItems"
[mediaItem]="mediaItem"
(delete)="onMediaItemDelete($event)">
</mw-media-item>
</section>

Animation

  • State: Void, Defualt(*), Custom
    • Add Item: void => *, Remove: * => void

Reference

Author: VINCEC

Permalink: https://vince-amazing/blog/2019/03/07/angular-notes/

Date: March 7th 2019, 2:38:37

Copyright license: The article usingCC licensing 4.0

CATALOG
  1. 1. Decorator
  2. 2. Binding
    1. 2.1. Delete Example
  3. 3. NGIF
  4. 4. NGFOR
  5. 5. NGCLASS
  6. 6. Animation
  • Reference