Angular Bileşenleri (Components)

Angular’de bileşenler (Components), ek meta verisi kullanabilmenize olanak sağlar.

Angular’de bileşenler (Components), her şey olabilir. Bileşen bir button olabilir, bir liste olabilir, bir gönürüm düzeni olabilir. Kısacası, anlam yükleyeceğiniz her şey bir bileşen olarak düzenlenebilir.

Bileşen belli bacaklaran meydana gelir.  Birinci bacağı, Typescript dosyası. TS uzantılı olur.  Bu dosya içerisinde seçici (selector) için özel bir etkilet tanımlanır. Bu etiketin kendine ait bir HTML dosyası vardır. Bu da bileşenin ikinci ayağıdır. İkinci ayağında olan bu dosyanın tanımını temlateURL parametresi ile tanımlanır. İlla ayrı dosya olmak zorunda değildir. Dahili HTML yazılabilir. Eğer böyle yapılacaksa direk template parametresi kullanılabilir

Bu HTML dosyasını stillendiren bir CSS dosyası vardır. CSS dosyası, bileşenin üçüncü ayağını meydana getirir.

Son ayağı ise modül (Module) dosyasıdır. Veri ile ilgili tanımları bu dosyada barındırmaktadır.

Bileşenler Angular uygulamasının en temel arayüz yapı taşıdır. Angular’de hiyerarşik düzende, Angular Application’dan sonra Compoents gelir. Bileşenler aynı zamanda Directive’lerin bir alt kümesidir.

Angular CLI üzerinden yeni bir bileşen eklemek için yazmanız gereken komut;

Buradaki “generate” parametresi yerine “g”, “component” parametresi yerine de “c” kullanılabilir. Eğer spec dosyasının oluşturulmamasını isteniyorsa komutun sonuna, “–spec false” parametresi ve değeri eklenebilir. Yani son haliyle aşağıdaki gibi bir sıralama kullanılabilir.

Bir bileşen, başka bir bileşen veya uygulama tarafından kullanılabilir olması için bir NgModule’e ait olmalıdır. Bir bileşenin bir NgModule öğesinin üyesi olduğunu belirtmek için, onu bu NgModule’nin bildirim (Decorations) alanında listelemelisiniz.

Bileşen Meta Verileri

  • animations – list of animations of this component
  • changeDetection – change detection strategy used by this component
  • encapsulation – style encapsulation strategy used by this component
  • entryComponents – list of components that are dynamically inserted into the view of this component
  • exportAs – name under which the component instance is exported in a template
  • host – map of class property to host element bindings for events, properties and attributes
  • inputs – list of class property names to data-bind as component inputs
  • interpolation – custom interpolation markers used in this component’s template
  • moduleId – ES/CommonJS module id of the file in which this component is defined
  • outputs – list of class property names that expose output events that others can subscribe to
  • providers – list of providers available to this component and its children
  • queries – configure queries that can be injected into the component
  • selector – css selector that identifies this component in a template
  • styleUrls – list of urls to stylesheets to be applied to this component’s view
  • styles – inline-defined styles to be applied to this component’s view
  • template – inline-defined template for the view
  • templateUrl – url to an external file containing a template for the view
  • viewProviders – list of providers available to this component and its view children