Angular 2 Tutorials with Examples

Angular 2/4 FormBuilder Example

This page will walk through Angular FormBuilder example. It is used to create a big reactive form with minimum code in Angular.

Angular 2/4 OnChanges + SimpleChanges Example

On this page we will provide Angular OnChanges and SimpleChanges example. Angular provides lifecycle hooks for change detection.

Angular 2/4 Dynamic Component Loader Example

This page will walk through Angular dynamic component loader example. Generally a component is loaded using component selector in component template that is identified at Angular compile time.

Angular 2/4 Route Guards: CanActivate and CanActivateChild Example

This page will walk through Angular 2/4 route guards CanActivate and CanActivateChild example. CanActivate is used for authentication and CanActivateChild is used for authorization.

Angular 2/4 Named Router Outlet + Popup Example

This page will walk through Angular 2/4 named router outlet + popup example. Named outlet is used to perform a task in popup view.

Angular 2/4 Animations ExampleThis page will walk through Angular animations example. Angular animation uses CSS animations. We can bind animation logic with rest of our application code using Angular animations.

Angular 2/4 Component Styles :host, :host-context, /deep/ Selector Example

This page will walk through Angular component styles :host, :host-context, /deep/ selector example. Component styles can use few special selectors such as :host, :host-context and /deep/ with shadow DOM.

Angular 2/4 Child Routes and Relative Navigation Example

This page will walk through Angular child routes and relative navigation example. A route can have one or more than one child routes. Child routes can have their own child routes and so on.

Angular 2 Radio Button and Checkbox Example

This page will walk through Angular 2 radio button and checkbox example. We will provide demo using template-driven form and reactive form.

Angular 2 Custom Directives Example

This page will walk through Angular 2 custom directives example. Angular provides three types of directive: component directive, attribute directive and structural directive.

Angular 2 Select Option + Multiple Select Option + Validation Example using Template-Driven Form

This page will walk through Angular 2 select option + multiple select option + validation example using template-driven form. We will provide end to end demo for how to populate select option and multiple select options.

Angular 2 Http get() Parameters + Headers + URLSearchParams + RequestOptions Example

This page will walk through Angular 2 Http get() parameters + Headers + URLSearchParams + RequestOptions example. Angular Headers class is used to create headers.

Angular 2 FormGroup Example

This page will walk through Angular 2 FormGroup example. FormGroup takes part in creating reactive form. FormGroup is used with FormControl and FormArray.

Angular 4 NgIf-Then-Else Example

This page will walk through Angular 4 NgIf-Then-Else example. NgIf conditionally includes a template based on the value of expression. It adds or removes the HTML element in DOM layout.

Angular 2 @ViewChild() Example

This page will walk through angular 2 @ViewChild() example. @ViewChild() decorator configures a view query. @ViewChild() decorator can be used to get the first element or the directive.

Angular 2 Custom Structural Directive Example

This page will walk through angular 2 custom structural directive example. Angular provides three types of directive: component directive, attribute directive and structural directive.

Angular 2 Custom Attribute Directive Example

This page will walk through angular 2 custom attribute directive example. Angular provides three types of directive: component directive, attribute directive and structural directive.

Angular 2 FormControl ExampleThis page will walk through angular 2 FormControl example. It is used to create angular reactive form. FormControlcan be used standalone as well as with HTML form tag.

Angular 2 NgForm with NgModel Directive Example

On this page we will provide angular 2 NgForm with NgModel directive example. To create HTML form using NgFormwith NgModel is called template-driven form.

Angular 2 Http post() Example

On this page we will provide angular 2 Http post() example. It performs a request using HTTP POST method. In Http.post() method, we need to pass server URL, any object to post.

Angular 2 Http get() Example

On this page we will provide angular 2 Http get() example. Angular HTTP library provides Http client for server communication. get() is the Http client method.

Angular 2 Async Pipe Example

On this page we will provide angular 2 Async Pipe example. It unwraps a value from an asynchronous primitive. If we have Observable or Promise instance then we use it directly with AsyncPipe.

Angular 2 Routing and Navigation Example

This page will walk through angular 2 routing and navigation example. Using angular router we can navigate from one view to next while performing our task.

Angular 2 Services Example using @Injectable()This page will walk through angular 2 services example using @Injectable(). Angular services are injectable and injector can inject it in any component in our angular application.

Angular 2 Custom Pipe Example

This page will walk through angular 2 custom pipe example. We can write our own custom pipe and that will be used in the same way as angular built-in pipes.

