What is the difference between parentheses, brackets and asterisks in Angular2?
I have been reading the Angular 1 to 2 quick reference in the Angular website, and one thing I didn't completely understand was the difference between these special characters. For example one that uses asterisks:
<tr *ngFor="#movie of movies">
<td>{{movie.title}}</td>
</tr>
I understand here that the hash (#) symbol defines movie as a local template variable, but what does the asterisk before ngFor mean? And, is it necessary?
Next, are the examples that use brackets:
<a [routerLink]="['Movies']">Movies</a>
I somewhat understand that the brackets around routerLink bind it to that HTML attribute / Angular directive. Does this mean that they are a pointer for Angular to evaluate an expression? Like [id]="movieId" would be the equivalent of id="movie-{{movieId}}" in Angular 1?
Lastly, are parentheses:
<button (click)="toggleImage($event)">
Are these only used for DOM events and can we use other events like (load)="someFn()" or (mouseenter)="someFn()"?
I guess the real question is, do these symbols have a special meaning in Angular 2, and what is the easiest way to know when to use each one? Thanks!!
All details can be found here: https://angular.io/docs/ts/latest/guide/template-syntax.html
directiveName - is the short hand form for structural directives where the long form can only be applied to tags. The short form implicitely wraps the element where it's applied in a .
[prop]="value" is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element). There are special forms: [class.className] binds to a css class to enable/disable it [style.stylePropertyName] binds to a style property [style.stylePropertyName.px] binds to a style property with a preset unit [attr.attrName] binds a value to an attribute (visible in the DOM, while properties are not visible) [role.roleName] binds to the ARIA role attribute (not yet available)
[class.className] binds to a css class to enable/disable it
[style.stylePropertyName] binds to a style property
[style.stylePropertyName.px] binds to a style property with a preset unit
[attr.attrName] binds a value to an attribute (visible in the DOM, while properties are not visible)
[role.roleName] binds to the ARIA role attribute (not yet available)
prop="{{value}}" binds a value to a property. The value is stringified (aka interpolation)
(event)="expr" binds an event handler to an @Output() or DOM event
#var or #var has different functions depending on the context In an *ngFor="#x in y;#i=index" scope variables for the iteration are created (In beta.17 this is changed to *ngFor="let x in y; let i=index"`) On a DOM element
In an *ngFor="#x in y;#i=index" scope variables for the iteration are created (In beta.17 this is changed to *ngFor="let x in y; let i=index"`)
On a DOM element
On an Angular component a reference to the component
On an element that is an Angular component or has an Angular directive where exportAs:"ngForm" is defined, #myVar="ngForm" creates a reference to this component or directive.
[] - Property binding One-way from data source to view target. eg
{{expression}}
[target]="expression"
bind-target="expression"
We can use bind- instead of []
() -> Event Binding One-way from view target to data source
(target)="statement"
on-target="statement"
We can use on- instead of ()
[()]- Two way Binding Banana in a box
[(target)]="expression"
bindon-target="expression"
We can use bindon- instead of [()]
As mentioned already, the Angular documentation, especially the "hero tutorial", explains this deeper. Here is the link if you want to check it out.
Parentheses are events of the element you are working on, like the click on a button like your example; this could also be mousedown, keyup, onselect or any action/event for that element, and what is after the = is the name of the method to call -- using the parenthesis for the call. That method should be defined on your component class, i.e.:
<element (event)="method()"></element>
Brackets works the other way. They are to get data from your class -- the opposite of the parenthesis that were sending the event -- so a common example is the usage of a style like this:
<element [ngStyle]="{display:someClassVariable}">
See? You are giving the element a style based on your model/class.
For this you could have used...
<element style="display:{{ModelVariable}};">
The recomendation is that you use double curly brackets for things that you will print on the screen like:
<h1>{{Title}}</h1>
Whatever you use, if you are consistent, it will help the readability of your code.
Lastly, for your * question, it is a longer explanation, but it is very VERY important: It abstracts some methods' implementation that otherwise you would have to do to get an ngFor to work.
One important update is that in the ngFor you will no longer use hash; you need to use let instead as follows:
<tr *ngFor="let movie of movies">
<td>{{movie.title}}</td>
</tr>
One last thing worth mentioning is that all of the above applies also for your components, e.g. if you create a method in your component, it will be called using ():
<my-owncomponent
(onSearched)="MethodToCall()"
[MyInputData]="SearchParamsArray"></my-owncomponent>
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- What's the difference between @ViewChild and @ContentChild?
- What is the equivalent of ngShow and ngHide in Angular 2+?
- Difference between Constructor and ngOnInit
- What is the difference between Promises and Observables?
- What is the difference between declarations, providers, and import in NgModule?
- What's the difference between an Angular component and module
- What's the difference between markForCheck() and detectChanges()
- What is the difference between Subject and BehaviorSubject?
- What is the difference between "ng-bootstrap" and "ngx-bootstrap"?
- Difference between HttpModule and HttpClientModule
HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.
bind-for[]andon-for()or<template [ngFor]>for*ngFor.[ngModel]="foo" (ngModelChange)="foo = $event"where the first part updates thengModelproperty (@Input() ngModel;of theNgModeldirective) whenfoo` changes and the 2nd part updatesfoowhen the@Output() ngModelChange;(of theNgModeldirective) emits an event.NgModelis used to bind values to form elements and components.[(bar)]can be used for any@Input() bar;@Output() barChange;combination, also of your own components.[prop]="value"andprop="{{value}}"anything else than syntax? Both of them can pass value to@Input() value;in component.[prop]="value"can assign values of any type,prop="{{value}}"always stringifiesvaluebefore assignment and is therefore useless to pass objects.