Angular'da Alt Bileşenler

Eğitimin en başında belirtildiği gibi, Angular'da tüm proje bileşenlere bölünür. Önceki derslerde yalnızca varsayılan olarak oluşturulmuş ana bileşenle çalıştık. Şimdi alt bileşenler oluşturmayı öğrenelim.

Yeni bileşenlerin kodu, Angular tarafından terminalin özel bir komutu kullanılarak otomatik olarak oluşturulur: generate component. component kelimesinden sonra yeni bileşenimizin adını yazmamız gerekir. Diyelim ki user bileşenini oluşturmak istiyoruz:

ng generate component user

Komut çalıştırıldıktan sonra, yeni bir app/user klasörümüzün olduğunu göreceğiz. İçinde bileşenin tüm standart dosyaları bulunacak.

user.component.ts bileşen dosyasında bileşen dekoratörü otomatik olarak oluşturulacak:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Ayrıca bu dosyada bileşen sınıfı otomatik olarak oluşturulacak:

export class UserComponent {

}

Şimdi alt bileşenimizi ana bileşene bağlamamız gerekiyor. Ana bileşenin, framework kurulduğunda varsayılan olarak bulunan app bileşeni olduğunu varsayalım. Bileşenimizi içe aktaralım:

import { UserComponent } from './user/user.component';

Bileşen dekoratöründe, imports anahtarında içe aktarılan bileşenimizi belirtelim:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // burada
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Şimdi alt bileşenin içeriğini ana bileşende gösterebiliriz. Bunun için, ana bileşenin şablon dosyasında, adı alt bileşenin @Component dekoratörünün selector özelliğinde belirlenen özel etiketi yazmamız gerekir. Bizim durumumuzda bu app-user etiketi. Bunu ana bileşenin şablonuna yazalım:

bazı yazı
<app-user></app-user>

ProductComponent bileşenini oluşturun. Bu bileşeni projenizdeki ana bileşene bağlayın.

Alt bileşenin şablonunda değişiklikler yapın. Değişikliklerin tarayıcıda uygulandığından emin olun.

Alt bileşenin CSS stillerini değiştirin. Stillerin tarayıcıda uygulandığından emin olun.

Alt bileşende name ve price özellikleri oluşturun. Değerlerini alt bileşenin şablonunda gösterin.