5.00 / 1 oy

Angular'da input içinde yazdıklarımız ile anlık olarak html'yi güncellemek

Üçü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.

angular input text ngModel

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.

Angular Elden Gidiyeah

14.04.2020 02:15

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
Angular'da input içinde yazdıklarımız ile anlık olarak html'yi güncellemek

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.