Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Getting Started with Angular Material and the CDK: ng add, the Component Catalog, the M3 Theme and Material vs CDK vs Angular Aria
Import Material components as standalone classes, not from one shared module: in Bookstore's admin panel a shared file exporting 35 modules grew the lazy chunk from 173 kB to 682 kB without a compiler warning. We measure what ng add changes, an M3 theme and density from the brand color, a responsive shell with toolbar and sidenav, why internal class overrides are fragile, and cutting the icon font from 325 KB to 1.4 KB.
Material Form Components: mat-form-field, matInput, mat-select, mat-autocomplete and mat-datepicker
mat-error only appears once a field is touched or after submit because of the default ErrorStateMatcher; with Signal Forms the ShowOnDirty matcher never shows the error of an empty required field. On Bookstore's institutional order form we measure an empty-looking mat-select without compareWith, debounce cutting 8 requests to 1, the native date adapter reading 05.12.2026 as 12 May, Turkish dates with date-fns and 15 December shifting to the 14th in UTC.
The Material Data Table: mat-table, MatSort, MatPaginator, Filtering and Server-side Pagination
Show a growing list by keeping sort, filter and page in the URL and paging in the API, not with MatTableDataSource in the browser: Bookstore's 10,000 orders sort in 59 ms in the browser, but the 1.5 MB response takes 1.26 seconds at 10 Mbit/s. We measure a missing URL param arriving as undefined, not resetting the page after a filter, avoiding an empty table while loading with linkedSignal, and the bug of reading SelectionModel inside computed().
Dialog, Snackbar and Bottom Sheet: Passing Data with MatDialog, afterClosed, CDK Dialog and the Native dialog
Give MatDialog only ids, take the decision from afterClosed() and use closeOnNavigation: 'url-change': the default only closes on back/forward, so the dialog stayed open on a navigation from code. We build an order cancel dialog, an Undo snackbar and a bulk action bottom sheet in Bookstore, and measure a bare mat-dialog-close returning '', lost focus after confirming, a snackbar adding 34 kB to the initial bundle, and how MatDialog, CDK Dialog and the native dialog differ.
CDK Overlay and Portal: Building Your Own Floating Panel, Position Strategies and a Comparison with CSS Anchor Positioning
In CDK Overlay, open the panel with createOverlayRef and a ComponentPortal, give FlexibleConnectedPositionStrategy fallback positions and the reposition scroll strategy, and dispose it with DestroyRef: without that, the panel and its backdrop stayed on screen after the page changed. We build a quick view and an account panel in Bookstore, and measure focus lost on Tab, the 14.5 kB cost of an eager import and the same panel with popover + CSS anchor positioning.
CDK Drag and Drop: cdkDrag, cdkDropList, Sortable Lists and Moving Items Between Lists
In CDK Drag and Drop, cdkDropList and cdkDrag handle the dragging and you change the array: apply moveItemInArray and transferArrayItem to a copy, set it on the signal and track rows by identity. The CDK offers no keyboard sorting; we add button alternatives to a reading list and an institutional shipment plan in Bookstore, and measure focus lost on a moved row, touch behavior with a handle and touch-action, and the re-render cost at 500 rows.
CDK Scrolling and Layout: Virtual Scroll for a Long Catalog, BreakpointObserver, Clipboard and Other Utilities
CDK virtual scroll kept only 15 of 5,000 rows in the DOM and drew the page in 38 ms instead of 249 ms; the price is that Ctrl+F cannot find rows that are not rendered and that row height has to be fixed. On Bookstore's stock list we measure virtual scroll, content-visibility and a plain list, jumps with variable heights, choosing a menu or a bottom sheet with BreakpointObserver, the clipboard and CdkListbox.
Customizing Material and Its Versions: Token Overrides, Density, Your Own Component with the CDK, and Material from 12 to 22
Customize Material with tokens: to repaint one area, a mat.theme with only color inside a class added 4.2 kB, the old all-component-themes habit 53 kB; overlays stay outside the theme class, so give the class to the overlay container too. In Bookstore's institutional portal we measure the density scale, build a split button with CDK Menu and its harness, and look at Material from 12 to 22 and why old .mat-* overrides match zero elements.