📄 Reusable Checkbox Input in Angular

#angular #ui_element #ControlValueAccessor

All we need to do is to use its selector inside our <form> HTML element with FormGroup:

<app-checkbox-input 
   formControlName="fullName" 
   label="Check by Full Name" 
></app-checkbox-input>

🚩 > Angular v16

✅ Article link: https://blog.bitsrc.io/how-ive-created-reusable-checkbox-input-in-angular-16-5fd470f26104

📄 Angular Input Value Transform

#angular #input #transform

⚠️ This feature has been available since version 16.1

🚩 > Angular v16.1

✅ Article link: https://kevinkreuzer.medium.com/angular-input-transform-3a6881902342

📄KeycloakAuthGuard in Angular

#angular #guard #keycloak #mapToCanActivate

🚩 > Angular v16

Add the guard function to your route’s canActivate property.

// In your routing module
{
    path: 'protected-route',
    canActivate: [keycloakFunctionalGuard],
    component: ProtectedComponent
}

⚠️ Using mapToCanActivate Helper
If you’re not ready to fully migrate to functional guards, Angular 16 provides a helper function, mapToCanActivate, that allows you to continue using your class-based guards.

{
    path: 'protected-route',
    canActivate: mapToCanActivate([wrappedAuthGuard]),
    component: ProtectedComponent
}

✅ Article link: https://medium.com/@kapincev/migrating-keycloakauthguard-to-angular-16-functional-guards-01bf2a20fc09

📄 Custom RxJS operators 1/7: "Сache operator"

#angular #rxjs #cache

Often an RxJS stream represents an http request — a stream that emits a single value and completes. Performance-wise, it is a good practice to cache a response from a server for a certain amount of time. The built-in share operator can be configured to provide a caching mechanism with a Time To Live (TTL) for a response.

operator

import { ... } from 'rxjs';

function cache<T>(ttl: number = Infinity): MonoTypeOperatorFunction<T> {
  return share({
    connector: () => new ReplaySubject(1),
    resetOnComplete: () => timer(ttl),
  });
}

📄 Custom RxJS operators 2/7: "filterNil operator"

#angular #rxjs #filterNil

It is quite common to filter out null and undefined values from the resulting stream. Obviously, the built-in filter operator is the right tool to do the job, however in order to ensure proper type narrowing, the predicate function has to be a user-defined type guard. Therefore, it makes sense to encapsulate it into a custom RxJS operator.

operator

import { filter, OperatorFunction } from 'rxjs';

function filterNil<T>(): OperatorFunction<T, NonNullable<T>> {
  return filter((v): v is NonNullable<T> => v != undefined);
}