Angular 2 Cheat Sheet

This is not the complete cheat sheet of all the things, but I think these are very useful snippets for anyone who is beginner.

Inline template:

"<h1>{{ pageTitle }}</h1>"

Inline template:

template: `
{{ pageTitle }}
My First Component

</div> `

Linked Template:

templateUrl:
'product-list.component.html'

When binding should be used?

Interpolation:

{{pageTitle}}

Property Binding:

<img [src]='product.imageUrl'>

Event Binding:

<button (click)='toggleImage()'>

Two Way Binding:

<input [(ngModel)]="listFilter'/>

How to build a simple application:

import { Component } from 'angular2/core';

@Component({
    selector: 'selector-name',
    templateUrl: 'app/something-something.component.html'
})
export class ProductListComponent {
 pageTitle: string = 'Hello World!';
}

 

 

 

Published by

Tony Mamedbekov

Husband, Developer, Coder, Designer, Photographer, Entrepreneur and many more great things :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.