📄 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);
}

📄 Custom RxJS operators 3/7: "firstMatching operator"

#angular #rxjs #firstMatching

For most use cases, the task can be accomplished at least in two ways. However, there is a subtle difference when the source stream completes without having emitted a value that meets requirements. The detailed explanation can be found in one of my RxJS hints. The operator in question allows to choose a given strategy to handle such scenario based on the required argument.

operator

import { of, MonoTypeOperatorFunction, pipe, first, filter, take } from 'rxjs';

function firstMatching<T>(
  predicateFn: (v: T) => boolean,
  required: boolean = false
): MonoTypeOperatorFunction<T> {
  return required ? first(predicateFn) : pipe(filter(predicateFn), take(1));
}

📄 Scrolling to a Specific QueryList Element

#angular #QueryList

list.component.html

<div 
  *ngFor="let item of items; let i = index" 
  #myElement
>
  <!-- Content of each item -->
</div>

<button 
  *ngFor="let item of items; let i = index" 
  (click)="scrollToElement(i)"
>
  Scroll to Element {{i}}
</button>

list.component.ts

@Component({...})
export class MyComponent {
  @ViewChildren('myElement') 
  public elements: QueryList<ElementRef>;
  public items = [...]; // Your array of items

  scrollToElement(index: number): void {
    const list = this.elements.toArray();
    const element = list[index].nativeElement;
    element.scrollIntoView({ behavior: 'smooth' });
  }
}

✅ Article link: https://medium.com/@garfunkel61/scrolling-to-a-specific-element-in-angular-ngfor-list-navigating-querylists-with-ease-bba15735b41b