Angular 2 Slice Pipe Example

On this page we will provide angular 2 slice pipe example. SlicePipe is angular CommonModule API. Slice pipe slices a given array or string into subset.

Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example

On this page we will provide angular 2 Decimal Pipe, Percent Pipe and Currency Pipe example. These angular API belong to CommonModule. Decimal Pipe formats a number as decimal number.

Angular 2 Json Pipe ExampleOn this page we will provide angular 2 json pipe example. Angular JsonPipe converts data into JSON string. It uses json keyword with pipe operator to convert any expression result into JSON string.

Angular 2 UpperCase Pipe and LowerCase Pipe Example

On this page we will provide angular 2 uppercase pipe and lowercase pipe example. Angular UpperCasePipe transforms string to uppercase and LowerCasePipe transforms string to lowercase.

Angular 2 Pipe Operator (|) and Safe Navigation Operator (?.) Example

On this page we will provide angular 2 pipe operator and safe navigation operator example. These operators are angular 2 template expression operators.

Angular 2 Template Reference Variable Example

On this page we will provide angular 2 template reference variable example. A template reference variable is a reference to a DOM element or directive within a template.

Angular 2 Two-Way Data Binding + NgModel Example

This page will walk through angular 2 two-way data binding and use of NgModel in binding example. Using two-way binding we can display a data property as well as update that property when user makes changes.

Angular 2 Attribute Binding Example

On this page we will provide angular 2 attribute binding example. Attribute binding is to set the value of attribute directly.

Angular 2 CSS Class Binding Example

On this page we will provide angular 2 CSS class binding example. We can add and remove CSS class names from the HTML element class attribute using CSS class binding.

Angular 2 NgStyle and Style Binding Example

On this page we will provide angular 2 NgStyle and style binding example. Style binding binds an inline style property with a given value and NgStyle sets more than one inline styles dynamically.

Angular 2 @Input and @Output Example

This page will walk through angular 2 @Input and @Output example. @Input is a decorator to mark an input property and @Output is a decorator to mark an output property.

Angular 2 Custom Event Binding + EventEmitter Example

On this page we will provide angular 2 custom event binding and EventEmitter example. Angular framework provides event binding using in-built event as well as custom event.

Angular 2 Event Binding Example

On this page we will provide angular 2 event binding example. Event binding is a data binding from an element to a component.

Angular 2 NgIf Example

This page will walk through angular 2 NgIf example. NgIf is a directive that is used to add an element subtree to the DOM on the basis of true value of an expression.

Angular 2 NgSwitch Example

On this page we will provide angular 2 NgSwitch example. NgSwitch is an angular directive that displays one element from a possible set of elements based on some condition.

Angular 2 Property Binding Example

On this page we will provide angular 2 property binding example. Property binding is a one-way data binding from data source to view target.

Angular 2 NgClass Example

On this page we will provide angular 2 NgClass example. It is used to add and remove CSS classes on an HTML element.

Angular 2 NgFor Example

This page will walk through angular 2 NgFor example. NgFor is a directive that iterates over collection of data. It is used to customize data display.

Angular 2 Date Pipe Example

On this page we will provide angular 2 Date Pipe example that formats a date according to locale rule. Angular 2 DatePipe provides different date formats.

Angular 2 Interpolation Expression HTML Example

This page will walk through angular 2 interpolation expression HTML example. Interpolation is represented using double-curly braces. Using Interpolation we evaluate expressions.

Getting Started with Angular 2 using TypeScript Step by Step Example

This page will walk through getting started with Angular 2 using TypeScript step by step example. TypeScript is a strict superset of JavaScript.

Getting Started with Angular 2 Step by Step using JavaScript

This page will walk through getting started with Angular 2 step by step using JavaScript. We will run here a simple example explaining all the steps involved in it.

Angular 2 site:viblo.asia

Angular 2 site:kipalog.com

Tạo ứng dụng Angular 2 với angular-cli

https://viblo.asia/p/tao-ung-dung-angular-2-voi-angular-cli-3Q75wDL9KWb

[Angular 2] - Angular Cli, tool không thể bỏ qua khi code ng2

https://viblo.asia/p/angular-2-angular-cli-tool-khong-the-bo-qua-khi-code-ng2-63vKjJ76K2R

[Angular 2] - Giới thiệu Form trong Angular 2

https://viblo.asia/p/gioi-thieu-form-trong-angular-2-nwmGyEXWGoW

[Angular 2] - Template-driven forms

