Aytaç Demirci

2 Ağustos 2025 Cumartesi

ViewChild

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

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.

Child component içerisinde ng-component selector'ı ile işaretlediğimiz kısma parentten gönderilen html öğesi basılacaktır.

Multiple ng-content

Modul

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.

2-) Componentler için rotaların tanımlanması. app-routing-module.ts

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.

yada aşağıdaki gibi en doğru çözüm

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.

3- Yukarıdaki formu submit etmek içinde formun (ngSubmit) eventine fonksiyon bağlamalıyız

FormGrupName

Bir modelin alt modeli şeklinde bir tanımlamaya ihtiyaç varsa.

VALİDASYON TANIMLAMA