Angular 🇺🇦 - practical notes

🤓 Code Review Checklist for Angular Developers

#angular #review

Service Injection 📛:
It’s recommended to check and review the dependency injection to components and recommended to use TypeScript’s access modifiers (private, public, etc.)

🔥1

312 views07:01

Angular 🇺🇦 - practical notes

📄 Custom RxJS operators 5/7: "pollWhile operator"

#angular #rxjs #pollWhile

The good old polling mechanism is still quite relevant in applications which rely on data that changes over a period of time. Let’s consider a scenario when an application has to make http requests in a certain time interval until an http response body fulfils a given condition, e.g. analysis status is set to completed. The built-in repeat operator combined with a limiting operator allows to accomplish the goal with a few lines of code.

operator

interface PollWhileConfig<T> {
  predicateFn: (v: T) => boolean;
  delay: number;
  count?: number;
  lastOnly?: boolean;
}

function pollWhile<T>({
  predicateFn,
  delay,
  count = Infinity,
  lastOnly = false,
}: PollWhileConfig<T>): MonoTypeOperatorFunction<T> {
  const limiter = lastOnly
    ? pipe(
        filter((v: T) => !predicateFn(v)),
        take(1)
      )
    : takeWhile(predicateFn, true);

  return pipe(repeat({ delay, count }), limiter);
}

🔥1

298 viewsedited 07:29

Angular 🇺🇦 - practical notes

🤓 Code Review Checklist for Angular Developers

#angular #review

Observable Cleanup 📛:
Sometimes, we find ourselves fetching data with observables, doing the subscribe and cleanup in ngOnDestroy
I would recommend using the async pipe to simplify the component code.

298 views07:29

Angular 🇺🇦 - practical notes

📄 Custom RxJS operators 6/7: "retryForStatus operator"

#angular #rxjs #retryForStatus

The built-in retry operator allows to resubscribe to the source stream once an error has been thrown. It is possible to make a decision whether or not to retry based on the information contained in the error object. In turn, when it comes to streams that represent an http request, the operator can be configured to call an API again only for certain response statuses.

operator

interface ErrorWithStatus extends Error {
  status: number;
}

interface RetryForStatusConfig {
  retryableStatuses: number[];
  delay: number;
  count?: number;
}

function retryForStatus<T>({
  retryableStatuses,
  delay,
  count = Infinity,
}: RetryForStatusConfig): MonoTypeOperatorFunction<T> {
  return retry({
    count,
    delay: (err: ErrorWithStatus, retryCount) =>
      retryableStatuses.includes(err.status)
        ? timer(retryCount * delay)
        : throwError(() => err),
  });
}

🔥1

303 views15:59

Angular 🇺🇦 - practical notes

📄 Custom RxJS operators 7/7: "toLatestFrom operator"

#angular #rxjs #toLatestFrom

The built-in withLatestFrom operator allows to add data from supplementary streams to the source stream. However, sometimes the source stream is just a trigger to perform a certain action for which data from supplementary streams is needed. As a result, the array of elements in the output stream contains a dummy first element. A better solution is to neglect the value from the trigger.

operator

function toLatestFrom<T, D1>(d1$: ObservableInput<D1>): OperatorFunction<T, D1>;
function toLatestFrom<T, D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
): OperatorFunction<T, [D1, ...D]>;

function toLatestFrom<D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
) {
  return pipe(
    withLatestFrom(d1$, ...data$),
    map(([_, ...data]) => (data.length === 1 ? data[0] : data))
  );
}

🔥1

337 views06:59

Angular 🇺🇦 - practical notes

🤓 Code Review Checklist: Magic Values 📛 💣

#angular #review

It is recommended to use constants or enums to make the code more readable and maintainable and avoid magic values

🔥1

341 views10:59

Angular 🇺🇦 - practical notes

🤓 Code Review Checklist: Consider Extracting logic to Services 📛

#angular #review

If we find out that part of the component logic can be reused in many places, we can optimize that by extracting this logic into services for better code organization and reusability

359 views06:59

Angular 🇺🇦 - practical notes

🤓 Code Review Checklist: Hard-Coded Styles 📛

#angular #review

Be careful when using inline styles like style="margin-top: 12px".it can be hard to maintain

388 views10:59

Angular 🇺🇦 - practical notes

📄 Change Detection in Angular

#angular #signals #cdr

4. Local Change Detection 🚩Angular 17

@Component({
  selector: 'app-timer',
  template: `<span>Last Updated: {{ lastUpdateInSeconds() | number:'1.0-0' }} Seconds</span> {{ logCd() }}`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [DatePipe, DecimalPipe, AsyncPipe]
})
export class TimerComponent {
  @Input() lastUpdate = new Date();
  lastUpdateInSeconds = signal(0)
  constructor() {
    setInterval(() => {
      this.lastUpdateInSeconds.set((new Date().getTime() - this.lastUpdate.getTime()) / 1_000);
    }, 1000);
  }

  logCd() {
    console.log('log from timer');
  }
}