Advanced snippets

Getting components of different types with ViewChild

• ⭐ Interactive demo of this snippet - of-contents) | tags: good-to-know tips components dependency-injection

Router Custom Preloading

• ⭐ Interactive demo of this snippet - of-contents) | tags: router

SVG

• ⭐ Interactive demo of this snippet - of-contents) | tags: tip SVG

Beginner snippets

Accessing Enums in template

• ⭐ Interactive demo of this snippet - of-contents) | tags: enums templates

Cheat Sheets and Checklists

• Angular Checklist
• ⭐ Interactive demo of this snippet - of-contents) | tags: tip cheat sheet

Component State Debugging

• ⭐ Interactive demo of this snippet - of-contents) | tags: good-to-know tips

Default ViewEncapsulation value

• ⭐ Interactive demo of this snippet - of-contents) | tags: configuration styling

hammerjs-gestures

• ⭐ Interactive demo of this snippet - of-contents) | tags: good-to-know tips components gestures

Loader Component

• ⭐ Interactive demo of this snippet - of-contents) | tags: tips good-to-know components templates

ng-content

• ⭐ Interactive demo of this snippet - of-contents) | tags: good-to-know tips components

ngIf else

• ⭐ Interactive demo of this snippet - of-contents) | tags: ngif templates

Optional parameters in the middle

• ⭐ Interactive demo of this snippet - of-contents) | tags: routing

Renaming inputs and outputs

• ⭐ Interactive demo of this snippet - of-contents) | tags: components templates

Safe Navigation Operator

• ⭐ Interactive demo of this snippet - of-contents) | tags: object property handling tips good to know

trackBy in for loops

• ⭐ Interactive demo of this snippet - of-contents) | tags: good-to-know tips components performance

Understanding Microsyntax

• interactive tool
• ⭐ Interactive demo of this snippet - of-contents) | tags: tip structural directive microsyntax

Intermediate snippets

Accessing all nested form controls

• ⭐ Interactive demo of this snippet - of-contents) | tags: reactive forms tips good to know

Adding keyboard shortcuts to elements

• ⭐ Interactive demo of this snippet - of-contents) | tags: tips good-to-know

Bind to host properties with host binding

• ⭐ Interactive demo of this snippet - of-contents) | tags: components

Component level providers

• ⭐ Interactive demo of this snippet - of-contents) | tags: tips components dependency-injection

Global event listeners

• ⭐ Interactive demo of this snippet - of-contents) | tags: events components

Injecting document

• ⭐ Interactive demo of this snippet - of-contents) | tags: dependency injection

Mark reactive fields as touched

• ⭐ Interactive demo of this snippet - of-contents) | tags: reactive forms validation tips good to know

Observables as outputs

• ⭐ Interactive demo of this snippet - of-contents) | tags: tip outputs

Passing template as an input

• ⭐ Interactive demo of this snippet - of-contents) | tags: template

Preseving whitespaces

• ⭐ Interactive demo of this snippet - of-contents) | tags: tip

Reusing code in template

• ⭐ Interactive demo of this snippet - of-contents) | tags: templates

Reusing existing custom pipes

• NGX Pipes package
• ⭐ Interactive demo of this snippet - of-contents) | tags: tip pipes library

Style bindings

• ⭐ Interactive demo of this snippet - of-contents) | tags: styles

Two-way binding any property

• ⭐ Interactive demo of this snippet - of-contents) | tags: tip binding

Using APP_INITIALIZER to delay app start

• ⭐ Interactive demo of this snippet - of-contents) | tags: tip

Window Location injection

• ⭐ Interactive demo of this snippet - of-contents) | tags: dependency-injection testing