- Interpolation - This is a one way binding from the class to the template. You can use concatenation, calculations, and even call class methods inside the mustaches.
- <div>{{ someValue }}</div>
- <div>{{7*4}}</div>
- <div>{{'Title: ' + someValue}}</div>
- <div>{{'Title: ' + getTitle()}}</div>
- Property Binding - Sets an elements property to the value of a template expression. The elements property is surrounded by square brackets, and the expression is surrounded by quotes.
- <img [src]='someValue'>
- Event Binding - Listens for events on the element and triggers class methods when the event occurs. The event name is surrounded by parenthesis. The class method is surrounded by quotes. The event object is exposed by Angular through $event.
- <div (click)='divClicked($event)'>Click Me!</div>
- Two-way Binding - Utilizes ngModel to update a class property and the form element when the value is changed. Two-way binding uses the "banana in a box" syntax.
- <input [(ngModel)]='someValue'><div>{{someValue}}<div>
Just a place to empty my brain from time to time
in an attempt to help me regain clarity.
Sunday, July 10, 2016
Angular 2 Data Binding notes
Just some notes on the different ways to use data binding in Angular 2:
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment