@cauca-911/menu

Run npm install @cauca-911/menu --save to add this library to your project

To use this library, you need to import the module with specific configuration

Choosing a logged-in layout

This package ships two layouts. They share a template and styles; the only difference is the change detection strategy of the host that renders your <router-outlet>.

| Component | Strategy | Use when | |---|---|---| | LoggedInLayoutComponent | OnPush | Every routed page marks itself dirty — signals, or an explicit markForCheck | | LoggedInLayoutCompatComponent | Eager | Any routed page or component is still ChangeDetectionStrategy.Eager (CheckAlways) |

Why this matters

Angular skips the entire subtree of a clean OnPush host. Because the layout renders a <router-outlet>, your routed pages are child views of it. Under OnPush, a page that relies on CheckAlways is therefore never checked, even though global change detection is running normally.

The failure is silent and easy to misread:

• data loads and the component's fields update, but nothing repaints;
• a loading indicator bound to a field stays visible forever;
• a value appears only after you click the control, because the click marks the tree dirty and forces one pass;
• components driven by signals on the same screen work perfectly, which makes it look like a component-library bug rather than a change detection one.

DevExtreme-based screens are hit hardest: devextreme-angular pushes bound options into its widgets from ngDoCheck()/ngAfterContentChecked(), and those hooks only run when the view is actually checked.

Migrating

Start on LoggedInLayoutCompatComponent, then move each routed page to signals (or add markForCheck where state is mutated imperatively). Once no Eager pages remain, switch the route to LoggedInLayoutComponent:

// legacy pages present -> compat layout
loadComponent: () => import('@cauca-911/menu').then(m => m.LoggedInLayoutCompatComponent),

// fully signal-based -> preferred layout
loadComponent: () => import('@cauca-911/menu').then(m => m.LoggedInLayoutComponent),

changeDetection is compile-time metadata, so this cannot be a provideCaucaMenu option — the choice has to be made per component, which is why two are provided.

The same shape exists in @cauca-911/login: LoginComponent is OnPush and renders a <router-outlet>. Its children ship from that package and are signal-based, so it is safe today — but an application routing its own pages under login would hit exactly this problem.