Angular: Collection of Tips and Tricks

Collection of Angular Sample Codes Worth Copy

Photo by Caspar Camille Rubin on Unsplash

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 table
  mobileTable
• 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)