PrimeNG Inputtext

Merhaba,

Öncelikle PrimeNG nin kurulumu için kurulumunu gerçekleştirmek gerekiyor. Kurulumu gerçekleştirdikten sonra geliyoruz. InputTextModule eklemeye. Bunun için component oluşturuyoruz.

Component oluşturmak için cmd ekranında iken

ng g component Inputtext

yazarak Inputtext adında bir component oluşturuyoruz. Oluşturulan component için inputtext adında bir klasör oluşturarak  içerisinde

inputtext.component.css
inputtext.component.html
inputtext.component.spec.ts
inputtext.component.ts

dosyaları oluşturuldu.

.html : Standart html dosyasıdır. Ön yüz (front end) için kullanılır.

.ts : Backend için kullanılacak olan dosyadır. Javadaki bean dosyalarıdır.

.css : Klasik sitil dosyasıdır.

Oluşturulan bu componenti ana sayfaya import edebilmek için app.component.html içine

<app-inputtext></app-inputtext>

yazarak ekleyebiliriz.

Öncelikle PrimeNG Inputtext eklemek için InputTextModule eklemek gerekiyor.

import {InputTextModule} from 'primeng/primeng';

kullanarak import ediyoruz.

Bunun için de app.module.ts dosyasını aşağıdaki gibi düzenliyoruz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { InputtextComponent } from './inputtext/inputtext.component';
import {InputTextModule} from 'primeng/primeng';

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

.html dosyasına aşağıdaki gibi ekleme yapmamız gerekiyor.

inputtext.component.html

<input type="text" pInputText />