May 10, 2020
Estimated Post Reading Time ~

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 a 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!';
}


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.