📄 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