Angular Component bir TypeScript class’ ı dır.

export class AppComponent {
  title = 'first';
}

ÖNEMLİ NOT: Aşağıdaki anlatımda adım adım component yazmayı anlatıyorum. Lakin ng cli ile "ng generate component " şeklindeki komut ile de component oluşturabiliyoruz. Bu noktada, component leri elle mi oluşturucaz yoksa cli ile mi çelişkisi yaşamayın. Her iki yöntem de farklı durumlarda kullanılabilir.

Lakin tek başına bu şekilde bir component olarak kullanamayız, Angular’ ın daha fazla bilgiye ihtiyacı vardır. Bu class’ ın sırada bir class değil, bir component olduğunu anlaması gerekir. Bunun için bir typescipt özelliği olan "decorator" kullanıyoruz.

Decorator sadece class lara yada component e özgü birşey değil. Pek çok farklı noktada da decorator kullanıyoruz. Bu asla yanlış anlaşılmamalı.

Component decorator yazmadan önce Component’ i angular core dan import etmeliyiz.

import { Component } from '@angular/core';

Component decorator tanımlaması şu şekildedir;

@Component({
  selector: 'componentinHtmlEtiketi,
  templateUrl: './componentIsmi.html',
  styleUrls: ['./componentIsmi.css']
})

Component’ in selector parametresine, component in varlık göstereceği html etiketimizi yazıyor. Bu html etiketimiz tamamen bizim isimlendirip oluşturduğumuz bir etiket. Örneğin bir e-ticaret sitesinde

<yeni-urunler></yeni-urunler>

Şeklinde bir etiket ile component’ imizi kullanabiliriz.

templateUrl parametresinde, component’ in kendi html dosyasının adresini veriyoruz.

styleUrls dizisinde ise, component’ in html içi tanımladığımız css dosyalarının adreslerini veriyoruz.

Component’ imiz şu şekilde gözükebilir;

import { Component } from '@angular/core';

@Component({
  selector: 'componentinHtmlEtiketi,
  templateUrl: './componentIsmi.html',
  styleUrls: ['./componentIsmi.css']
})

export class componentIsmi {
  ilk_degisken = 'merhaba';
}

Component için css dosyası opsiyoneldir.

Component’ in template(componentIsmi.html) i herhangi bir text ile dolduruyorum.

Ve sıra geldi, component’ i kullanmaya 🙂

Last modified: 22 October 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.