https://viblo.asia/p/angular-2-template-driven-forms-Az45bNmg5xY

[ng2 - practice] - Github search profile (P1)

https://viblo.asia/p/ng2-practice-github-search-profile-p1-3P0lPOGbZox

Sử dụng Webpack trong Angular 2

https://viblo.asia/p/su-dung-webpack-trong-angular-2-DzVkpLdgknW

Giới thiệu series học lập trình Angular (Angular 2)

https://kipalog.com/posts/Gioi-thieu-series-hoc-lap-trinh-Angular--Angular-2

Thử Nghiệm Với Angular 2

http://www.tiepphan.com/blog/​

Bài viết hay:

http://blog.angular-university.io/angular-2-tutorial-list/

https://angular.io/guide/attribute-directives#!#respond-to-user

Bài 1:

Angular 2 là 1 framework phát triển trên nền JavaScript của Google, kế thừa các đặc điểm của AngularJS và phát triển một phương thức tiếp cận việc xây dựng ứng dụng hoàn toàn mới, phương pháp hướng Component.
Video này sẽ giúp các bạn có cái nhìn tổng quan về các tính năng và đặc tính của Angular2.

Yêu cầu trước tiên:

Bạn cần phải có một sự hiểu biết cơ bản về JavaScript và editor. Nếu phát triển các ứng dụng dựa trên web sử dụng Angular 2, sẽ tốt hơn nếu bạn có một sự hiểu biết về công nghệ web khác như HTML, CSS, AJAX, AngularJS vv

Angular 2 là gì?

• Angular 2 là phiên bản tiếp theo của framework phát triển dựa trên JavaScript của Google.
• Angular 2 được thiết kế để xây dựng các ứng dụng phức tạp cho trình duyệt.
• Ngược lại với phiên bản 1.x, Angular 22 giới thiệu một khái niệm hoàn toàn mới của việc xây dựng các ứng dụng web.
• Phiên bản beta của Angular 2 đã được phát hành vào tháng Ba năm 2014.

Tại sao phải sử dụng Angular 2?

Angular 2 là đơn giản hơn so với Angular 1 và khái niệm của nó làm cho nó dễ dàng hơn để hiểu. Bạn có thể cập nhật các bộ dữ liệu lớn với bộ nhớ tối thiểu. Nó sẽ tăng tốc độ tải ban đầu thông qua cơ chế rendering trên server

Đặc tính

• Angular 2 là nhanh hơn và dễ dàng hơn so với Angular 1.
• Nó hỗ trợ tất các phiên bản của trình duyệt và cũng hỗ trợ các trình duyệt cũ bao gồm IE9 + và Android 4.1 trở lên.
• Nó là một framework đa nền tảng.
• Angular 2 chủ yếu tập trung vào các ứng dụng di động.
• Cấu trúc mã là rất đơn giản hơn so với phiên bản trước.
• Typing sử dụng TypeScript, Dart, JavaScript

Điểm mạnh

• Nếu một ứng dụng được tải nặng, sau đó Angular 2 giữ nó hoàn toàn giao diện người dùng.
• Nó sử dụng máy chủ rendering cho view nhanh trên điện thoại di động.
• Nó hoạt động tốt với ECMAScript và các ngôn ngữ khác để biên dịch JavaScript.
• Nó sử dụng Dependency Injection chạy các ứng dụng mà không cần viết mã quá dài.
• Tất cả mọi thứ sẽ là cách tiếp cận dựa trên Component

Hạn chế

Từ Angular 2 là một framework mới được giới thiệu, có ít hỗ trợ bởi cộng đồng. Phải mất thời gian để tìm hiểu nếu bạn là người mới học Angular 2.

https://youtu.be/DI8_kb5EYiw?list=PLRhlTlpDUWszsMOI7dK2Y9CzbTxyXMrn8

Bài 2:

Bài này chúng ta sẽ cùng tìm hiểu về kiến trúc của Angular 2 bao gồm các thành phần chính tạo nên một ứng dụng Angular 2 và cơ chế Dependency Injection được tích hợp sẵn trong Angular 2.0
Slide và mã nguồn đầy đủ tại: https://tedu.com.vn/khoa-hoc/khoa-hoc-angular2-can-ban-10.html

https://youtu.be/fuoC7D3-56Y?list=PLRhlTlpDUWszsMOI7dK2Y9CzbTxyXMrn8

Bài 3:

Cách cài đặt môi trường cho ứng dụng Angular và tạo ứng dụng Helloworld

