js.reduce(): Split array into chunks

#js #reduce

✅ Example:

function Chunk(array, size) {
  return array.reduce((acc, _, index) => {
    if (index % size === 0) acc.push(array.slice(index, index + size));
    return acc;
  }, []);
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
const arr3 = Chunk(numbers, 2);
// Output: arr3: [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7 ] ]

Directive for Handle Image upload

#angular #directive

✅ Link: https://javascript.plainenglish.io/angular-directives-for-handle-image-upload-c3cefbfbc1a3

Pure CSS navbar

#css #target

✅ Link: https://codepen.io/hrtzt/pen/NPZKRN

Resize Observable Service in Angular

#angular #ResizeObserver

✅ Link: https://stackblitz.com/edit/angular-yobjsn?file=src%2Fapp%2Fapp.component.ts

CSS gradient

#css #keyframes #gradient

✅ Link: https://codepen.io/mitchobert/pen/ogYBLo

NGRX immutability with Immer

#angular #ngrx #immer

⚠️ Third-Party Lib

✅ Link: https://medium.com/@daniel.glejzner/make-your-angular-ngrx-reducers-an-eye-candy-using-fantastic-library-f4ac41aea6af

Parallax scrolling in CSS

#css #parallax

✅ Link: https://codepen.io/keithclark/pen/ndEygj

Canceling DOM Events

#js #addEventListener #AbortController

✅ Link: https://javascript.plainenglish.io/best-practices-for-using-abortcontroller-87892b72d07e

Table Sort Directive in Angular

#angular #directive

✅ Link: https://stackblitz.com/edit/angular-sz9lie?file=src%2Fapp%2Ftable-sort.directive.ts

Terminating Promise

#js #promise #AbortController

✅ Link: https://javascript.plainenglish.io/best-practices-for-using-abortcontroller-87892b72d07e

Async Validator in Angular

#angular #validator #InjectionToken

🚩 > Angular 14

✅ Link: https://netbasal.com/optimizing-angular-form-validation-with-lazy-load-61265536a6f2

Factory async function with ability of cancelling

#js #promise #AbortController

function asyncWithAbort(promiseFn, signal){
  if (signal?.aborted){
    return Promise.reject(new DOMException("Aborted", "AbortError"));
  }
  return new Promise((resolve, reject) => {
    promiseFn().then(resovle).catch(reject);
 
    signal?.addEventListener("abort", () => {
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

✅ Link: https://javascript.plainenglish.io/best-practices-for-using-abortcontroller-87892b72d07e

withComponentInputBinding in Angular

Angular v16 has introduced a powerful new feature that enables the automatic binding of router information, such as query parameters, path parameters, static data, and resolver data to a routed component’s inputs.

#angular #routing #withComponentInputBinding

🚩 > Angular 16

✅ Link: https://netbasal.com/binding-router-information-to-routed-component-inputs-in-angular-78ee92f63e64

Sanitization Pipe in Angular

#angular #pipe #DomSanitizer

✅ Link: https://medium.com/@zeeshankhan8838/best-practices-in-angular-b9e8f88ee1fa