Diese Seite (Version-1) wurde zuletzt am 14-Apr.-2018 11:57 von Administrator geändert.

Du bist nicht autorisiert, diese Seite umzubenennen.

Du bist nicht autorisiert, diese Seite zu löschen.

Versionsgeschichte der Seite

Version Zuletzt geändert Größe Autor Änderungen Kommentar

Links

Eingehende Links Ausgehende Links
Angular Binding
Angular Binding

Versionsunterschiede

Unterschiede zwischen Version und .

Zeile 1: 62 Zeilen hinzugefügt.
[{ALLOW view All}]
[{ALLOW edit Authenticated}]
!!Angular forms / data binding
whole tree will be scanned for changes
! Two-way binding
* was used in AngularJS 1,x, now replaced with one way bindings via property and event bindung
* can be still used with <input ~[(ngModel)]="time.hours">
* app.module.ts need to imports: ~[FormsModule]
* <any ~[prop]="value" (propChange)="value=$event"></any> is equivalent to <any ~[(prop)]="value"></any>
* ngOnChange(changes: SimpleChanges) {...} (is also called initially, you can ignore ngOnInit())
* import {SimpleChanges} from '@angular/core';
! Event binding
* (<eventName>)='<method/statement>'
* <button (click)="time.hours=time.hours+1">Plus</button>
* canonical: <button on-click=...
* pseudo events (keydown.enter) (keydown.control.enter) ...
* $event gives access to event data (DOM) like $event.target.value
! Interpolation
* ~{~{property~}~}
* <div>Time: ~{~{getTime()~}~}</div>
! property binding
* ~[<DOM-attrib>]='instance.property'
* <input ~[value]="time?.hours"/> = safe-navigation operator (time!=null|undefined)
* <input bind-value="time?.hours"/> = canonical binding (equivalent to above)
* ~[DOM-API|https://developer.mozilla.org/en-US/docs/Web/API/] (html attributes vs dom)
* <td ~[attr.colspan]="calculateColSpan()"></td> = set atribute directly
* <div ~[class.alert]="temperatue>100">...</div> = set class directly
* <div ~[style.font-size.px]="calculateFontSize()">~{~{temperature~}~}</div>
! Local DOM variables in html
* #name
* <input #minutes ...> in class available like minutes.focus() (DOM)
* canonical: <input ref-minutes ...>
* @Input = input variable to place into DOM without iteration, iteration through component tag and * @Output
! Microsyntax (*)
* *ngXXX manipulates structure of DOM tree
*ngFor = <template ngFor let-value ~[ngForOf]="values>
*ngIf = <template ~[ngIf]="isVisible">
!Input / Output
* @Input()
** ngOnInit(){...}
** canonical: @Component({ inputs: ~['time',...] )}
* @Output()
** EventEmitter.emit(value) (Observable, part of RxJS=reactive/async)
** register for event in other component: (timeChange)="onTimeChanged($event)" ($event=emitted value)
** canonical: @Component({ outputs: ~['time',...] )}
! Children
* @ViewChildren
! ngClass
chapter 6
Diese Seite (Version-1) wurde zuletzt am 14-Apr.-2018 11:57 von Administrator geändert.Top