as keyword in angular 4?

You have prepared the best example of using "as" keyword.

If you did not use it, your code would be less readable and it look like that:

<div *ngIf="users | async as usersModel">
    <h2>{{ (users | async)?.name }}</h2> <small>{{ (users | async).age }}</small>
</div>

In this example users is Observable object. Thanks to as keyword, you can assign to userModel result of async pipe on Observable object. F.e.

if users is users: Observable<User>; then usersModel is a result of async pipe on users variable, so it's like usersModel: User object.

@EDIT for question about as and let

I can't tell you what is the difference between as and let, because these are two different things. let is a javascript variable type, that:

let allows you to declare variables that are limited in scope to the block

as is a Angular keyword, which can you assign result of method/pipe to other variable.

This is your first post so I remind: Angular is not programming language, but JavaScript framework. Most things in Angular is related with pure JS or TS.

Declaration of for loop in Angular is copy of declaration for loop by array from ECMAScript6, f.e.

for loop (ECMAScript6)

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}

for loop in component template

<div *ngFor="let user of users">

Keyword as is a shortcut of assigment to variable result of method, f.e for some pipe

some.pipe.ts

@Pipe({
    name: 'somePipe'
})
export class SomePipe {
    transform(value: number): number {
        return number * 2;
    }
}

using <div *ngIf="someValue | somePipe as otherValue"> is like:

let otherValue = SomePipe.transform(someValue);

You get it?

p.s: Last paragraph in my answer is only mental shortcut, of course. If you want know, how ngFor and ngIf directives works "inside", I recommend you to watch Nir Kaufman - Demystified Angular Directives lecture.

Accepted answer misses one very important point: async subscribe to your observable to get you the resolved values.

Imagine this scenerio:

component:

user:Observable<IUser> = httpClient.get(url);

template:

<div>
    <h2>{{ (users|async).name }}</h2> <small>{{ (users|async).age }}</small>
</div>

In above case since you are using async twice, httpClient is making get request twice.

So to answer your question:

Q. What is the main use of as keyword?

A. as keyword makes your code look good, but more importantly it makes sure you use async only once for a given observable as I explained above.

Q. What is the difference between as and let in the template?

A. let is a Javascript keyword. as keyword is only recognized by angular template compiler. Both do the same job of declaring and initializing a variable. In some places, like in *ngFor both are replaceable. But in case of *ngIf, it expects a boolean variable in expression and let x = true doesn't return a boolean, so you can only use as.

Q. What is the difference between of users object and userModel object

A. This is already answered. users object is an Observable and userModel object is the resolved value of users Observable.

as keyword in angular 4?

Tags:

Let

Angular

Related

Recent Posts