Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
30-seconds-of-angular
Curated collection of Angular snippets that you can understand in 30 seconds or less
https://github.com/fetis/30-seconds-of-angular
Last synced: 3 days ago
JSON representation
-
Beginner snippets
-
Understanding Microsyntax
- interactive tool
- in the docs
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [structural directive](https://30.codelab.fun/tags/structural-directive) [microsyntax](https://30.codelab.fun/tags/microsyntax)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [structural directive](https://30.codelab.fun/tags/structural-directive) [microsyntax](https://30.codelab.fun/tags/microsyntax)
-
Accessing Enums in template
- ⭐ Interactive demo of this snippet - of-contents) | tags: [enums](https://30.codelab.fun/tags/enums) [templates](https://30.codelab.fun/tags/templates)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [enums](https://30.codelab.fun/tags/enums) [templates](https://30.codelab.fun/tags/templates)
-
Cheat Sheets and Checklists
- Angular Checklist
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [cheat sheet](https://30.codelab.fun/tags/cheat-sheet)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [cheat sheet](https://30.codelab.fun/tags/cheat-sheet)
-
Component State Debugging
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips)
-
Default ViewEncapsulation value
- ⭐ Interactive demo of this snippet - of-contents) | tags: [configuration](https://30.codelab.fun/tags/configuration) [styling](https://30.codelab.fun/tags/styling)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [configuration](https://30.codelab.fun/tags/configuration) [styling](https://30.codelab.fun/tags/styling)
-
hammerjs-gestures
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [gestures](https://30.codelab.fun/tags/gestures)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [gestures](https://30.codelab.fun/tags/gestures)
-
Loader Component
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tips](https://30.codelab.fun/tags/tips) [good-to-know](https://30.codelab.fun/tags/good-to-know) [components](https://30.codelab.fun/tags/components) [templates](https://30.codelab.fun/tags/templates)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tips](https://30.codelab.fun/tags/tips) [good-to-know](https://30.codelab.fun/tags/good-to-know) [components](https://30.codelab.fun/tags/components) [templates](https://30.codelab.fun/tags/templates)
-
ng-content
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components)
-
ngIf else
- ⭐ Interactive demo of this snippet - of-contents) | tags: [ngif](https://30.codelab.fun/tags/ngif) [templates](https://30.codelab.fun/tags/templates)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [ngif](https://30.codelab.fun/tags/ngif) [templates](https://30.codelab.fun/tags/templates)
-
Optional parameters in the middle
- ⭐ Interactive demo of this snippet - of-contents) | tags: [routing](https://30.codelab.fun/tags/routing)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [routing](https://30.codelab.fun/tags/routing)
-
Renaming inputs and outputs
- StyleGuide recommedation
- ⭐ Interactive demo of this snippet - of-contents) | tags: [components](https://30.codelab.fun/tags/components) [templates](https://30.codelab.fun/tags/templates)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [components](https://30.codelab.fun/tags/components) [templates](https://30.codelab.fun/tags/templates)
-
trackBy in for loops
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [performance](https://30.codelab.fun/tags/performance)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [performance](https://30.codelab.fun/tags/performance)
-
Safe Navigation Operator
- Safe Navigation Operator - reference exceptions in component template expressions. It returns object property value if it exists or null otherwise.
- ⭐ Interactive demo of this snippet - of-contents) | tags: [object property handling](https://30.codelab.fun/tags/object-property-handling) [tips](https://30.codelab.fun/tags/tips) [good to know](https://30.codelab.fun/tags/good-to-know)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [object property handling](https://30.codelab.fun/tags/object-property-handling) [tips](https://30.codelab.fun/tags/tips) [good to know](https://30.codelab.fun/tags/good-to-know)
-
-
Intermediate snippets
-
Reusing existing custom pipes
- NGX Pipes package
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [pipes](https://30.codelab.fun/tags/pipes) [library](https://30.codelab.fun/tags/library)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [pipes](https://30.codelab.fun/tags/pipes) [library](https://30.codelab.fun/tags/library)
-
Accessing all nested form controls
- ⭐ Interactive demo of this snippet - of-contents) | tags: [reactive forms](https://30.codelab.fun/tags/reactive-forms) [tips](https://30.codelab.fun/tags/tips) [good to know](https://30.codelab.fun/tags/good-to-know)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [reactive forms](https://30.codelab.fun/tags/reactive-forms) [tips](https://30.codelab.fun/tags/tips) [good to know](https://30.codelab.fun/tags/good-to-know)
-
Adding keyboard shortcuts to elements
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tips](https://30.codelab.fun/tags/tips) [good-to-know](https://30.codelab.fun/tags/good-to-know)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tips](https://30.codelab.fun/tags/tips) [good-to-know](https://30.codelab.fun/tags/good-to-know)
-
Bind to host properties with host binding
- ⭐ Interactive demo of this snippet - of-contents) | tags: [components](https://30.codelab.fun/tags/components)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [components](https://30.codelab.fun/tags/components)
-
Component level providers
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [dependency-injection](https://30.codelab.fun/tags/dependency-injection)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [dependency-injection](https://30.codelab.fun/tags/dependency-injection)
-
Global event listeners
- ⭐ Interactive demo of this snippet - of-contents) | tags: [events](https://30.codelab.fun/tags/events) [components](https://30.codelab.fun/tags/components)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [events](https://30.codelab.fun/tags/events) [components](https://30.codelab.fun/tags/components)
-
Injecting document
- ⭐ Interactive demo of this snippet - of-contents) | tags: [dependency injection](https://30.codelab.fun/tags/dependency-injection)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [dependency injection](https://30.codelab.fun/tags/dependency-injection)
-
Mark reactive fields as touched
- ⭐ Interactive demo of this snippet - of-contents) | tags: [reactive forms validation](https://30.codelab.fun/tags/reactive-forms-validation) [tips](https://30.codelab.fun/tags/tips) [good to know](https://30.codelab.fun/tags/good-to-know)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [reactive forms validation](https://30.codelab.fun/tags/reactive-forms-validation) [tips](https://30.codelab.fun/tags/tips) [good to know](https://30.codelab.fun/tags/good-to-know)
-
Observables as outputs
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [outputs](https://30.codelab.fun/tags/outputs)
-
Passing template as an input
- ⭐ Interactive demo of this snippet - of-contents) | tags: [template](https://30.codelab.fun/tags/template)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [template](https://30.codelab.fun/tags/template)
-
Preseving whitespaces
- preserveWhitespaces
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip)
-
Reusing code in template
- ⭐ Interactive demo of this snippet - of-contents) | tags: [templates](https://30.codelab.fun/tags/templates)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [templates](https://30.codelab.fun/tags/templates)
-
Style bindings
- ⭐ Interactive demo of this snippet - of-contents) | tags: [styles](https://30.codelab.fun/tags/styles)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [styles](https://30.codelab.fun/tags/styles)
-
Two-way binding any property
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [binding](https://30.codelab.fun/tags/binding)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [binding](https://30.codelab.fun/tags/binding)
-
Using APP_INITIALIZER to delay app start
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip)
-
Window Location injection
- ⭐ Interactive demo of this snippet - of-contents) | tags: [dependency-injection](https://30.codelab.fun/tags/dependency-injection) [testing](https://30.codelab.fun/tags/testing)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [dependency-injection](https://30.codelab.fun/tags/dependency-injection) [testing](https://30.codelab.fun/tags/testing)
-
-
Advanced snippets
-
Getting components of different types with ViewChild
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [dependency-injection](https://30.codelab.fun/tags/dependency-injection)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [good-to-know](https://30.codelab.fun/tags/good-to-know) [tips](https://30.codelab.fun/tags/tips) [components](https://30.codelab.fun/tags/components) [dependency-injection](https://30.codelab.fun/tags/dependency-injection)
-
Router Custom Preloading
- ⭐ Interactive demo of this snippet - of-contents) | tags: [router](https://30.codelab.fun/tags/router)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [router](https://30.codelab.fun/tags/router)
-
SVG
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [SVG](https://30.codelab.fun/tags/svg)
- ⭐ Interactive demo of this snippet - of-contents) | tags: [tip](https://30.codelab.fun/tags/tip) [SVG](https://30.codelab.fun/tags/svg)
-
Programming Languages
Sub Categories
Understanding Microsyntax
4
Safe Navigation Operator
3
Renaming inputs and outputs
3
Reusing existing custom pipes
3
Cheat Sheets and Checklists
3
Router Custom Preloading
2
Injecting document
2
Window Location injection
2
Optional parameters in the middle
2
SVG
2
hammerjs-gestures
2
Default ViewEncapsulation value
2
Bind to host properties with host binding
2
Getting components of different types with ViewChild
2
Accessing Enums in template
2
Component level providers
2
Global event listeners
2
Preseving whitespaces
2
ngIf else
2
ng-content
2
trackBy in for loops
2
Accessing all nested form controls
2
Passing template as an input
2
Style bindings
2
Loader Component
2
Mark reactive fields as touched
2
Two-way binding any property
2
Adding keyboard shortcuts to elements
2
Reusing code in template
2
Observables as outputs
1
Component State Debugging
1
Using APP_INITIALIZER to delay app start
1
Keywords