Dom nesnesi içerisindeki herhangi bir html elementini component class'ı üzerinde refere edebilmek için viewchild komponentini kullanırız.
HTML Elementini Refere Etmek
Componenti Refere Etmek
2 Ağustos 2025 Cumartesi
ng-template
Componentler arası veri değilde html öğeleri içeren kodlar paylaşmak istediğimizde burada devreye ng-content girmektedir. ng-content, html içeriklerini parent componentten child component'e geçirmemizi ve render etmemizi sağlar. Fakat ng-template ile ng-contentten farklı olarak bilinçli olarak bu ilgili kısmında render edilmesini tetiklemeliyiz. ng-content kısmı direkt olarak sayfa içerisinde görüntülenir.
TemplateRef ve ViewContainerRef ile ng-template'i bilinçli olarak çağırma
TempalteRef, ng-template'i component class'ı üzerinde temsil etmemizi sağlayan bir sınıfken, ViewContainerRef ise ng-templatenin nerede oluşturulacağını belirtmemizi sağlayan başka bir sınıftır.
Yukarıdaki görseli incelersek eğer template: içerisindeki ng-template'e bir referans verilmekte ve bu referans component classında @ViewChild eşliğinde TemplateRef türünde elde edilmektedir.
Ardından dependency injection ile inject edilen ViewContainerRef nesnesi üzerinden createEmbeddedView metodu kullanılarak ng-template sayfada görüntülenmektedir.
ng-content
Componentler arasında veri aktarmak istediğimiz de @input ve @output decoratorleri kullanılır.
Componentler arası veri değilde html öğeleri içeren kodlar paylaşmak istediğimizde burada devreye ng-content girmektedir. ng-content, html içeriklerini parent componentten child component'e geçirmemizi ve render etmemizi sağlar.
Child component içerisinde ng-component selector'ı ile işaretlediğimiz kısma parentten gönderilen html öğesi basılacaktır.
Multiple ng-content
27 Temmuz 2025 Pazar
Routing
Routing: Bir componentten (sayfadan) diğer componenete geçiş yapabilmek için Angular Router Modulünden faydalanırız.
- Adres çubuğuna yazılan URL üzerinden belirlie componentlere gitme
- Componenet'e query string değerlerini gönderme
- Browser'ın ileri ve geri düğmelerini aktifleştirme
- Dinamik olarak component yükleme
- Rotalar üzerinde yetki kontolü gerçekleştirme (Guard yapısı)
Angular Router Yapılanması
1-) Uygulamanın index.html doyasının <head> bölümü içerisine aşağıdaki 6.satırdaki gibi tanımlama yapılır.
4-) Router Link üzerinen istenilen noktaya link oluşturulur. ve Rotayla eşleşen componenetin yükleneceği alanı belirtmemiz gerekir.(<router-outlet>
Route Parameter
URL üzerinde veri taşımamızı sağlarİstek yapılan URL ile eşleşen sayfaya biryandan da ekstradan URL üzerinden veri taşıyabilmemizi sağlayan yapıdır.Aşağıda solda tüm productlar gelirken sağ tarafta sadece URL üzerindeki 2 değerine karşılık product'ı elde edip listeleyebiliyoruz.
URL'deki route parametresini(urldeki 2 değeri) component içerisinde elde etmek için asağıdaki yaklaşımı sergileriz.
Child Routes/ Nested Routes
Query String
URL üzerinde veri taşımamızı sağlar.
kaynak : Link
Angular DependencyInjection
ng g s services/product
Yöntem 1 Modul Bazında Tanımlama
1- Service Tanımlama
2 - Tanımlanan serviceyi IOC'a ekleme. Uygulamanın herhangi bir noktasından artık ProductServiceye erişilebilir.
3 - Herhangi bir Componenet içerisinde tanımlanan servisi kullanma
Yöntem 2 Injectable ile Uygulama Bazında Tanımla
Yöntem 3 Componenet Bazında Tanımlama. Servis sınıfına sadece ilgili component erişebilir.
22 Temmuz 2025 Salı
Model-Driven Forms Yaklaşımı
Component class'ında formun yapısının nesnel olarak tanımlandığı form yapısıdır. Yani form yapısında kullanılan FormGroup, FormArray ve FormControl gibi tüm nesneleri kendimizin oluşturduğu ve formu konfigüre ettiği bir form yapılanmasıdır. Ekstra olarak formun validasyonel kurallarını ve yapılandırmalarını da bu nesne üzerinden tanımlayabiliyoruz.
FormGroup : Formun kurulmasını sağlayan temel directive'dir. Form elemanlarının component classındaki model ile senkronize olmasını sağlar. Bunun için parametre olarak component class'ında tanımlanmış olan From Group nesnesini alarak çalışma sergiler
FormControlName : FormGroup nesnesi içerisindeki herhangi bir FormControl'ü form elemanlarından birine bağlamak ve senkronizasyonu sağlamak için kullanılan directive'dir. ilgili FormControl nesnesine bağlanan form elemanının değeri değiştikçe ilgili nesnenin de otomatik olarak güncellenecektir.
1- ReactiveFormsModule isimli modulu ilgili module import emeliyiz.
2- Oluşturulacak formun öncelikle Modelini oluşturunuz ve gerekli FormController'i tanımlayınız. Bunun için FormBuilder nesnesinden istifade edebiliriz.
FormGrupName
Bir modelin alt modeli şeklinde bir tanımlamaya ihtiyaç varsa.
21 Temmuz 2025 Pazartesi
İnput/Output Communication | Parent to Child/Child to Parent
Angular Component Communication, Angular componentleri arasında veri ve olayları paylaşma süreçlerini ifade eden bir kavramdır. Bir sayfayı component olarak tasarlayıp daha sonra bu componentin de alt bileşenleri olarakta başka componentler tasarlayabiliyoruz. Dolayısıyla bu componentler aralarında iletişim kurma ihtiyacı duyabilirler.
Parent to Child Communication
Parent componentten child component'e veri göndermek için kullanılan yöntemdir. @input() decorator'ü ile veri gönderilir.
Cild Component: Herhangi bir compnent içinde selector keyiyle bereber referans edilmiş componentir.
- ilk olarak child component içerisinde @input() decoratorü ile parantten gelmesini beklediğimiz değişkeni tanımlıyoruz.
- Daha sonra {{}} interpolation içerisinded ilgili değeri ekrana yazdırıyoruz.
- parent component içerisinde child componente göndermek istediğimiz değişkeni aşağıdaki gibi name isminde tanımlıyoruz.
- Daha sonra <app-child> selectorüne sahip child clasın içerisinde mavi çizgi ile belirtildiği gibi değişkenin değerini childa gönderiyoruz.
Child to Parent Communication
Child componentten parent component'e veri göndermek için kullanılan yöntemdir.
@output() decoratorü ve EventEmitter sınıfı kullanılır.
Bir parent altındaki 2 child componenet kendi aralarında haberleşmesi grekirse. childdan parenta daha sonra parrenttanda ilgili childa data gönderilir.Yukarıdaki iki yapı birleştirilir. Yada state ile bu işlem yapılır.
20 Temmuz 2025 Pazar
Directives
HTML elemanlarına ekstra özellikler ve davranışlar eklemek için kullanılan özel etiketlerdir.
Built-in / Ön Tanımlı Directiveler
*ngFor - Arraylerle beraber kullanılır ve arrayde kaç tane eleman varsa o kadar işlem gerçekleştiriyor. Html nesneleri üzerinde iterasyonel işlemler yapmak için kullanılır. Ayrıca her bir elemanın index değeride aşağıdaki hızlıca elde edilebilir.
*ngIf - Verilen koşula göre HTML nesnelerinin görünürlüğünü kontrol etmek için kullanır.
Eğer visible değişkeni değeri true ise <div> gösterilecektir. Eğer visible değeri false ise <ng-template> gösterilecektir.
[ngSwitch]
[ngClass]: HTML etiketlerinin class değerlerini dinamik olarak yönetebilmemizi sağlayan bir directive'dir.
İnterpolation Syntax
Component clasındaki her herhangi bir field yada property değerini {{}} operatoru html de bir alana basmaktır. Bu interpolation one-way data binding gerçekleştirmektedir. İnterpolation, yapısal olarak sadece field veya property değerlerini okumak ve böylece template'e yansıtmak için kullanılır. Bundan dolayı uygulamanın state(durumunu) değiştirecek herhangi bir işlem gerçekleştirmemektedir.
Terimler
ng new DenemeProject
Module: Belli bir domaindeki öğeleri kavamsal olarak ayırarak gruplamamızı sağlar. Örneğin bir e-ticaret uygulamamız olsun. Bu e-ticaret uygulamasında productlarla ilgili bir çalışmaya yapıyorsak bu producta ait tüm componenet,directive, service vs. yapıları product module altına koyabiliriz. Böylece domain bazlı ayrım sağlamış oluruz. Bir uygulamada N tane moduler olabilir fakat bu modullerden sadece bir tanesi ana moduldür. AppModule uygylama için ana modüldür.
Modüller birbirlerini import etmedikleri taktirde, bir modüldeki parça diğer modül altındaki parçalar tarafından erişilemez.
Component: ng g c [component_name]
Uygulamanın kullanıcıya gösterilecek sayfa bazında bütün işlemlerin yapıldığı yapıdır.Kullanıcıya gösterilecek sayfanın kendisidir. HTML(prdocut.componenet.html) ve TypeScript(product.component.ts) dosyalarından oluşmaktadır. Bir productpage sayfamız olacaksa işte bu, component olarak tasarlanır. Componentler src/app altında tutulur.
Componenetler, veri modeliyle etkileşim kurabilmek için Data Binding özelliğini kullanmaktadır. product.component.ts içindeki bir veri modelinde değişiklik olduğunda bunun anlık olarak product.component.html dosyasına yansımasına data binding denir. Bunun tam tersi bir durumda olabilir. product.component.html dosyasında değişkenin değerininde bir değişiklik yaptığımızda bununda product.component.ts ye yansımasına da two way data binding diyoruz.
Componentler uygulamanın bussines mantığını içerdikleri için ihtiyaç duydukları servislerin instancelerini dependency injection ile elde edebilirler.
Component içinde başka bir component olabilir.
Data Binding : Veri modeli ile templateler arasında veri akışını dinamik bir şekilde sağlarız. Böylece uygulamalardaki verisel değişiklikler otomatik olarak sayfalara yansıtılabilmektedir. Örneğin product.component.ts dosyası içerisinde bir product değişkenin durumunda bir değişiklik olursa bu product.component.html sayfasına otomatik olarak yansıtır.
Data binding çif tönlü olarak çalışmaktadır. Yani veri modeli güncellendiği zaman template'te, template güncellendiği zaman ise veri modeline anında yansıtılmaktadır.(two way data binding)
Örneğin bir create order formumuz olsun. Bu form üzerinden ilgili alanlar doldurulmaya başladığında otomatik olarak da product.component.ts içerisindeki veri modeli güncellenmektedir.
Decorator: TypeScript dilinin bir özelliğidir. Decorator sayesinde bir class'a yahut her hangi bir class memberına metadata etkeyebilmekteyiz. Böylece ilgilin yapının davranışı hakkında bir öntanımda bulunmuş oluruz.
Misal olarak bir class'ı @Component decorater'ı ile işaretlersek bunun bir component olduğu, Eğer @Injectable ile işaretlersek bir service olacağı anlamına gelmektedir.
Services: Genellikle dış servislerle( API- endpoint) iletişim kurmak, karmaşık iş operasyonlarını veya business logic'i yürütmek yahut componenetler arasında iletişim sağlayabilmek için kullanılan fiili yapılanmalardır.
Guard: Angular uygulamasında route erişimlerinin izin kontrolleri Guard yapılanması üzerinden gerçekleştirilmektedir.Aynı şekilde sayfalar arası geçiş süreçlerinde ilgili kullanıcının erişimine izin verilip verilmeyeceğine dair karar veren yapılanmalardır.
Pipes: Verilerin görüntülenme süreçlerinde işlenmesine yönelik işlevsellik sağlayan yapılarıdr.
Misal olarak bir verinin tarihsel yahut parasal biçime dönüştürülmesi pipelar sayesinde gerçkeleştirilebilir. Maskele yapmamız gerektiği durumlarda da kullanabiliriz.
Binding
Data Binding : Veri modeli ile templateler arasında veri akışını dinamik bir şekilde sağlarız. Böylece uygulamalardaki verisel değişiklikler otomatik olarak sayfalara yansıtılabilmektedir. Örneğin product.component.ts dosyası içerisinde bir product değişkenin durumunda bir değişiklik olursa bu product.component.html sayfasına otomatik olarak yansıtır.
Data binding çif tönlü olarak çalışmaktadır. Yani veri modeli güncellendiği zaman template'te, template güncellendiği zaman ise veri modeline anında yansıtılmaktadır.(two way data binding)
Örneğin bir create order formumuz olsun. Bu form üzerinden ilgili alanlar doldurulmaya başladığında otomatik olarak da product.component.ts içerisindeki veri modeli güncellenmektedir.
Binding Çeşitleri
1- Text İnterpolation
Template içerisinde, Component Class'ı içerisinde tanımlı olan bir field/property değerinin yazdırılması için kullanılan Binding yöntemidir. name değeri değiştikçe html içindeki alan değişir.
2- Property Binding
Template içerisindeki HTML nesneleri veya directive'ler için Component Class'ında tanımlı olan verilerin property olarak direkt bağlanmasını sağlayan yöntemdir. propertyler template içerisinde [] (köşeli parantez) içinde belirtilir.
Örneğin dışarıdan title isminde bir input değişkeni alan home.component.ts sınıfımız olsun. home.component.html içerisindede bu değişken ekrana yazdırılsın. App.component.html sınıfı içerisinde de yukarıdaki home.component.ts sınıfını içersin. home.component.ts sınıfın ihtiyaç duyduğu dışarıdan gelmesi beklenen title değişkeni aşağıdaki app.component.ts sınıfı içinde tanımlanır ve daha app.component.html sınıfı içerisinden çağırılan home componentine parametre olarak geçilir.
3- Event Binding
3- Two-Way Data Binding -> [(ngModel)]
Template içerisindeki bir HTML nesnesinin değeri değiştiğinde, o nesneyle bind edilmiş olan Component Class'ı içerisindeki fiedl/property değerinin anlık olarak değiştirilmesini ve aynı zamanda tam tersi durumunda geçerli olmasını sağlayan yöntemdir. [(ngModel()] kullanılır. Bu directive'nin kullanılabilmesi uygulamanın ana modulu(app.module.ts) sınıfı içerisinde FormModule eklenmelidir.
örnek kullanım
8 Temmuz 2025 Salı
Datetime ve DatetimeOffset
Bilgisayarmızın sağ alt köşedeki saati 9:24:27 iken uygulamayı ayağa kaldırdığımızda aşağıdaki sonuçlar elde ediliyor.
En doğru yaklaşım olarak zaman bilgisini veri tabanında DateOffset olarak tutmalıyız ve değerini DatetimeOffset.UtcNow olarak kaydetmeliyiz. Böylece zaman bilgisini veritabanında global olarak saklamış oluruz. İhtiyaç halinde hangi ülkenin saatine göre göstermek istiyorsak ilgili ülkenin timezone bilgisini kullanarak convert işlemi yapabiliriz.
Aşağıdaki örnekte DatetimeOffset.UtcNow zamanı Türkiye Time Zone bilgi kullanılarak Türkiye saatine convert edilmiştir.
