Üçüncü dersten herkese merhaba, ikinci derste Angular'da Html dosyasını güncellemek başlığı ile merhaba dünya projemizin html içeriğini güncellemiştik. Bu uygulamada ise Angular'ın nimetleri ile tanışmaya başlayacağız ve input kutucuğuna yazı yarak altındaki yazının anlık olarak nasıl değişebildiğini göreceğiz.
1. Önceki sorudan devam ediyoruz ve ngModel kullanabilmek için gerekli import işlemini yapacağız. app.module.ts dosyasını açarak FormsModule'u import ediyoruz. Dosyanın düzenlenmiş hali aşağıdaki gibi olmalı.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2. app.component.ts dosyasını açarak önceki sorudan kalan dynamic content düzenlemesini aşağıdaki gibi değiştiriyoruz:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isim = 'Reitix';
}
3. Artık sadece Html sayfasını düzenlemek kaldı. ngModel kullanımına dikkat ederek Html kodunu aşağıdaki gibi düzenleyin ve işlem tamam.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></head><body>
<div style="text-align:center">
<input type="text" [(ngModel)]="isim"/>
<p>{{isim}}</p>
</div>
</body></html>
4. Terminalden projeyi çalıştırdıktan sonra başlangıçta hem input text'te, hem de p etiketi içerisinde Reitix yazdığını, sonrasında ise input yazısı değiştirildikçe anı anda p etiketi içerisindeki yazının da değişmekte olduğunu görebilirsiniz.