Renderer2 Nedir? Nasil Kullanilir?
Eğer Ön Yüz Geliştirme kariyerinize benim gibi henüz Javascript konusunda yetkin bile olmamanıza rağmen Jquery ile girmiş ve ön yüzde binbir türlü animasyonu yapabiliyor, butonları zıplatıyor, günleri geceleri simule ediyorsanız, Angular gibi bir framework’e geçiş yaptığınızda ilk zamanlar aklınızda şu soru oluyor: “Uygulamamda DOM üzerinde değişiklik yapmak zorundayım, native methodlar dışında ne kullanabilirim?”
Bu noktada, arayışlarınızın bir kısmına Renderer2 kullanarak son verebilirsiniz. Çünkü DOM manipülasyonu söz konusu olduğunda Renderer2 kullanabileceğimiz en doğru yöntemlerden bir tanesi.
Tabii ki VanillaJS bize DOM manipülasyonu için seçenekler tanıyor, ‘document.querySelector’ ile DOM’dan eleman seçip ‘appendChild’ ile DOM’a eleman eklemek, silmek, class ekleyip kaldırmak ve daha fazlası mümkün. Ne de olsa bu bir Javascript uygulaması. Lakin, native methodları kullandığımız taktirde Angular’ın bize sağladığı DOM abstraction yöntemlerinden ve masaüstü, mobil, web worker ve server side rendering gibi bir çok önemli fırsattan mahrum kalıyoruz.
Siz de benim gibi Awwwards üzerinde (sanat eserinden bozma) sitelere kıskançlıkla ve hayranlıkla bakıyorsanız, Angular’ın bize sunduğu kolaylıklardan, güzelliklerden birisi olan Renderer2'den faydalanabilirsiniz. `CreateElement`, `addClass`, `removeClass` gibi ihtiyaclariniz varsa yine büyük ihtimalle ilk başvurmanız gerekecek özelliklerden birisi Renderer2 olacaktır.
(Üstte bahsettiğim örnek söz konusu olduğunda yine de akla ilk gelecek Framework Angular olmayabilir)
Renderer2 en temelde, Custom Directive yaratılarak kullanılıyor. Zira Directive’ler Angular’da uygulama geliştirmiş her bireyin kullandığı yapıtaşlarıdır. Tüm component’ler aslında birer directive’dir. Bu küçük ama temel bilginin üzerine, basit bir örnek ile gösterecek olursak:
Bundan sonra html dosyasında yalnızca attribute’u,
Şeklinde eklemeniz yeterli olacaktır. Sayfa ilk açıldığında, ‘off’ class’ı kalkacak, ‘on’ eklenecektir.
Renderer2'nin Directive ile kullanımı bu şekilde. Component içinde kullanımı için ise, aşağıdaki gibi kırmızı kenarları olan bir button yaratalım.
Renderer2'nin Directive ve Component içinde kullanımları genel olarak bu şekilde. Eventler ile, Directive yaratarak ve Component içinde kullanımlarının, methodların kendilerini kullanmaya göre daha biraz daha kompleks olması sebebi ile bu 3'üne öncelik verdim.
Daha fazla bilgi icin, Angular.io üzerinden, diğer Renderer2 methodlarını inceleyebilirsiniz.
Yazıda başvurduğum kaynakların listesi için:
