What is the difference between parentheses, brackets and asterisks in Angular2?

by

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 <template> tags. The short form implicitely wraps the element where it’s applied in a <template>.

  • [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)

  • 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 <div #mydiv> a reference to the 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.

More Related Contents:

  1. Can I get today’s date plus one month in moment js? [duplicate]
  2. angular-cli server – how to proxy API requests to another server?
  3. How to add debounce time to an async validator in angular 2?
  4. How can we detect when user closes browser?
  5. caching results with angular2 http service [duplicate]
  6. How to instantiate and apply directives programmatically?
  7. How to share data/change between components
  8. How can get HttpClient Status Code in Angular 4
  9. Angular 4 – Update Meta tags dynamically for Facebook (Open graph)
  10. How to access a constant in an Angular 2 component and service?
  11. Angular2 child component as data
  12. Is there a type for “Class” in Typescript? And does “any” include it?
  13. angular 2 – adding 3rd party libs
  14. Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays
  15. @firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn’t respond within 10 seconds
  16. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  17. How to extend / inherit components?
  18. How do I navigate to a parent route from a child route?
  19. Set base url for angular 2 http requests
  20. Detect changes in objects inside array in Angular2
  21. Angular2 – Interpolate string with html
  22. Angular 6 – Could not find module “@angular-devkit/build-angular”
  23. What are all the valid selectors for ViewChild and ContentChild?
  24. Lazy Loading BrowserModule has already been loaded
  25. No methods in http response object
  26. Redirect to a different component inside @CanActivate in Angular2
  27. What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4
  28. How to import component into another root component in Angular 2
  29. ERROR in TypeError: Cannot read property ‘flags’ of undefined
  30. How to get Angular2 to bind component in innerHTML

Leave a Comment