Angular 2 came out with observables isn’t feature, but a standard used for managing async data. Observables are extensively used in the HTTP service.

Example:

import { Http, Response } from ‘@angular/http’;

import { Observable } from ‘rxjs/Rx’;
import { Injectable } from ‘@angular/core’;

@Injectable()
export class UserService{

    constructor(
        public http: Http
    ) {}

    public getUserList() {
        return this.http.get("/api/userlist").map((res: Response) => res.json())
    }
}

Above Code is for creating a HttpClient Service with a getUserList method that returns an observable, by which List of Users will be displayed. Above method contains observable so need to subscribe it which can be done in Multiple ways.

Using async Pipe:  By using async pipe Angular deals with a subscription in component and will automatically subscribe and unsubscribe. But import “CommonModule” in the module file of a component.

In Component.ts

import { Component } from ‘@angular/cor’;
import { Observable } from ‘rxjs/Rx’;

import { UserService } from ‘../services/client’;
// interface
import { User } from ‘../services/interfaces’;
@Component({
    selector: "user-list",
    templateUrl:  "./template.html",
})
export class UserList {
    public users: Observable<User[]>
    constructor(
        public client: UserService ,
    ) { }
    public ngOnInit() {
        this.users = this.client.getUserList()
    }
}

In template.html

<ul class="user_list" *ngIf="(users | async).length">
    <li class="user" *ngFor="let user of users | async">
        {{ user.name }} - {{ user.role }}
    </li>
</ul>

Using subscribe() method:  Actual use of using subscribe() method is when you want to do some changes in data before its rendered in HTML.

In Component.ts

import { Component } from ‘@angular/cor’;

import { UserService } from ‘../services/client’;

import { User} from ‘../services/interfaces’;

@Component({
    selector: "user-list",
    templateUrl:  "./template.html",
})
export class UserList {
    public users: User[]
    constructor(
        public client: UserService ,
    ) { }

    public ngOnInit() {
        this.client.getUserList().subscribe((users: User[]) => {
            // do changes with data here.
            // assign data property in the end
            this.users = users
        })
    }
}

In template.html

<ul class="user_list" *ngIf="users.length">
    <li class="user" *ngFor="let user of users">
        {{ user.name }} - {{ user.role }}
    </li>
</ul>

Conclusion: You can see template.html  is quite similar, but component logic become different and complex if you use Using subscribe() method. I would recommend to choose Using async Pipe. As its easy and don’t have to manually manage subscriptions.