Angular içerisinde kullandığımız ana yapılardan olan Componentler bize herşeyi derli toplu tutma kullanma ve değiştirme imkanı sunar. Şöyleki
uygulamamız ana bir componentten oluşur. (bkz: APP Component).Ve onun altında servisler ve kullandığımız type classlarını içerebilir. Bunun yanısıra APP Componentimiz TodoListHeader Component TodoList Component ve diğer yeşil olanları içerir. Bu şu demektir. App Component uygulamanın ana çalıştığı bir merkez componenettir. Devamında içerisinde 4 adet component oluşturuyoruz. Daha sonra bu componentleri kendi içlerinde ve ana componentte çağırabiliyoruz.
Component
Angular 2 den sonra oluşturulan Frameworkte bir Angular uygulaması önce angular-cli.json dosyasından uygulamamız index parametresi üzerinden ilk olarak hangi sayfayı çalıştıracağını öğrenir. Ve ilk olarak bu sayfayı açar. Varsayılan olarak bu sayfa index.html dir. uygulamanın bizi karşıladağı sayfa arkada main.ts denilen generic(global) bir ts dosyası çalıştırır. Bunun yanısıra uygulamanıza adım atmak istiyorsanız ilk yapmanız gereken app.componenti uygulama içerisine eklemektir. Bunu app.component.ts içerisinde selector değişkenin karşısında bulunan değerle sağlayabiliriz. Mesela benim,
import { Component } from '@angular/core'; @Component({ selector:'app-root', templateUrl:'./app.component.html', styles: []})
Burada selector: ‘app-root’ ile yani herhangi bir başka html içerisinde <app-root></app-root> şeklinde çağırmam benim için app componentime erişim sağlayacaktır. Yeni bir component oluşturmak için komut satırıdan,
Ng generate component [componentName] >>> ng g c [componentName]

@Component({ selector:'app-root', templateUrl:'./app.component.html', styles: [] })
selector ile bir html sayfasında componentimizi nasıl çağıracağımızı söylüyoruz. Buradaki örnekte <app-root></app-root> yazarak.
TemplateURL yerine template de denebilir. Template dediğimizde inline html koyuyoruz.
template elementi olmak zorundadır !
style elemeti componentin stilini söyler. Multiple olduğunda virgül ile ayrılır. Eğer İnline css vereceksek styles olacak stylesURL değil.
Buradaki style ve styleURL özelliklerini birlikte kullanamıyoruz. Kesinlikle ya biri ya biri olmalıdır.