Angular: Collection of Tips and Tricks
Collection of Angular Sample Codes Worth Copy
Published in
2 min readJun 30, 2020
This is the index page of Allen’s Angular articles. I call it as “Random How-Tos” because I write these based on my mind goes, which is random.
Please feel free to copy it, and let me know if you have any suggestion or question.
- Build dropdown menu
<my-menu>
- Generate unit tests automatically
$ gentest -s my.component.ts
- Watch for element changes made to DOM tree
(dom-changed)
- Create my own *ngIf
*myIf
- Monitor element is in view after scrolling
*inview
- Animate element appearance with *ngIf/*ngFor
@fadeAnimation
[@listAnimation]
- Build a calendar within less than 50 lines of code
<my-calendar>
- Transform a generic
<table>
to mobile-friendly data tablemobileTable
- Build a carousel with less than 10 lines of code
myCarousel
- Build tabs with no JS
*ngIf="selected=’tab1'"
- Encrypt/Decrypt string with CryptoJS
{{'I♥U'|encrypted}}
- Hide user input with custom font
font-family: text-secuirty-disc
- Trap tab focus within a block
trapFocus
- Margin Collapsing Explained
- Build an online code editor with Ace
<ace ...></ace>
- Make div tag editable
<div text-editable>
- Syntax highlighting with PrismJs
<pre prism>
- Not a Fan of Blue Focused Outline?
<div a11y-outline>
Miscellaneous
- Show an image placeholder (stackblitz)
- Explained: ngrx/store coding overheads
(Coming Soon)
Show an element with parallax backgrounds (stackblitz)(Coming Soon)
Lazy load a module dynamically without router(stackblitz)(Coming Soon)
Watch an element with its children if focused on any(stackblitz)(Coming Soon)
Navigate elements with arrow keys (stackblitz)