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]
 yazdığımız anda bizim için app componenti altında bir componentin ihtiyacı olan tüm dosyaları (html, ts, style ve spec.ts) oluşturur. Bunu app (root componentiniz )dizini altında yeni bir klasör oluşturup oraya atar. 
Componentleri istediğimiz kadar kullabiliriz bir kısıtlaması yoktur. Ve genarate komutu ile oluşturduğumuz componenti kendi otomatik olarak appModule içerisine ekledi. Eğer biz bir componenti başka bir yerden taşımış olsaydık appModule altına kendimiz eklememiz gerekecekti zira kullanamayız.
Burada bir class’ı component yapan durum
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styles: []
})
bu @component anotasyonu ile olan tanımlamadır. Bunun haricinde class larımız (yani ts dosyalarımız) tip tutabilir servis olabilir ya da bir amaç için olabilir. Fakat eğer component olmasını ve bir componenti yönetmesini istiyorsak bu anotasyon ile tanımlamaları yapmak zorundayız. Bunlar ise

selector ile bir html sayfasında componentimizi nasıl çağıracağımızı söylüyoruz. Buradaki örnekte <app-root></app-root> yazarak.

templateURL  kısmında componentin sahip olduğu html dosyasını veriyoruz.
TemplateURL yerine template de denebilir. Template dediğimizde inline html koyuyoruz.
template :'<html><body>bla bla bla</body></html>’
gibi. Çünkü TemplateURL demek dışarıya export olarak html file seçmektir. Template sadece vermektir.
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.