Yeni bir component oluşturup uygulamamızda kullanmanın en basit yolunu anlatacağım. Amacımız şimdilik sadece işleyişi görmek olduğu için çok basit bir component olacak.

ng generate component newProducts

komutu ile newProducts adında bir component oluşturma emrini verdim.
src/app/new-products klasörü altında;

  • component class
  • html template
  • css dosyası
  • test dosyası

Oluşturuldu.

AppModule dosyam altında gerekli import ve declaration işlemleri yapıldı.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NewProductsComponent } from './new-products/new-products.component';

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

newProducts.component de product adında bir değişken tanımlayıp değer verdim.

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

@Component({
  selector: 'app-new-products',
  templateUrl: './new-products.component.html',
  styleUrls: ['./new-products.component.css']
})
export class NewProductsComponent implements OnInit {

  product = 'apple';

  constructor() { }

  ngOnInit() {
  }

}

new-products.component.html template’ ine product değişkenimi(model) ekliyorum

<h1>{{product}}</h1>

Vee, bu component’ i, ana component’ im olan appComponent’ in template’ ine ekliyorum. Eklemek için yapmamız gereken, component decorator’ ün selector parametresindeki değeri etiket olarak yazmak.

<app-new-products></app-new-products>

ng serve komutu ile projemizi serve ettim ve aldığım sonuç

Last modified: 22 October 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.