ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Angular2 cheatsheet - quick reference

Updated on October 5, 2015

Cheat Sheet

Angular 2 is latest javascript framework re-written by Google from scratch. Visit Angular2 official website for detailed information.
Here is the quick reference of keywords, components, concepts and other useful things of Angular 2.
Important keywords from Agnualr2 5 min quick start:

npm install : Node command to install packages

tsd install: Typescript command to install typescript packages

touch <filename>: Create an empty file

tsc: Typescript compiler command to compile typescript file to javascript

/// <reference path="<path>" />: Provide your type definition file (.tsd)/typescripts(.ts) /other packages path to import classes/modules/components

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

@Component({ selector: 'my-app'}): Apply @Component annotation to class to make it Component. In html you can use your component by giving selector name.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({ template: '<h1>Hello {{ name }}</h1>'}): @View annotation provide user interface defination for your component. You can provide inline html as a string in ‘template’ property or separate html file in ‘templateUrl’ property

class MyAppComponent {}: Component’s business logic is defined here. This is simple typescript class. You can mark any typescript class as component by annotating @Component and @View attributes over that class.

bootstrap(MyAppComponent): 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.

<script>System.import('app');</script>: 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 ‘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.

http-server: 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

tsc -p src -w: Compile the project in the given directory. The directory needs to contain a tsconfig.json file to direct compilation.
Refer all typescript compiler option.

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

@View({ ... directives: [NgFor, NgIf]}): Include directives into your component. First import all directives you want to use in your component’s template/templateUrl.

(event): 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()">

#html-element local reference: you can make element references available to other parts of the template as a local variable using the #var syntax.
e.g. <input #myname (keyup)><p>{{myname.value}}</p>

*ng-for: equivalent to ng-repeat in angular 1.x.
Render lists from component in html.
<li *ng-for="#name of names"> {{ name }}</li>


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

*ng-if: equivalent to ng-If in angular 1.x
It displays element if condition holds true else given html tag doesn’t get rendered in DOM
e.g. <p *ng-if="names.length > 3">

NgClass: <div [ng-class]="{error: errorCount > 0}"> Please check errors.</div>

NgForm: If NgForm is bound in a component, <form> elements in that component will be upgraded to use the Angular form system.

NgModel: 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 directions.

NgSwitch: 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.

NgZone: An injectable service for executing work inside or outside of the Angular zone.

DatePipe: WARNING: this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.
Formats a date value to a string based on the requested format.

expression | date[:format]

Title: 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.
getTitle() setTitle(newTitle: string)


Updated cheat sheet to follow soon.

Cheers!

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)