The * before the ngFor denotes the fact that *ngFor is what is called a structural directive, a directive that is going to affect the DOM in some way adding or removing elements to it.

Backtick (`) are used to define the new ES6 template strings. They are a new great feature of ES6 that let’s you write multiline strings natively and insert any expression directly within a string with a very straightforward syntax.

Why don’t we use the Injectable decorator in components?

Well that’s because the Component decorator enables dependency injection directly.

Angular 2 has support for these data-bindings:

1. Interpolation: One-way data binding from the component to the template. Let’s you display information from the component into the template. Example: {{user.name}}.

2. Property bindings: One-way data binding from the component to the template. Let’s you bind data from the component into the template. Example: [src]="user.imageUrl".

3. Event bindings: One-way data binding from the template to the component. Let’s you bind template events to the component. Example [click)="selectuser(user)".

4. [(ngModel)]: Two-way data binding from the component to the template and vice versa. Example [(ngModel)]="user.name".