Örnek sorular
Angular Directives PipesZorluk 1
*ngIf structural directive'i bir elemana uygulandığında ne yapar?
- aElemanı CSS
display: none ile gizler ama DOM'da tutar - bBoolean bir ifadeye göre elemanı (ve alt ağacını) DOM'a ekler veya DOM'dan kaldırır✓
- cElemanı bir dizideki her item için bir kez klonlar
- dSadece elemanın kullanıcı etkileşimini devre dışı bırakır, DOM'u değiştirmez
Açıklama:*ngIf bir structural directive'tir: ifadesi falsy olduğunda Angular elemanı ve içindeki her şeyi DOM'dan tamamen kaldırır (oradaki component instance'larını yok eder); truthy olduğunda onları (yeniden) oluşturur. Bu, sadece CSS ile gizlemekten farklıdır.
Angular Directives PipesZorluk 1
Angular template'inde *ngFor ne için kullanılır?
- aBirkaç seçenekten birini koşullu olarak göstermek için
- bTek bir elemanın CSS class'larını dinamik olarak bağlamak için
- cBir koleksiyondaki her item için template elemanını bir kez tekrarlamak için✓
- dBir component'i sadece scroll ile görünür olduğunda lazy yüklemek için
Açıklama:ngFor, bir koleksiyon (genelde bir dizi) üzerinde dönen ve her item için host elemanın/template'in bir kopyasını render eden bir structural directive'tir, örn. <li ngFor="let item of items">{{ item }}</li>.
Angular Directives PipesZorluk 1
{{ price | currency }} gibi bir Angular pipe'ının genel amacı nedir?
- aBir değeri, altta yatan veriyi değiştirmeden template içinde farklı bir gösterim formatına dönüştürmek✓
- bDeğeri bir backend'den almak için HTTP isteği yapmak
- cDeğeri doğrulamak ve bir kural sağlanmazsa hata fırlatmak
- dUygulandığı component property'sini kalıcı olarak değiştirmek
Açıklama:Bir pipe, girdi değerini alır ve gösterim için dönüştürülmüş bir değer döner — örn. currency, ham bir sayıyı $1,234.00 olarak biçimlendirir — component üzerindeki orijinal property'yi değiştirmeden.
Angular Directives PipesZorluk 1
data$ bir Observable olduğunda {{ data$ | async }} şeklinde kullanılan async pipe ne yapar?
- aObservable stream'ini, yayınlayacağı tüm değerlerin düz bir JavaScript dizisine anında ve senkron olarak dönüştürür, observable tamamlanana kadar template render'ını bloklar
- bPipe var olduğu sürece çalışan her tek change detection döngüsünde observable'ın altta yatan subscription'ını kasıtlı olarak iptal edip sıfırdan yeniden kurar
- cYalnızca kendisine bir
Promise verildiğinde doğru çalışır, bunun yerine bir Observable geçirilirse runtime tip hatası fırlatır - dObservable'a subscribe olur, son değeri döner, destroy'da otomatik unsubscribe eder✓
Açıklama:async pipe senin yerine bir Observable veya Promise'e subscribe olur, son yayınlanan değeri gösterir, her emisyonda view'ı check için işaretler ve host view destroy olduğunda otomatik unsubscribe eder — manuel subscribe/unsubscribe boilerplate'ine gerek kalmaz.
Angular Directives PipesZorluk 1
Bir Angular attribute directive'i içinde @HostBinding() ne için kullanılır?
- aHost elemanda bir DOM event'ini dinlemek için
- bDirective'in constructor'ına bir servis inject etmek için
- cDirective class property'sini host elemanın bir property'sine (örn. bir CSS class, style veya attribute) bağlamak için✓
- dDirective'in CSS selector'ını tanımlamak için
Açıklama:@HostBinding('class.active') (örneğin), bir directive property'sini uygulandığı host elemanın bir property'sine bağlar — directive property'si değiştiğinde Angular karşılık gelen host DOM property'sini/attribute'unu/class'ını otomatik olarak günceller.
Angular Directives PipesZorluk 1
Angular'da structural directive ile attribute directive arasındaki temel fark nedir?
- aİki terim arasında kesinlikle gerçek bir fark yoktur — Angular'ın dokümantasyonu aynı tek altta yatan directive mekanizmasını tanımlamak için bu iki terimi birbirinin yerine geçecek şekilde kullanır
- bStructural directive eleman ekler/kaldırır (
*ngIf); attribute directive var olan bir elemanın görünümünü/davranışını değiştirir ([ngClass])✓ - cAttribute directive'ler, yalnızca başka Angular component'lerinin üzerine uygulanabilecek şekilde kısıtlıdır ve bir
<div> ya da <span> gibi düz, native bir HTML elemanına asla doğrudan bağlanamazlar - dStructural directive'lerin class'ı, diğer tüm directive türlerinin kullandığı olağan
@Directive decorator'ı yerine @Component ile decorate edilmelidir
Açıklama:Structural directive'ler (ngIf/*ngFor gibi) eleman ekleyip/kaldırarak DOM ağacının yapısını değiştirir. Attribute directive'ler ([ngClass], [ngStyle] veya custom bir [appHighlight] gibi) DOM ağacında ne bulunduğunu değiştirmeden var olan bir elemanın görünümünü/davranışını değiştirir.