1. Mã nguồn: https://github.com/teduinternational/angular2template
2. Cài đặt NodeJS (https://nodejs.org/en/)
3. Cài đặt Visual Studio Code (https://code.visualstudio.com/)
4. Kiểm tra phiên bản nodejs và npm bằng câu lệnh:  node –v và npm –v 
5. Truy cập http://angular.io để lấy template
6. Tạo ứng dụng Angular 2
7. Cài đặt các dependency bằng câu lệnh npm install

https://youtu.be/fuoC7D3-56Y?list=PLRhlTlpDUWszsMOI7dK2Y9CzbTxyXMrn8

Hướng dẫn tích hợp Angular 2 CLI với SignalR để hiển thị thông báo realtime

Bài viết này mình sẽ hướng dẫn các bạn sử dụng SignalR với Web API, một thư viện hỗ trợ realtime của .NET tích hợp với ứng dụng Angular 2 ở front end để tạo chức năng thông báo real time.

Phần backend Web API

Mô hình WebAPI chúng ta sử dụng chứng thực OAuth với Token Base và kết hợp với ASP.NET Identity. Ứng dụng của chúng ta sẽ giao tiếp mô hình như sau:

Bước 1: Các bạn phải các bạn cài đặt các thư viện ở Nuget:

  <package id="Microsoft.AspNet.SignalR" version="2.1.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.Client" version="2.2.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.Core" version="2.2.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.JS" version="2.1.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.Owin" version="1.2.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.1.2" targetFramework="net45" />

Ngoài ra còn có Cross Origin để cho phép các ứng dụng client khác domain có thể truy cập được:

<package id="Microsoft.AspNet.Cors" version="5.2.3" targetFramework="net45" />

Bước 2: Bật tính năng SignalR lên trong Startup.cs:

Chúng ta có thể chọn chế độ bật mặc định để bật lên hoặc chứa configuration:

 app.MapSignalR();

Hoặc chứa configuration chi tiết:

// Branch the pipeline here for requests that start with "/signalr"
            app.Map("/signalr", map =>
            {
                // Setup the CORS middleware to run before SignalR.
                // By default this will allow all origins. You can 
                // configure the set of origins and/or http verbs by
                // providing a cors options with a different policy.
                map.UseCors(CorsOptions.AllowAll);

                map.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions()
                {
                    Provider = new QueryStringOAuthBearerProvider()
                });

                var hubConfiguration = new HubConfiguration
                {
                    // You can enable JSONP by uncommenting line below.
                    // JSONP requests are insecure but some older browsers (and some
                    // versions of IE) require JSONP to work cross domain
                    EnableJSONP = true,
                    EnableDetailedErrors = true
                };
                // Run the SignalR pipeline. We're not using MapSignalR
                // since this branch already runs under the "/signalr"
                // path.
                map.RunSignalR(hubConfiguration);
            });

Provider các bạn nhìn thấy trong cấu hình trên là dùng để lấy tham số token từ client gán vào signalR Hub để chứng thực người dùng:

 public class QueryStringOAuthBearerProvider : OAuthBearerAuthenticationProvider
    {
        public override Task RequestToken(OAuthRequestTokenContext context)
        {
            var value = context.Request.Query.Get("access_token");

            if (!string.IsNullOrEmpty(value))
            {
                context.Token = value;
            }

            return Task.FromResult<object>(null);
        }
    }

Bước 3: Để làm việc client thì Server sẽ chìa ra một Hub để giao tiếp. Giờ chúng ta sẽ tạo hub trong thư mục SignalR của Web. Luồng dữ liệu sẽ là khi có thay đổi ở server thì server sẽ thông qua một hub để push một sự kiện về client thông qua các connection id để định danh client. Method name của nó sẽ là addAnnouncement(message). Đây là method name mà client sẽ nhận được sự kiện thông qua proxy của nó.

Khi client kết nối nó sẽ luôn lắng nghe, một khi có sự kiện từ server trả về nó sẽ phát sinh dưới client và xử lý thông tin.

namespace TeduShop.Web.SignalR
{
    [Authorize]
    public class TeduShopHub : Hub
    {
        private readonly static ConnectionMapping<string> _connections =
            new ConnectionMapping<string>();


        public static void PushToAllUsers(AnnouncementViewModel message, TeduShopHub hub)
        {
            IHubConnectionContext<dynamic> clients = GetClients(hub);
            clients.All.addAnnouncement(message);
        }
        /// <summary>
        /// Push to a specific user
        /// </summary>
        /// <param name="who"></param>
        /// <param name="message"></param>
        public static void PushToUser(string who, AnnouncementViewModel message, TeduShopHub hub)
        {
            IHubConnectionContext<dynamic> clients = GetClients(hub);
            foreach (var connectionId in _connections.GetConnections(who))
            {
                clients.Client(connectionId).addChatMessage(message);
            }
        }

        /// <summary>
        /// Push to list users
        /// </summary>
        /// <param name="who"></param>
        /// <param name="message"></param>
        public static void PushToUsers(string[] whos, AnnouncementViewModel message, TeduShopHub hub)
        {
            IHubConnectionContext<dynamic> clients = GetClients(hub);
            for (int i = 0; i < whos.Length; i++)
            {
                var who = whos[i];
                foreach (var connectionId in _connections.GetConnections(who))
                {
                    clients.Client(connectionId).addChatMessage(message);
                }
            }

        }
        private static IHubConnectionContext<dynamic> GetClients(TeduShopHub teduShopHub)
        {
            if (teduShopHub == null)
                return GlobalHost.ConnectionManager.GetHubContext<TeduShopHub>().Clients;
            else
                return teduShopHub.Clients;
        }

        /// <summary>
        /// Connect user to hub
        /// </summary>
        /// <returns></returns>
        public override Task OnConnected()
        {
            _connections.Add(Context.User.Identity.Name, Context.ConnectionId);

            return base.OnConnected();
        }

        public override Task OnDisconnected(bool stopCalled)
        {
            _connections.Remove(Context.User.Identity.Name, Context.ConnectionId);

            return base.OnDisconnected(stopCalled);
        }

        public override Task OnReconnected()
        {
            if (!_connections.GetConnections(Context.User.Identity.Name).Contains(Context.ConnectionId))
            {
                _connections.Add(Context.User.Identity.Name, Context.ConnectionId);
            }

            return base.OnReconnected();
        }

    }
}

Trong class trên chúng ta có một static connection mapping để map giữa 1 connection id và 1 user name. Mỗi một user khi login vào hệ thống thì sẽ được tự động connect đến hub và được cấp một connection id tự động. SignalR không quan tâm đến user nó chỉ quan tâm là có những connection nào được connect đến hub là nó sẽ thông báo liên lạc qua connection đó. Bản chất bên dưới là một socket id. Nên trong sự kiện OnConnected chúng ta sẽ map user hiện tại với connection id của nó. Để với 3 hàm PushToAllUsers, PushToUser và PushToUsers chúng ta biết là push thông báo cho user nào ngoại trừ push cho toàn bộ user.

Đây là class ConnectionMapping:

public class ConnectionMapping<T>
    {
        private readonly Dictionary<T, HashSet<string>> _connections =
            new Dictionary<T, HashSet<string>>();

        public int Count
        {
            get
            {
                return _connections.Count;
            }
        }

        public void Add(T key, string connectionId)
        {
            lock (_connections)
            {
                HashSet<string> connections;
                if (!_connections.TryGetValue(key, out connections))
                {
                    connections = new HashSet<string>();
                    _connections.Add(key, connections);
                }

                lock (connections)
                {
                    connections.Add(connectionId);
                }
            }
        }

        public IEnumerable<string> GetConnections(T key)
        {
            HashSet<string> connections;
            if (_connections.TryGetValue(key, out connections))
            {
                return connections;
            }

            return Enumerable.Empty<string>();
        }

        public void Remove(T key, string connectionId)
        {
            lock (_connections)
            {
                HashSet<string> connections;
                if (!_connections.TryGetValue(key, out connections))
                {
                    return;
                }

                lock (connections)
                {
                    connections.Remove(connectionId);

                    if (connections.Count == 0)
                    {
                        _connections.Remove(key);
                    }
                }
            }
        }
    }

 Mã nguồn hoàn chỉnh của Web API của mình đã được phát triển, giải thích trong khóa học Làm dự án thực tế với Angular 2 + Web API.

Đường dẫn Github: https://github.com/teduinternational/tedushop-webapi

Phần frontend Angular 2

Bước 1: Chúng ta cài đặt signalR cho client: npm install signalr

Bước 2: Chúng ta nhúng file: "../node_modules/signalr/jquery.signalr.js", vào ứng dụng, với Angular CLI là file angular-cli.json

Bước 3: Tạo SignalR service cho Angular 2:

import { Injectable, EventEmitter } from '@angular/core';
import { SystemConstants } from './../common/system.constants';
import { AuthenService } from './authen.service';
@Injectable()
export class SignalrService {

  // Declare the variables  
  private proxy: any;
  private proxyName: string = 'teduShopHub';
  private connection: any;
  // create the Event Emitter  
  public announcementReceived: EventEmitter<any>;

  public connectionEstablished: EventEmitter<Boolean>;
  public connectionExists: Boolean;

  constructor(private _authenService: AuthenService) {
    // Constructor initialization  
    this.connectionEstablished = new EventEmitter<Boolean>();
    this.announcementReceived = new EventEmitter<any>();
    this.connectionExists = false;
    // create hub connection  
    this.connection = $.hubConnection(SystemConstants.BASE_API);
    this.connection.qs = { "access_token": _authenService.getLoggedInUser().access_token };
    // create new proxy as name already given in top  
    this.proxy = this.connection.createHubProxy(this.proxyName);
    // register on server events  
    this.registerOnServerEvents();
    // call the connecion start method to start the connection to send and receive events.  
    this.startConnection();
  }
  // check in the browser console for either signalr connected or not  
  private startConnection(): void {
    this.connection.start().done((data: any) => {
      console.log('Now connected ' + data.transport.name + ', connection ID= ' + data.id);
      this.connectionEstablished.emit(true);
      this.connectionExists = true;
    }).fail((error: any) => {
      console.log('Could not connect ' + error);
      this.connectionEstablished.emit(false);
    });
  }

  private registerOnServerEvents(): void {
    this.proxy.on('addAnnouncement', (announcement: any) => {
      this.announcementReceived.emit(announcement);
    });
  }
}

Trong đó hub name chính là tên class Hub ở server ở đây mình đặt là TeduHub. Trong constructor chúng ta sẽ khởi tạo connection và method startConnection dùng để kết nối đến server. Phương thức registerOnServerEvents() dùng để đăng ký các sự kiện để lắng nghe ở server, ở đây là sự kiện addAnnouncement, ngoài ra chúng ta có thể đăng ký thêm nhiều sự kiện khác. Khi có thông báo từ server trả về sẽ xuất ra một đối tượng thông báo lên thuộc tính announcementReceived để đưa ra ngoài service.

Bước 4: Chúng ta lấy thông báo ra ngoài component và hiển thị:

 public canSendMessage: Boolean;
  public announcements: any[];
  constructor(
    private _signalRService: SignalrService) {
    // this can subscribe for events  
    this.subscribeToEvents();
    // this can check for conenction exist or not.  
    this.canSendMessage = _signalRService.connectionExists;
  }

  ngOnInit() {
    this.loadAnnouncements();
  }

  private subscribeToEvents(): void {

    var self = this;
    self.announcements = [];

    // if connection exists it can call of method.  
    this._signalRService.connectionEstablished.subscribe(() => {
      this.canSendMessage = true;
    });

    // finally our service method to call when response received from server event and transfer response to some variable to be shwon on the browser.  
    this._signalRService.announcementReceived.subscribe((announcement: any) => {
      this._ngZone.run(() => {
        console.log(announcement);
        moment.locale('vi');
        announcement.CreatedDate = moment(announcement.CreatedDate).fromNow();
        self.announcements.push(announcement);
      });
    });
  }


  private loadAnnouncements() {
    this._dataService.get('/api/Announcement/getTopMyAnnouncement').subscribe((response: any) => {
      this.announcements = [];
       moment.locale('vi');
      for (let item of response) {
        item.CreatedDate = moment(item.CreatedDate).fromNow();
        this.announcements.push(item);
      }

    });
  }

Đây là mô phỏng chưa được chi tiết các bạn có thể tham khảo mã nguồn ở đây: https://github.com/teduinternational/tedushop-angular2/

Angular 2

https://angular.io/

Angular 2+ Google Maps Components

https://github.com/SebastianM/angular-google-maps

https://angular-maps.com/

Google Map API

https://developers.google.com/maps/documentation/javascript/examples/directions-simple

GMaps: Find directions between locations

https://developers.google.com/maps/documentation/directions/

Get API Key

https://developers.google.com/maps/documentation/javascript/get-api-key

Angular 2 + Google Maps Places Autocomplete

http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

Angular 2 google map implementation

https://stackoverflow.com/questions/38879993/angular-2-google-map-implementation

An Example

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Start: </b>
    <select id="start">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBS8Jddb4PO_tVbA_-p_HJvyjv-L_8JVM&callback=initMap">
    </script>
  </body>
</html>