Angular bileşeni nedir?

Question

Accepted Answer

**Bileşen**, Angular UI'ın temel yapı taşı — ekranın bir bölümünü ("görünümünü") kontrol eden `@Component` ile süslenmiş TypeScript **sınıfı**. Her Angular uygulaması bir bileşen ağacıdır. ## Bir bileşenin anatomisi ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` `@Component` dekoratörü üç şeyi bir araya getirir: **seçici** (HTML'de nasıl kullanırsınız), **şablon** (biçimlendirme) ve **stiller** (bu bileşene kapsamlı). ## Sınıf mantığı ve verileri tutar ```html

``` Sınıfın genel özellikleri ve yöntemleri bağlama aracılığıyla şablonunda doğrudan erişilebilir — bu, Angular'ın veriyi ve görünümü nasıl bağladığının temelidir. ## Bir bileşeni kullanma ```html ``` ## Stiller varsayılan olarak kapsüllenmiştir ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular bileşen stillerini otomatik olarak kapsamlandırır (View Encapsulation), bu nedenle CSS bileşenler arasında sızıntı yapmaz. ## Neden önemli Bileşenler her Angular uygulamasını yapılandırma şekliniz — şablon + mantık + kapsamlı stiller, bir ağaçta birleştirilen kendi kendine yeterli birimler. `@Component` dekoratörünü (seçici, şablon, stiller) anlamak ve sınıfın özellikleri/yöntemlerinin şablona nasıl bağlandığını anlamak, Angular geliştirmenin mutlak temelidir; diğer her şey bileşen modeline göre oluşturulur.