Angular'da Yeni Component Eklemek

Angular'da iç içe kullanabildiğimiz yapılara Component adı veriliyor. Component'ları hem manuel, hem de terminal'den otomatik olarak nasıl ekleyebileceğimizi anlatacağım.

Angular'da Manuel Component Eklemek

1. Ekleyeceğimiz component bir menü olsun. Bunun için öncelikle src/app klasörü altında menu adında bir klasör açıyoruz ve içerisine de aşağıdaki 2 dosyayı ekliyoruz.

- menu.component.html

- menu.component.ts

2. Component'imizi Angular'a bildirmek için app.module.ts dosyasının içerisinde import ve declarations bildirimlerini ekliyoruz:

...
import { MenuComponent } from './menu/menu.component';

@NgModule({
  declarations: [
    MenuComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. menu.component.html dosyasının içerisine menü olduğunu belirten kısa bir html kodu ekliyoruz.

<h3>Menü</h3>

4. menu.component.ts dosyasını da aşağıdaki gibi hazırlıyoruz

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

@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html'
})

export class MenuComponent {}

5. Artık app.component.html dosyasının içerisine component'i ekleyerek çağırabilir ve istediğimiz yerde kullanabiliriz.

<div class="container">
  <div class="row">
    <div class="col-md-6">Merhaba</div>
    <div class="col-md-6">Reitix</div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <app-menu></app-menu>
      </div>
    </div>  
</div>

Angular'da Terminal ile Component Eklemek

Şimdi ilk 4 adımda yaptığımız işlemleri tek bir satır kod yazarak terminalden yapacağız. Bu sefer ekleyeceğimiz component'in ismi footer olsun. Terminal içinden + tuşuna basarak yeni bir terminal açıyorum ve aşağıdaki kodu yazarak enter tuşuna basıyorum.

ng generate component footer

Not: Bu kodu daha kısa yazmamız da mümkün. g: generate ve c: component'in kısaltmasıdır.

ng g c footer  

Angular bize app/src klasörü içinde tüm gerekli dosyaları eklediği gibi gerekli modül tanımlamalarını da yapmış olacaktır.