Modern web uygulamalar\u0131, masa\u00fcst\u00fc bilgisayarlar, tabletler ve ak\u0131ll\u0131 telefonlar gibi \u00e7ok \u00e7e\u015fitli cihazlarda sorunsuz bir kullan\u0131c\u0131 deneyimi sunmak zorundad\u0131r. Bu, duyarl\u0131 (responsive) tasar\u0131m\u0131n temelini olu\u015fturur. Duyarl\u0131 tasar\u0131m\u0131n kritik bir bile\u015feni, uygulaman\u0131n farkl\u0131 ekran boyutlar\u0131na g\u00f6re davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ayarlamas\u0131na olanak tan\u0131yan “breakpoint”lerdir. Peki, Angular uygulamalar\u0131n\u0131zda bu breakpoint’leri dinamik olarak nas\u0131l tespit edebilir ve uygulaman\u0131z\u0131n mant\u0131\u011f\u0131n\u0131 buna g\u00f6re nas\u0131l uyarlayabilirsiniz?<\/p>\n
\u0130\u015fte bu noktada Angular Component Dev Kit (CDK) devreye giriyor. Angular CDK, Angular ekibinin geli\u015ftiricilere sundu\u011fu, temel UI davran\u0131\u015flar\u0131 i\u00e7in yeniden kullan\u0131labilir, eri\u015filebilir ve y\u00fcksek performansl\u0131 bile\u015fenler sa\u011flayan g\u00fc\u00e7l\u00fc bir ara\u00e7 setidir. Bu rehberde, Angular CDK’n\u0131n Angular CDK, Material Design spesifikasyonlar\u0131ndan ba\u011f\u0131ms\u0131z olarak Angular uygulamalar\u0131nda yayg\u0131n olarak kullan\u0131lan i\u015flevsellikleri soyutlayan bir dizi ara\u00e7 sa\u011flar. Bu ara\u00e7lar aras\u0131nda eri\u015filebilirlik yard\u0131mc\u0131lar\u0131, s\u00fcr\u00fckle-b\u0131rak i\u015flevselli\u011fi, portal y\u00f6netimi ve layout ara\u00e7lar\u0131 bulunur. Konumuzla ilgili olan Bu komut, CDK’y\u0131 projenize ekleyecek ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir.<\/p>\n Angular CDK, yayg\u0131n cihaz boyutlar\u0131 i\u00e7in \u00f6nceden tan\u0131mlanm\u0131\u015f breakpoint’ler sunar. Bunlara A\u015fa\u011f\u0131daki \u00f6rnekte, bir bile\u015fenin mobil (Handset) mi yoksa daha b\u00fcy\u00fck bir ekran (Web) mi oldu\u011funu nas\u0131l tespit etti\u011fini g\u00f6rebilirsiniz:<\/p>\n \u015eu anda mobil (handset) boyutundas\u0131n\u0131z.<\/p>\n BreakpointObserver<\/code> servisini kullanarak uygulaman\u0131z\u0131n mevcut ekran boyutunu nas\u0131l alg\u0131layaca\u011f\u0131n\u0131z\u0131 ve bu bilgiye dayanarak dinamik olarak nas\u0131l tepki verece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\nAngular CDK ve BreakpointObserver’a Genel Bak\u0131\u015f<\/h3>\n
@angular\/cdk\/layout<\/code> paketi, uygulaman\u0131z\u0131n ekran boyutuna ve y\u00f6nelimine g\u00f6re d\u00fczenini dinamik olarak ayarlamak i\u00e7in g\u00fc\u00e7l\u00fc mekanizmalar sunar.<\/p>\nBreakpointObserver<\/code>, bu paketin kalbinde yer alan bir servistir. Temel olarak, taray\u0131c\u0131n\u0131n yerel medya sorgular\u0131 API’sini sarmalar ve belirli medya sorgular\u0131n\u0131n (yani breakpoint’lerin) \u015fu anda e\u015fle\u015fip e\u015fle\u015fmedi\u011fini g\u00f6zlemlemenize olanak tan\u0131r. Bir medya sorgusu e\u015fle\u015fti\u011finde veya e\u015fle\u015fmeyi b\u0131rakt\u0131\u011f\u0131nda, BreakpointObserver<\/code> bir Observable<\/code> arac\u0131l\u0131\u011f\u0131yla g\u00fcncellemeler yay\u0131nlar. Bu sayede, uygulaman\u0131z\u0131n bile\u015fenleri veya servisleri, ekran boyutu de\u011fi\u015fikliklerine an\u0131nda tepki verebilir.<\/p>\nBreakpointObserver<\/code>‘\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, CSS medya sorgular\u0131n\u0131n g\u00fcc\u00fcn\u00fc Angular’\u0131n reaktif programlama yetenekleriyle birle\u015ftirmesidir. Bu, sadece stil de\u011fi\u015fikliklerinin \u00f6tesine ge\u00e7erek, uygulaman\u0131z\u0131n i\u015f mant\u0131\u011f\u0131n\u0131, bile\u015fen yap\u0131s\u0131n\u0131 veya hatta veri getirme stratejilerini ekran boyutuna g\u00f6re dinamik olarak de\u011fi\u015ftirebilmenizi sa\u011flar. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda farkl\u0131 bir navigasyon men\u00fcs\u00fc g\u00f6stermek, b\u00fcy\u00fck ekranlarda daha fazla s\u00fctunlu bir d\u00fczen kullanmak veya belirli verileri yaln\u0131zca belirli ekran boyutlar\u0131nda y\u00fcklemek gibi senaryolar\u0131 kolayca y\u00f6netebilirsiniz.<\/p>\nBreakpointObserver Kullan\u0131m\u0131 ve \u00d6rnekleri<\/h3>\n
Angular CDK Kurulumu<\/h4>\n
BreakpointObserver<\/code>‘\u0131 kullanmaya ba\u015flamadan \u00f6nce, Angular projenize CDK’y\u0131 eklemeniz gerekir. Bu, a\u015fa\u011f\u0131daki komutla kolayca yap\u0131labilir:<\/p>\nng add @angular\/cdk<\/code><\/pre>\nTemel Kullan\u0131m<\/h4>\n
BreakpointObserver<\/code>‘\u0131 bir bile\u015fen i\u00e7inde kullanmak i\u00e7in \u00f6ncelikle onu enjekte etmeniz ve ard\u0131ndan observe()<\/code> metodunu \u00e7a\u011f\u0131rman\u0131z gerekir. observe()<\/code> metodu, izlemek istedi\u011finiz medya sorgular\u0131n\u0131 (string veya string dizisi olarak) al\u0131r ve bir ObservableBreakpointState<\/code> nesnesi, hangi medya sorgular\u0131n\u0131n e\u015fle\u015fti\u011fini ve genel olarak bir e\u015fle\u015fme olup olmad\u0131\u011f\u0131n\u0131 bildiren bilgiler i\u00e7erir.<\/p>\nBreakpoints<\/code> enum’u arac\u0131l\u0131\u011f\u0131yla eri\u015febilirsiniz (\u00f6rne\u011fin, Breakpoints.Handset<\/code>, Breakpoints.Tablet<\/code>, Breakpoints.Web<\/code>).<\/p>\nimport { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { BreakpointObserver, Breakpoints, BreakpointState } from '@angular\/cdk\/layout';\nimport { Observable, Subject } from 'rxjs';\nimport { map, takeUntil } from 'rxjs\/operators';\n\n@Component({\n selector: 'app-responsive-layout',\n template: \n Breakpoint Tespiti<\/h3>\n