以下の内容はhttps://cheatography.com///gregfinzer/cheat-sheets/angular/より取得しました。


Cheatography

Angular Cheat Sheet by

Angular Quick Reference using Angular Version 16

Example Project

Example Component

Binding

One Way Binding
<h1>{{pageTitle}}</h1>
Two Way Binding
<input [(ngMo­del­)]=­"­cus­tom­er.F­ir­stN­ame­">
Property Binding
<img [src]=­"­cus­tom­er.i­ma­geU­rl">
Attribute Binding
<button [attr.a­ri­a-l­abe­l]=­"­ok">­Ok<­/bu­tto­n>
Class Binding
<div [class.Se­lec­ted­]="S­ele­cte­d">S­ele­cte­d</­div>
ngClass
<div [ngClass]="setClasses()">
  {{customer.name}}
</div>
Style Binding
button [style.co­lor­]="i­sSe­lected ? 'red' : 'white­'">
ngStyle
<div [ngStyle]="setStyles()">
  {{customer.name}}
</div>
Component Binding
<cu­sto­mer­-detail [customer]="currentCustomer">
<customer-detail>
Directive Binding
<div [ngClass] = "­{se­lected: isSele­cte­d}">­Cus­tom­er<­/di­v>
Event Binding
<button (click­)="s­ave­()">­Sav­e</­but­ton>
$event
<input [value]="customer.name"
 (input)="customer.name=$event.target.value">

Lifecycle Hooks

OnChanges
export class Customer implements OnChanges {
  ngOnChanges() {}
}
OnInit
export class Customer implements OnInit {
  ngOnInit() {}
}
DoCheck
export class Customer implements DoCheck {
  ngDoCheck() {}
}
AfterC­ont­entInit
export class Customer implements AfterC­ont­entInit {
  ngAfterContentInit() {}
}
AfterC­ont­ent­Checked
export class Customer implements AfterC­ont­ent­Checked {
  ngAfterContentChecked() {}
}
AfterV­iewInit
export class Customer implements AfterV­iewInit {
  ngAfterViewInit() {}
}
AfterV­iew­Checked
export class Customer implements AfterV­iew­Checked {
  ngAfterViewChecked() {}
}
OnDestroy
export class Customer implements OnDestroy {
  ngOnDestroy() {}
}

Component with Inline Template

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'customer',
  template: `
    <h3>{{customer.name}}</h3>
  `
})

export class CustomerComponent {
  customer = { id: 100, name: 'John Smith' };
}
 

Structural Directives

*ngIf
<div *ngIf=­"­cur­ren­tCu­sto­mer­;else noCustomerTemplate">
   Selected {{currentCustomer.Name}}
</div>
<ng­-te­mplate #noCustomerTemplate>
   No Customer Selected
</n­g-t­emp­lat­e>
*ngFor
<ul>
  <li *ngFor­="let customer of customers">
    {{ custom­er.name }}
  </li>
</ul>
*ngSwitch
<div [ngSwitch]="orderStatus">
  <template [ngSwitchCase]="purchased"></template>
  <template [ngSwitchCase]="shipped"></template>
  <template [ngSwitchDefault]></template>
</div>
Create Custom Directive
ng generate directive <di­rective name>

Pipes

Async
<ng­-co­ntainer *ngIf=­"­cus­tomers$ | async as customers">
 ­ ­<span *ngFor­="let customer of customers">{{customer.firstName}}</span>
</n­g-c­ont­ain­er>
Currency
<p>{{price | curren­cy}­}</­p>
Date
<p>{{orderDate | date:'­med­ium­'}}­</p>
Date Format
<p>{{orderDate | date:'­yMM­Md'­'}}­</p>
Decimal
<p>{{ 12345.6789 | number­:'3.1-2' }}<­/p>
JSON Debugging
<pre>{{Customer | json}}­</p­re>
Key Value (Object or Map)
<div *ngFor­="let item of objectData | keyvalue">
  {{ item.key }}: {{ item.value }}
</d­iv>
Lower Case
<p>{{customer.name | lowerc­ase­}}<­/p>
Number
<p>­value | number­:'1.1-­2'}­}</­p>
Percent
<p>{{taxes | percen­t:'­1.1­-1'­}}<­/p>
Title Case
<p>{{ 'hello world' | titlecase }}<­/p>
Upper Case
<p>{{customer.name | upperc­ase­}}<­/p>

Component Linked Template

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'customer',
  templateUrl: 'customer.component.html',
  styleUrls: ['customer.component.css']
})

export class CustomerComponent {
  customer = { id: 100, name: 'John Smith' };
}
               
 

Comments

No comments yet. Add yours below!

Add a Comment

Related Cheat Sheets

JavaScript Cheat Sheet
CoffeeScript language Cheat Sheet

More Cheat Sheets by GregFinzer

Loving Your Neighbor Cheat Sheet
AWS Core Service Options Cheat Sheet
Unity Container Cheat Sheet



以上の内容はhttps://cheatography.com///gregfinzer/cheat-sheets/angular/より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14