Tutorial by Examples: angular2

Install angular2 with angular-cli

This example is a quick setup of Angular 2 and how to generate a quick example project. Prerequisites: Node.js v4 or greater. npm v3 or greater or yarn. Open a terminal and run the commands one by one: npm install -g @angular/cli or yarn global add @angular/cli depending on your choi...

Angular 2 • Getting started with Angular 2

Getting started with Angular 2 without angular-cli.

Angular 2.0.0-rc.4 In this example we'll create a "Hello World!" app with only one root component (AppComponent) for the sake of simplicity. Prerequisites: Node.js v5 or later npm v3 or later Note: You can check versions by running node -v and npm -v in the console/terminal. ...

Angular 2 • Getting started with Angular 2

Angular2 @Input and @Output in a nested component

A Button directive which accepts an @Input() to specify a click limit until the button gets disabled. The parent component can listen to an event which will be emitted when the click limit is reached via @Output: import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component(...

Angular 2 • Directives & components : @Input @Output

Angular 2 : Template Driven Forms

import { Component } from '@angular/core'; import { Router , ROUTER_DIRECTIVES} from '@angular/router'; import { NgForm } from '@angular/forms'; @Component({ selector: 'login', template: ` <h2>Login</h2> <form #f="ngForm" (ngSubmit)="login(f.value,f....

Angular 2 • Angular 2 Forms Update

Angular2 @Input with asynchronous data

Sometimes you need to fetch data asynchronously before passing it to a child component to use. If the child component tries to use the data before it has been received, it will throw an error. You can use ngOnChanges to detect changes in a components' @Inputs and wait until they are defined before a...

Angular 2 • Directives & components : @Input @Output

Angular 2 Form - Custom Email/Password Validation

For live demo click.. App index ts import {bootstrap} from '@angular/platform-browser-dynamic'; import {MyForm} from './my-form.component.ts'; bootstrap(MyForm); Custom validator import {Control} from @'angular/common'; export class CustomValidators { static emailFormat(control: Cont...

Angular 2 • Angular 2 Forms Update

1. Install Angular 2 dependencies with compiler

NOTE: for best results, make sure your project was created using the Angular-CLI. npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server} You don't have to do this step if you project already has angular 2 an...

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

Angular 2 for-loop

For live plnkr click... <!doctype html> <html> <head> <title>ng for loop in angular 2 with ES5.</title> <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script> <scr...

Angular 2 • Angular - ForLoop

Angular 2: Reactive Forms (a.k.a Model-driven Forms)

This example uses Angular 2.0.0 Final Release registration-form.component.ts import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ templateUrl: "./registration-form.html" }) export class ExampleComponent { ...

Angular 2 • Angular 2 Forms Update

Read from an Restful API in Angular2

To separate API logic from the component, we are creating the API client as a separate class. This example class makes a request to Wikipedia API to get random wiki articles. import { Http, Response } from '@angular/http'; import { Injectable } from '@angular/core'; import { Observabl...

Angular 2 • CRUD in Angular2 with Restful API

Angular 2 Forms ( Reactive Forms ) with registration form and confirm password validation

app.module.ts Add these into your app.module.ts file to use reactive forms import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.comp...

Angular 2 • Angular 2 Forms Update

use Workers in angular2 service

/app/services/greeting.service.ts : import { Injectable } from '@angular/core'; import {greetingTypes,request,response} from './greeting.interface' @Injectable() export class Greeting{ private worker; constructor(){ this.worker = new Worker('../workers /gr...

nativescript • Multithreading Model

Angular2 aliased exported values

Angular2 provides several exported values that can be aliased to local variables. These are: index first last even odd Except index, the other ones take a Boolean value. As the previous example using index, it can be used any of these exported values: <div *ngFor="let item of item...

Angular 2 • How to use ngfor

Displaying current angular2 version used in your project

To display current version, we can use VERSION from @angular/core package. import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1> <h2>Current Version: {{ver}}</h2> `, }) export class AppCompone...

Angular 2 • Commonly built-in directives and services

Getting started with Angular 2 with node.js/expressjs backend (http example included)

We will create a simple "Hello World!" app with Angular2 2.4.1 (@NgModule change) with a node.js (expressjs) backend. Prerequisites Node.js v4.x.x or higher npm v3.x.x or higher or yarn Then run npm install -g typescript or yarn global add typescriptto install typescript globally ...

Angular 2 • Getting started with Angular 2

Angular2 - Form Builder

FormComponent.ts import {Component} from "@angular/core"; import {FormBuilder} from "@angular/forms"; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.scss'], providers : [FormBuilder] }) export class FormComp...

Angular 2 • Angular 2 Forms Update

Angular2 CanActivate

Implemented in a router: export const MainRoutes: Route[] = [{ path: '', children: [ { path: 'main', component: MainComponent , canActivate : [CanActivateRoute] }] }]; The canActivateRoute file: @Injectable() export class CanActivateRoute implements CanActi...

Angular 2 • Angular2 CanActivate

Angular 2 - Mock Observable ( service + component )

service I created post service with postRequest method. import {Injectable} from '@angular/core'; import {Http, Headers, Response} from "@angular/http"; import {PostModel} from "./PostModel"; import 'rxjs/add/operator/map'; import {Observable} from "rxjs"; ...

Angular 2 • Mocking @ngrx/Store

Angular2 Protractor - Installation

run the follows commands at cmd npm install -g protractor webdriver-manager update webdriver-manager start **create protractor.conf.js file in the main app root. very important to decleare useAllAngular2AppRoots: true const config = { baseUrl: 'http://localhost:3000/', s...

Angular 2 • Angular 2 - Protractor

Create empty Angular2 application with angular-cli

Requirements: NodeJS : Download page npm or yarn Run the following commands with cmd from new directory folder: npm install -g @angular/cli or yarn global add @angular/cli ng new PROJECT_NAME cd PROJECT_NAME ng serve Open your browser at localhost:4200

Angular 2 • Angular-cli