structural directives in Angular

Angular’da *ngIf, *ngFor gibi yapılar, yapısal direktifler (structural directives) olarak adlandırılır. Bu direktifler, HTML’deki elementlerin yapısını değiştirmek veya kontrol etmek için kullanılır.

Yapısal Direktifler Nedir?

Yapısal dire…


This content originally appeared on DEV Community and was authored by Mustafa Çam

Angular'da *ngIf, *ngFor gibi yapılar, yapısal direktifler (structural directives) olarak adlandırılır. Bu direktifler, HTML'deki elementlerin yapısını değiştirmek veya kontrol etmek için kullanılır.

Yapısal Direktifler Nedir?

  • Yapısal direktifler, HTML DOM ağacında elementleri ekleyip kaldırmaya yarayan direktiflerdir.
  • Bu direktifler, bileşenlerin veya sayfaların görünümünü dinamik olarak değiştirmemize olanak tanır.
  • * işareti, bu direktiflerin yapısal olduğunu ifade eder. Bu işaret Angular tarafından kısa bir gösterim olarak kabul edilir ve aslında bu direktiflerin DOM elementini manipüle ettiğini belirtir.

En Yaygın Yapısal Direktifler:

  1. *ngIf:

    • Belirtilen koşul doğruysa (true) HTML elementini DOM'a ekler, aksi takdirde çıkarır.
    • Örnek: 
     <div *ngIf="isVisible">Bu metin sadece 'isVisible' true olduğunda görünür.</div>

  2. *ngFor:

    • Bir dizi veya koleksiyon üzerinde döngü yaparak HTML elementlerini tekrarlar.
    • Örnek: 
     <ul>
   <li *ngFor="let item of items">{{ item }}</li>
 </ul>

  3. *ngSwitch:

    • Belirli bir duruma göre farklı bileşen veya elementleri görüntülemek için kullanılır.
    • Örnek: 
     <div [ngSwitch]="day">
   <p *ngSwitchCase="'Monday'">Bugün Pazartesi</p>
   <p *ngSwitchCase="'Tuesday'">Bugün Salı</p>
   <p *ngSwitchDefault>Bugün Hafta Sonu</p>
 </div>

Direktif Türleri:

  1. Yapısal Direktifler:

    • HTML'deki elementlerin yapısını değiştirir (ekler veya çıkarır).
    • Örnekler: *ngIf, *ngFor, *ngSwitch.

  2. Öznitelik Direktifleri (Attribute Directives):

    • Bir elementin görünümünü veya davranışını değiştirir, ancak elementin yapısını değiştirmez.
    • Örnek: [ngClass], [ngStyle], ngModel.

Özet:

  • *ngIf ve *ngFor gibi özelliklere yapısal direktifler denir.
  • Yapısal direktifler, DOM üzerinde elementleri dinamik olarak ekleyip kaldırır.
  • Angular'da ayrıca öznitelik direktifleri de vardır ve bunlar elementin stilini veya davranışını değiştirir.


This content originally appeared on DEV Community and was authored by Mustafa Çam


Print Share Comment Cite Upload Translate Updates
APA

Mustafa Çam | Sciencx (2024-09-22T16:52:34+00:00) structural directives in Angular. Retrieved from https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/

MLA
" » structural directives in Angular." Mustafa Çam | Sciencx - Sunday September 22, 2024, https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/
HARVARD
Mustafa Çam | Sciencx Sunday September 22, 2024 » structural directives in Angular., viewed ,<https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/>
VANCOUVER
Mustafa Çam | Sciencx - » structural directives in Angular. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/
CHICAGO
" » structural directives in Angular." Mustafa Çam | Sciencx - Accessed . https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/
IEEE
" » structural directives in Angular." Mustafa Çam | Sciencx [Online]. Available: https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/. [Accessed: ]
rf:citation
» structural directives in Angular | Mustafa Çam | Sciencx | https://www.scien.cx/2024/09/22/structural-directives-in-angular-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts