ngComponentOutlet using in Angular

#angular #ngComponentOutlet

✅ Link: https://ankit-kaushik.medium.com/component-switching-dynamically-using-lazy-loading-in-angular-templates-81f026e4b148

⚠️ RequestAnimationFrame instead of setTimeout or setInterval

#js #requestAnimationFrame

✅Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f

Memoization in JavaScript

#js

✅ Link: https://nickychristensen.medium.com/memoization-in-javascript-53db416e0ee3

tapResponse operator

#rxjs #ngrx #tapResponse

✅Link: https://itnext.io/angular-for-junior-developers-dangers-and-treasures-of-rxjs-97106873823d

⚠️ Js IntersectionObserver example

#js #IntersectionObserver

✅Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f

js.reduce(): Group an array of objects by a specified property

#js #reduce

✅ Example:

function GroupBy(array, property) {
  return array.reduce((acc, obj) => {
    let key = obj[property];
    acc[key] = acc[key] || [];
    acc[key].push(obj);
    return acc;
  }, {});
}

const users = [
  { name: "Bytefer", age: 30 },
  { name: "Kakuqo", age: 28 },
  { name: "Chris", age: 28 },
];

const groupedUsers = GroupBy(users, "age");
// groupedUsers: 
// {
//  '28': [ 
//    { name: 'Kakuqo', age: 28 }, 
//    { name: 'Chris', age: 28 }
//   ],
//  '30': [ 
//    { name: 'Bytefer', age: 30 } 
//   ]
//  }

CSS rare functions, properties, and features

#css

✅Link: https://stackblitz.com/edit/js-w2yuvk?file=index.html

⚠️ Using Observables as Outputs

#angular #directive #output #fromEvent

✅ Link: https://medium.com/ngconf/using-observables-as-outputs-de40aa167e09

js.reduce(): Runs an array of promises in series

#js #reduce

js.reduce(): Serialize query parameter object

#js #reduce

✅ Example:

function StringifyQueryParam(queryParam = {}) {
  return Object.entries(queryParam)
    .reduce(
      (t, v) => 
          `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
      Object.keys(queryParam).length ? "?" : ""
    )
    .replace(/&$/, "");
}

const queryString = StringifyQueryParam({
  name: "bytefer",
  email: "bytefer@gmail.com",
});
// queryString: '?name=Bytefer&email=bytefer%40gmail.com'