CoreUI PRO v5.5.23 for Angular 20

Monday, November 24, 2025

We’re excited to announce the immediate availability of CoreUI PRO v5.5.23 for Angular 20, released on November 24, 2025!

This significant update introduces the brand new One Time Password (OTP) input component and includes comprehensive Angular 20.3.13 compatibility updates for enhanced security authentication workflows.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

How to Update

To update to CoreUI PRO v5.5.23 for Angular 20, follow these steps to ensure your project is up-to-date:

Verify that you are using a supported version of node.js before you upgrade your application. Angular v20 supports node.js versions: ^20.19, ^22.12 or ^24.0.
To update your Angular 20 application to CoreUI PRO v5.5.23, in the application’s project directory, run:

ng update @angular/core@20 @angular/cli@20 @angular/cdk@20 @coreui/coreui-pro@5 @coreui/angular-pro@~5.5 @coreui/icons-angular@~5.5 @coreui/angular-chartjs@~5.5

Please ensure that there are no error messages in the results.
Update TypeScript to version 5.9.x.
See also:
- Angular Update Guide
- CoreUI for Angular Docs

This process should seamlessly update your project to CoreUI PRO v5.5.23 for Angular 20, incorporating the latest features and optimizations.

What’s New

🚀 New Component

One Time Password (OTP) Input Component

Introducing the brand new OTP component for secure authentication workflows:

Multi-Format Support: Handles numeric, alphanumeric, and custom character sets
Flexible Input Count: Configurable number of input fields (2-12 fields)
Advanced Validation: Built-in validation with custom error handling
Accessibility First: Comprehensive ARIA support and keyboard navigation
Auto-Focus Management: Intelligent focus progression and backspace handling
Paste Support: Smart paste functionality with automatic field distribution
Customizable Styling: Full theming support with size variants
Angular Forms Integration: Seamless integration with reactive and template-driven forms

<!-- Basic OTP implementation -->
<c-otp
  [length]="6"
  (complete)="onOtpComplete($event)">
</c-otp>

<!-- Advanced configuration -->
<c-otp
  [length]="4"
  variant="numeric"
  size="lg"
  separator="-"
  placeholder="•"
  [autoFocus]="true"
  [invalid]="hasError"
  feedback="Invalid code. Please try again."
  (complete)="handleOtpSubmission($event)"
  (change)="handleOtpChange($event)">
</c-otp>

<!-- Custom styling with different formats -->
<c-otp
  [length]="8"
  variant="alphanumeric"
  class="custom-otp"
  [style.gap]="'12px'">
</c-otp>

OTP Component Features

Variant Support:
- numeric - Numbers only (0-9)
- alphanumeric - Letters and numbers
- alpha - Letters only
- custom - Custom character pattern
Size Variants: sm, lg, and default sizing
Visual Customization: Separators, placeholders, and custom styling
Event Handling: change, complete, focus, blur events
Validation States: Invalid state with custom feedback messages
Accessibility Features:
- ARIA labels and descriptions
- Screen reader announcements
- Keyboard navigation support
- Focus management

Dependency Updates

Angular 20.3.13 Compatibility

@angular-devkit/schematics from 20.3.9 to 20.3.11
@angular/build from 20.3.9 to 20.3.11
@angular/cli from 20.3.9 to 20.3.11
@angular/compiler-cli from 20.3.10 to 20.3.13
@angular/language-service from 20.3.10 to 20.3.13
@angular/animations from 20.3.10 to 20.3.13
@angular/cdk from 20.2.12 to 20.2.14
@angular/common from 20.3.10 to 20.3.13
@angular/compiler from 20.3.10 to 20.3.13
@angular/core from 20.3.10 to 20.3.13
@angular/forms from 20.3.10 to 20.3.13
@angular/localize from 20.3.10 to 20.3.13
@angular/platform-browser from 20.3.10 to 20.3.13
@angular/platform-browser-dynamic from 20.3.10 to 20.3.13
@angular/router from 20.3.10 to 20.3.13

Development Tools Updates

ng-packagr from 20.3.0 to 20.3.2
@types/jasmine from 5.1.12 to 5.1.13
@types/node from 22.19.0 to 22.19.1
angular-eslint from 20.5.2 to 20.7.0
typescript-eslint from 8.46.3 to 8.48.0

Enhanced Pro Features

Authentication Workflow Integration

Perfect for various authentication scenarios:

Two-Factor Authentication (2FA): SMS and email verification codes
Multi-Factor Authentication (MFA): Additional security layer integration
Password Reset: Secure verification code entry
Account Verification: Email and phone number verification
Transaction Confirmation: Secure transaction authorization codes

Security Features

The new OTP component provides enterprise-grade security features:

Input Validation: Configurable character restrictions and length validation
Auto-Clear on Error: Optional automatic clearing on validation failure
Secure Input Handling: Prevents common input vulnerabilities
Rate Limiting Support: Compatible with backend rate limiting strategies
Accessibility Compliance: Full WCAG 2.1 AA compliance for authentication workflows

Developer Experience Enhancements

Angular Forms Integration: Works seamlessly with reactive and template-driven forms
Validation Framework Support: Compatible with Angular validators and custom validation
TypeScript Support: Full type definitions for all new props and methods
Testing Utilities: Built-in test IDs and ARIA labels for easier testing

This significant update brings powerful authentication capabilities to your CoreUI PRO applications with the new OTP component and ensures compatibility with the latest Angular 20.3.13.

Migration Notes

New Component Usage

The OTP component is ready to use immediately:

import { COtpComponent } from '@coreui/angular-pro';

@Component({
  selector: 'app-login',
  template: `
    <c-otp
      [length]="6"
      (complete)="onOtpComplete($event)">
    </c-otp>
  `
})
export class LoginComponent {
  onOtpComplete(value: string) {
    // Handle OTP submission
    console.log('OTP entered:', value);
  }
}

Advanced Implementation with Forms

import { FormControl } from '@angular/forms';

export class SecureOtpFormComponent {
  otpControl = new FormControl('');
  isValid = true;

  async onOtpComplete(value: string) {
    try {
      await this.verifyOTP(value);
      this.isValid = true;
    } catch (error) {
      this.isValid = false;
    }
  }
}

These updates bring your application to the latest CoreUI PRO v5.5.23 for Angular 20 with powerful new OTP authentication capabilities and comprehensive dependency updates.