Angular why asterisk (*)

by

Asterisk syntax is a syntatic sugar for more wordy template syntax which directive expands to under the hood, you are free to use any of these options.

Quote from the docs:

The asterisk is “syntactic sugar”. It simplifies ngIf and ngFor for
both the writer and the reader. Under the hood, Angular replaces the
asterisk version with a more verbose form.

The next two ngIf examples are effectively the same and we may write in either style:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 2+ and debounce
  6. Angular 5 Service to read local .json file
  7. Angular 2: Two backend service calls on success of first service
  8. Angular: Can’t find Promise, Map, Set and Iterator
  9. Wait for multiple promises to finish
  10. Angular2 component’s “this” is undefined when executing callback function
  11. Angular 2: Callback when ngFor has finished
  12. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  13. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  14. How to subscribe to an event on a service in Angular2?
  15. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  16. Angular 6 – process is not defined when trying to serve application
  17. Angular url plus sign converting to space
  18. How to cancel a subscription in Angular2
  19. How to Pass data from child to parent component Angular
  20. What is Angular 4 and from where I can learn more about it?
  21. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  22. How to ‘wait’ for two observables in RxJS
  23. Generate dynamic css based on variables angular
  24. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  25. Angular 2 Hover event
  26. angular 2 access ng-content within component
  27. How to use jQuery UI with Angular 2
  28. Is it a bad practice to use jQuery in Angular? [closed]
  29. How to Inject Angular2 Http service into es6/7 Class?
  30. Angular 4: How to read content of text file with HTTPClient

Leave a Comment