Angular Policy Differences

ng-for was used in AngularJS ie 1.X versions

ngFor without the asterisk is wrong and generates an error.

The correct way to do this in versions from angular 2.x is with *ngFor , this is why *ngFor as well as *ngIf and others are called structural directives . These directives manipulate the gift directly so the asterisk is a message for the angular to evaluate them first. Remember that you can not use two in the same element.

According to the tag documentation:

<div *ngIf="hero" class="name">{{hero.name}}</div>

flips

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

In other words, Angular creates this ng-template tag around your div in this case and evaluates the if before deciding whether to add the div to the div or not. The ng-template is a phantom tag that does not exist in the gift (does not disturb the css) really and does some logic.

And the [ngStyle] is another topic, basically you can link a property of an html tag to a variable in your TypeScript. For example: in your html

<a [href]="minhaUrl">link</a>

in its component

export class AppComponent {
  minhaUrl='https://google.com'
}

and equivalent to

 <a href="https://google.com">link</a>

With the advantage that you can change the value in this case of myUrl and the property would change accordingly.

Notice that in one case you pass the name of a variable that contains the value and in the other you pass the value directly.