Release 20.0.0

Changelog

[20.0.0] - Angular 20 Migration

🚀 Major Release - Angular 20 Support

Complete migration to Angular 20 with modern patterns: standalone components, signals-based reactivity, and new control flow syntax.

⚠️ BREAKING CHANGES

1. Standalone Components - No More Modules

Remove module imports, import components directly:

// ❌ Old
import { FsNavFrameModule } from '@fullstack-devops/ngx-mat-components';

// ✅ New
import { 
  FsNavFrameComponent,
  FsNavFrameSidebarItemComponent,
  FsCalendarPanelsComponent 
} from '@fullstack-devops/ngx-mat-components';

2. Signals API - Use () to Read Values

Signal properties require () in templates:

// ❌ Old
<div>{{ month }}</div>

// ✅ New  
<div>{{ month() }}</div>

3. Sidebar Items Need label Property

Required for accessibility:

<!-- ❌ Old -->
<fs-nav-frame-sidebar-item routerLink="/home">
  <span>Home</span>
</fs-nav-frame-sidebar-item>

<!-- ✅ New -->
<fs-nav-frame-sidebar-item routerLink="/home" label="Home">
  <span>Home</span>
</fs-nav-frame-sidebar-item>

4. Content Projection with @if/@for

Use ng-container for directive selectors:

<!-- ❌ Old -->
<fs-nav-user-profile-name *ngIf="user">{{ user.name }}</fs-nav-user-profile-name>

<!-- ✅ New -->
@if (user) {
  <ng-container fs-nav-user-profile-name>{{ user.name }}</ng-container>
}

✨ What's New

• Angular 20.3.6 with full TypeScript 5.9 support
• OnPush change detection for all components
• Signal-based reactivity throughout
• Modern control flow (@if, @for, @switch)
• Comprehensive accessibility with ARIA labels
• Updated dependencies: Angular Material 20.2.9, lucide-angular 0.546.0

🐛 Fixes

• Fixed FsNavFrameService provider injection (NG0201)
• Fixed duplicate keys in @for loops (NG0955)
• Material button styling now works correctly
• Content projection compatibility with new control flow

📦 Migration Steps

1. Update Angular:

   ng update @angular/core@20 @angular/cli@20

2. Update this library:

   npm install @fullstack-devops/ngx-mat-components@latest

3. Update your code:

   • Replace module imports with component imports
   • Add () to signal properties in templates
   • Add label to sidebar items
   • Wrap projected content in ng-container when using @if

🔒 Security

• ✅ 998 packages audited
• ✅ Only 1 low severity issue (acceptable)
• ✅ No critical vulnerabilities

---

Need help? Open an issue or discussion on GitHub.