Sei sulla pagina 1di 5

Angular 2.

Quick reference

npm install Node command to install packages

Typescript command to install typescript

tsd install

touch <filename> Create empty file

Typescript compiler command to compile

typescript file to javascript

Provide your type definition file

/// <reference path="<path>" /> (.tsd)/typescripts(.ts) /other packages path to
import classes/modules/components

classes/components/constants/services to use
in current class using this syntax. Remember to
provide correct filename with relative path in
import {<name of component>} from
from without .ts/.js extension.
For example, if you have PhoneService.ts file
with PhoneService class defined, use below
import {PhoneService} from 'PhoneService';

Apply @Component annotation to class to

make it Component. In html you can use your
@Component({ component by giving selector name.
selector: 'my-app' For example, in html <my-app></my-app> tag
}) will include your compoent.
Selector string is kind of ID for component and
case sensitive.

@View annotation provide user interface

@View({ defination for your component. You can
template: '<h1>Hello {{ name }}</h1>' provide inline html as a string in template
}) property or separate html file in templateUrl

Components business logic is defined here.

class MyAppComponent {
This is simple typescript class. You can mark
any typescript class as component by
annotating @Component and @View
attributes over that class.

Angular2 heavily use DI (Depedency injection).

bootstrap is responsible for injecting
Components, Services etc into your
application/Component hierarchy.
Inject class/component/services into bootstrap
and later you can resolve them in constructor.

Starting point of angular2 application is

marked with this script.
For example, System.import(app) will try to
find app.ts file and will load component
<script>System.import('app');</script> MyAppComponent. In html, when browser
try to render <my-app> tag, it will search
MyAppComponent component for selector
my-app and will render template or
templateUrl html definition.

Starts local server on current directory.If you

directly open your website html page without
starting server, you might get Cross origin
Request Serving error.

live-server static server with live reload feature

Compile the project in the given directory. The

directory needs to contain a tsconfig.json file
tsc -p src -w to direct compilation.

Refer all typescript compiler option.

@Component({ Inject FriendService class into Component and
... child components.
appInjector: [FriendsService] You must import FriendsService first before
}) injecting.

Include directives into your component. First
import all directives you want to use in your
directives: [NgFor, NgIf]
components template/templateUrl.

You can make your application respond to user

input by using the event syntax.
The event syntax starts with an event name
surrounded by parenthesis: (event).
A controller function is then assigned to the
event name: (event)="controllerFn()".

e.g. <input (keyup)="myControllerMethod()">

you can make element references available to

other parts of the template as a local variable
using the #var syntax.
#html-element local reference

e.g. <input #myname (keyup)>


equivalent to ng-repeat in angular 1.x.

Render lists from component in html.
<li *ng-for="#name of names">
{{ name }}
The way to read this is:
*ng-for : create a DOM element for each item
in an iterable like an array
#name : refer to individual values of the
iterable as 'name'
of names : the iterable to use is called 'names'
in the current controller
equivalent to ng-If in angular 1.x
It displays element if condition holds true else
given html tag doesnt get rendered in DOM
e.g. <p *ng-if="names.length > 3">

<div class="message" [ng-class]="{error:

errorCount > 0}">
Please check errors.

If NgForm is bound in a component, <form>

NgForm elements in that component will be upgraded
to use the Angular form system.

ng-model binds an existing domain model to a

form control. For a two-way binding, use [(ng-
model)] to ensure the model updates in both

The NgSwitch directive is used to conditionally

swap DOM structure on your template based
on a scope expression. Elements within
NgSwitch but without NgSwitchWhen or
NgSwitchDefault directives will be preserved at
the location as specified in the template.

An injectable service for executing work inside

or outside of the Angular zone.

WARNING: this pipe uses the

Internationalization API. Therefore it is only
reliable in Chrome and Opera browsers.
expression | date[:format]
Formats a date value to a string based on the
requested format.

A service that can be used to get and set the

title of a current HTML document.
Since an Angular 2 application can't be
bootstrapped on the entire HTML document
(<html> tag) it is not possible to bind to the
text property of the HTMLTitleElement
elements (representing the <title> tag).
Instead, this service can be used to set and get
the current title value.
setTitle(newTitle: string)