Bir önceki makalemizde Angular 8 Dosya Yapısı konusunu incelemiştim. Şimdi bir Angular projesinde Angular CLI ile nasıl component oluşturabileceğimizi inceleyeceğim. Öncelikle Visual Studio Code editörünün View >> Terminal bölümünden bir terminal açıyorum. Terminalde ng g component [Component Adı] ile component oluşturma işlemini yapıyoruz. 

ng g component profile
angular component oluşturma kullanma angular generate component
angular generate component

Bu şekilde app klasöründe profile adında bir component oluşturmuş oluyorum.

angular component oluşturma kullanma angular component folder
angular component folder

Biz component generate komutunu çalıştırdığımızda oluşturduğumuz component app.module içerisine import edilip @NgModule bölümüne eklendiğini görebilirsiniz.

angular component oluşturma kullanma app.module
app.module.ts

Bu şekilde görüldüğü gibi ‘./profile/profile.component’ adresi ile ProfileComponent isminde import yapılmış ve @NgModule içerisine declare edilmiştir. Oluşturduğumuz profile.component.ts dosyasının içerisini inceleyelim.

angular component oluşturma kullanma profile.component
profile.component.ts

Oluşturulan dosyada @angular/core içerisinden Component ve OnInit paketleri import edilmiştir. Page Load eventi mantığında çalışan ngOnInit eventi otomatik olarak eklenmiştir. Selector özelliğine profile olarak oluşturduğumuz component ismine uygun app-profile isminde atanmıştır. Bu selector yapısı sayesinde oluşturduğumuz componenti istediğimiz sayfalarda kullanabileceğiz. TemplateUrl ve styleUrls özelliklerinde ilgili componentin html ve stil dosyalarının adresleri tanımlanmaktadır.

Oluşturulan Componentin Kullanımı

Daha önce belirttiğim gibi oluşturduğumuz component dosyasındaki selector özellğine atanan app-profile değerini projenin başlangıç componentine ekliyorum. Bu arada projenin başlangıç componentini app.module dosyasında @NgModule içerisindeki bootstrap: [AppComponent] değerini inceleyebilirsiniz. Burada göründüğü gibi bizim projemizde AppComponent başlangıç componentimizdir.

Oluşturmuş olduğum ProfileComponent isimli componentin selector özelliğini <app-profile></app-profile> şeklinde kopyalayıp AppComponent isimli componentin html kaynağı olan app.component.html dosyasına ekliyorum.

Daha sonra projeyi çalıştırdığımızda profil componentinin içeriğindeki değerleri görebilmekteyiz.