Angular >2 — Local Referance

Html içinde #serverName ile verdiğmiz arkadaşı gayet güzel bi şekilde yine template içinde çağırabiliriz. Fakat buradaki ince nokta yalnız o template yani html içinde çağırabilirim herhangi başka bir yerde işime yaramaz. Ts içinde binding yaparcasına değişken ismi ile kullanamam !!!(şimdilik)
Local Refereances buna deniyor Angular >2 için  .Ts içinde serverName : HtmlInputElement olarak typescript içinde bu arkadaşı uzaktan çağırabilirim

yani functionInTypeScript(serverName:HtmlInputElement){

Bazende local referansları ts içinde bir metot ile çağırmadan erişmek isteriz bunun için decorator kullanmak iyi ve kullanışlı bir çözümdür. Burada @ViewChild kullanıyoruz !
<input #serverName........./>
@ViewChild(‘serverName’) serverName:ElemetRef;
serverName.nativeElement.value;


@ViewChild(‘isminiVerebiliriz’) kullanarak bu argumana selector olduğunu anlatıyoruz. Bu arkadaş bizim local referansımızı buradan tanıma şansını kendi kendine elde edebiliyor.
Bu arkadaşın tipi de elementRef olarak geçer o zaman biz bunu initialize ederken ElementRef olarak erişebiliyoruz.
Erişirkende nativeElement.value şeklinde güzel bi şekilde erişebiliyoruz.(Kod üzerinde göründüğü üzere)

Ve kısa bir not : Elemanlara kendin(Javascript, JQuery ) erişmeye çalışma o elemanları angular ın özelliklerini kullanarak düzenlemeye ve erişmeye çalış bu şekilde karmaşayı azaltmış olacaksınız. Unutulmamaıdır ki karmaşa , kodun doğasında vardır. Artırılmamaya çalışılmalı 🙂

Kolay gelsin