Photo by Iñaki del Olmo on Unsplash

Nasıl ki 2x2=4 ise Angular’da subscription = memory leak tir. Bununla ilgili çözümler ararken ilk karşılaşacağımız konulardan birisi “async pipe” bir çoğumuzun varlığından bile haberdar olmadığı ya da unuttuğu bir şeydir.

Tabi “async pipe” konusuna gelene kadar, rxjs içerisinden take, takeUntil, takeWhile gibi operatörlere de mutlaka göz atmışızdır.

“Hayır ben bunların hiç birinden haberdar değilim” diyorsanız şunu hatırlatmakta fayda var.

unsubscribe is a must! (abonelikten çıkmak bir zorunluluktur!)

Observable bir nesnenin içerisinde bulunan veriyi almak ve HTML de kullanmak için yöntemlerden birisi subscription dır. Şimdi “async pipe” ile deneyelim.

export class AppComponent {     name$ = new BehaviorSubject<string>('Lorem');     constructor() {}}


Photo by Sander Weeteling on Unsplash

Bir projede HTTP isteklerini azaltmak hem kullanıcıyı mutlu eder (daha hızlı ve mobil cihazlarda daha az veri tüketen bir uygulama) hem de server tarafındaki yükü azaltır. GET isteği yaptığımız ve bir defa gidip veri aldığımız HTTP noktalarından gelen verileri çok basit şekilde oluşturcağımız bir önbellekleme yöntemiyle tarayıcıda tutabiliriz.

Bunun için, her projenin olmazsa olmazı bir HTTP Interceptor’a ihtiyacımız var.

Gelen HTTP isteğini handle ettiğimiz bölümde pipe kullanıyoruz.

next.handle(newRequest).pipe()

pipe içerisine rxjs tap operatör fonksiyonu ekliyoruz.

next.handle(httpRequest).pipe(
tap(event => {})
)

tap operatörü içerisine event parametresi ile HttpEvent alıyoruz.

HttpEvent in, HttpResponseun bir örneği (instance) olması gerekiyor.

next.handle(httpRequest).pipe(
tap(event…


Photo by Markus Spiske on Unsplash

Javascript ile doğru tip kontrolü yapmaktan bahsedeceğim.

Primitif tipleri kontrol etmekte pek fazla problem yaşamayız ancak konu Object, Array ya da Null olduğunda durum değişir.

Tip kontrolü dediğimizde ilk aklımıza gelen “typeof” ifadesidir ancak her zaman doğru sonucu vermeyebilir.


İş hayatımda yaşadığım bazı değişikliklerden dolayı uzun süre ara verdiğimiz Angular Seri’sine Pipe lar ile devam ediyoruz.

Angular Pipe, verileri biçimlendirmek, dönüştürmek için kullandığımız ve yeri geldiğinde listelerimizi filitrelememizi sağlayan yapılardır. Filitreleme işlemlerini daha ileride göreceğiz.

Dosyalarımızın başlangıç halleri aşağıdadır.


ngStyle

HTML elementlerine inline style eklememizi sağlar. Öncelike PlainJS ile nasıl yaptığımızı görelim.

HTML içerisinde bir div olduğunu varsayalım.

<div id="myDiv">Lorem</div>

Javascript içerisinde bu div elementini bulalım.

var htmlElement = document.getElementById("myDiv");

htmlElement imizin yazı rengini değiştirelim.

var htmlElement = document.getElementById("myDiv");
htmlElement.style.color = "red";

Dosyalarımızın başlangç halleri aşağıdadır.


class binding

Belirli durumlara göre HTML içerisinde bulunan elementlere css class ataması yapabiliriz. Dosyalarımızın başlangıç halleri:


ngIf

Belirlediğimiz koşul/koşullara bağlı olarak, kullanıldığı HTML elementi render eder/etmez.

HTML ve .ts dosyalarımız aşağıdaki gibidir.


Bu yazımızda two-way data binding i inceleyceğiz. html ve ts dosyalarımız aşağıda göründüğü gibidir.


Bu yazımızda HTML içerisinde bulunan elementlere event binding yapmayı ve two-way data binding konusunu inceleyeceğiz.

Yine app.component.ts ve app.component.html üzerinde çalışacağız.


Bu yazımızda component property lerini HTML içerisinde göstermeyi ve …. inceleyeceğiz.

app.component.ts isimli dosya üzeridne çalışacağız.

Hıdır Volkan Sönmez

Front end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store