Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Angular Material ve CDK'ya Giriş: ng add, Component Kataloğu, M3 Teması ve Material mı, CDK mı, Angular Aria mı?
Material component'lerini tek bir shared module'den değil, standalone class olarak import et: Bookstore'un yönetim panelinde 35 module'ü export eden shared dosya lazy chunk'ı 173 kB'tan 682 kB'a çıkardı ve derleyici uyarmadı. ng add'in neleri değiştirdiğini, marka renginden M3 teması ve density ayarını, toolbar ve sidenav ile responsive panel iskeletini, iç class override'ının neden kırılgan olduğunu ve icon font'unu 325 KB'tan 1,4 KB'a indirmeyi ölçüyoruz.
Material Form Component'leri: mat-form-field, matInput, mat-select, mat-autocomplete ve mat-datepicker
mat-error, varsayılan ErrorStateMatcher yüzünden yalnız alan touched olunca ya da submit sonrası görünür; Signal Forms'ta ShowOnDirty matcher'ı boş zorunlu alanın hatasını hiç göstermez. Bookstore'un kurumsal sipariş form'unda compareWith'siz mat-select'in boş görünmesini, debounce ile 8 request'in 1'e inmesini, native date adapter'ın 05.12.2026'yı 12 Mayıs okumasını, date-fns ile Türkçe tarihi ve 15 Aralık'ın UTC'de 14'üne kaymasını ölçüyoruz.
Material Veri Tablosu: mat-table, MatSort, MatPaginator, Filtre ve Server-side Sayfalama
Büyüyen bir listeyi MatTableDataSource ile tarayıcıda değil, sort, filtre ve sayfayı URL'de tutup API'de sayfalayarak göster: Bookstore'un 10.000 siparişi tarayıcıda 59 ms'de sıralanıyor ama 1,5 MB'lık cevap 10 Mbit/s'te 1,26 saniye sürüyor. URL'de olmayan param'ın input'a undefined gelmesini, filtre sonrası sayfayı sıfırlamamanın etkisini, linkedSignal ile yüklenirken boş tabloyu önlemeyi ve SelectionModel'i computed() içinde okumanın hatasını ölçüyoruz.
Dialog, Snackbar ve Bottom Sheet: MatDialog ile Veri Alışverişi, afterClosed, CDK Dialog ve Native dialog Karşılaştırması
MatDialog'a yalnız id ver, kararı afterClosed() ile al ve closeOnNavigation: 'url-change' kullan: varsayılan değer yalnız geri/ileri tuşunda kapattığı için kod ile yapılan navigation'da dialog açık kaldı. Bookstore'da sipariş iptal dialog'u, Undo snackbar'ı ve toplu işlem bottom sheet'i kuruyor; değersiz mat-dialog-close'un '' döndürmesini, onaydan sonra focus kaybını, snackbar'ın initial bundle'a 34 kB eklemesini ve MatDialog, CDK Dialog ile native dialog farkını ölçüyoruz.
CDK Overlay ve Portal: Kendi Açılır Panelini Kurmak, Position Strategy'leri ve CSS Anchor Positioning ile Karşılaştırma
CDK Overlay'de paneli createOverlayRef ve ComponentPortal ile aç, FlexibleConnectedPositionStrategy'ye fallback pozisyonlar ve reposition scroll strategy'si ver, DestroyRef ile dispose et: etmeyince panel ve backdrop'u sayfa değiştikten sonra ekranda kaldı. Bookstore'da hızlı önizleme ve hesap paneli kuruyor; Tab ile focus kaybını, eager import'un 14.5 kB maliyetini ve aynı paneli popover + CSS anchor positioning ile ölçüyoruz.
CDK Drag and Drop: cdkDrag, cdkDropList, Sıralanabilir Liste ve Listeler Arası Taşıma
CDK Drag and Drop'ta cdkDropList ve cdkDrag sürüklemeyi yönetir, array'i sen değiştirirsin: moveItemInArray ve transferArrayItem'ı kopyaya uygulayıp signal'e set et, satırları kimlikle track et. CDK klavyeyle sıralama sunmaz; Bookstore'da okuma listesi ve kurumsal sevkiyat planına buton alternatifi ekliyor, taşınan satırda kaybolan focus'u, tutamak ve touch-action ile dokunmatik davranışı ve 500 satırda yeniden render maliyetini ölçüyoruz.
CDK Scrolling ve Layout: Virtual Scroll ile Uzun Katalog, BreakpointObserver, Clipboard ve Diğer Yardımcılar
CDK virtual scroll 5.000 satırlık listede DOM'da yalnız 15 satır tuttu ve sayfayı 249 ms yerine 38 ms'de çizdi; bedeli Ctrl+F'in görünmeyen satırları bulamaması ve satır yüksekliğinin sabit olması gerekmesi. Bookstore'un stok listesinde virtual scroll, content-visibility ve düz listeyi, değişken yükseklikteki zıplamaları, BreakpointObserver ile menü ve bottom sheet seçimini, clipboard ve CdkListbox'ı ölçüyoruz.
Material'ı Özelleştirmek ve Sürümler: Token Override'ları, Density, CDK ile Kendi Component'in ve Material 12'den 22'ye
Material'ı token'larla özelleştir: bir bölgeyi yeniden boyamak için class içinde yalnız color veren mat.theme 4.2 kB ekledi, eski all-component-themes alışkanlığı 53 kB; overlay'ler tema class'ının dışında kaldığı için class'ı overlay container'a da ver. Bookstore'un kurumsal portalında density ölçeğini, CDK Menu ile bir split button ve harness'ını, Material 12'den 22'ye değişimi ve eski .mat-* override'larının neden sıfır element'e uyduğunu ölçüyoruz.