CODEWITHSUNDEEP
angulartypescript
sam sergiy klok
sam sergiy klok

Reputation: 628

Angular app stops changing text on button click after user input

I created basic angular app, which should modify text in textarea by button click. It does work. After I manually print some text, it stops reacting. No error shown. However in debug window, it show old variable text being modified. But it not displayed. How to fix it?

<div>
  <button id="button1" (click)="changeText1()">button 1</button>
  <button id="button2" (click)="changeText2()">button 2</button>
</div>
<div>
  <textarea id="txt1">{{txt1}}</textarea>
</div>


import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testText';
  txt1 = 
`text line 1
text line 2`;

  changeText1(){
    this.txt1 += ' 1';
  }
  changeText2(){
    this.txt1 += ' 2';
  }
}

I posted app here: https://github.com/sam-klok/testText/tree/master/src/app

Screen shot

Upvotes: 0

Views: 154

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

You have to use ngModel instead:

<textarea id="txt1" [(ngModel)]="txt1"></textarea>

Make sure your main module also imports CommonModule:

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

Upvotes: 1

Related Questions