Cheat Sheets and Checklists

Check out Angular Cheat Sheet or (alternative version) containing lots of useful information condensed in one place.

Also Angular Checklist contains is curated list of common mistakes made when developing Angular applications.

Links

Reusing existing custom pipes

If you need a custom pipe, before creating one, consider checking out the NGX Pipes package which has 70+ already implemeted custom pipes.

Here are some examples:

<p>{{ date | timeAgo }}</p> 
    <!-- Output: "last week" -->
    
    <p>{{ 'foo bar' | ucfirst }}</p>
    <!-- Output: "Foo bar" -->
    
    <p>3 {{ 'Painting' | makePluralString: 3 }}</p>
    <!-- Output: "3 Paintings" -->
    
    <p>{{ [1, 2, 3, 1, 2, 3] | max }}</p>
    <!-- Output: "3" -->

Links

https://github.com/danrevah/ngx-pipes

SVG

It is possible to use SVG tags in your Angular component, to create beautiful graphs and visualizations. There are 3 things you need to know:

When binding an SVG attribute, use attr

<circle [attr.cx]="x" [attr.cy]="y"></circle>

When creating sub-components, use attribute and not tag selector:

// Not: <child-component></child-component>
    <g child-component></g>

@Component({selector: '[child-component]' })

When using SVG tags in sub-components use svg prefix:

@Component({
      selector: '[child-component]',
      template: `<svg:circle></svg:circle>`
    })

Two-way binding any property

Similar to how you can two-way bind [(ngModel)] you can two-way bind custom property on a component, for example [(value)]. To do it use appropriate Input/Output naming:

@Component({
      selector: 'super-input', 
      template: `...`,
    })
    export class AppComponent {
      @Input() value: string;
      @Output() valueChange = new EventEmitter<string>();
    }

Then you can use it as:

<super-input [(value)]="value"></super-input>

Understanding Microsyntax

Under the hood Angular compiles structural directives into ng-template elements, e.g.:

<!-- This -->
    <div *ngFor="let item of [1,2,3]">
    
    <!-- Get expanded into this -->
    <ng-template ngFor [ngForOf]="[1,2,3]" let-item="$implicit"></ng-template>

The value passed to *ngFor directive is written using microsyntax. You can learn about it in the docs.

Also check out an interactive tool that shows the expansion by Alexey Zuev