CODEWITHSUNDEEP
angularweb-applicationsfrontend
Rohan
Rohan

Reputation: 109

Need to display text when button clicked

I am working first angular js stuff dont know where I am making mistake but below is the code I am trying but not working.

I have tried to run the code it does render the html elements but doesn't do anthing.

<code>

<ul>
  <li *ngFor="let data of sampleData[0]"> {{ data.username }} </li>
</ul>

<input type="text" [(ngModel)]="textInput">
<button (click)="onClick(textInput)">Click me!</button>

<p>{{ displayValue }}</p>

</code>

Git url : https://github.com/Ramesh5688/angularTask

Upvotes: 0

Views: 1850

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222522

That's too simple, just bind the ngModel variable to wherever you want to show

<input type="text" [(ngModel)]="textInput">
<button (click)="displayValue=textInput">Click me!</button>
<p>{{ displayValue }}</p>

STACKBLITZ DEMO

Upvotes: 1

anr241193
anr241193

Reputation: 51

If you just want to display value which you are entering in your input field then you can directly bind that ngModel variable.

Template:

<ul>
  <li *ngFor="let data of sampleData[0]"> {{ data.username }} </li>
</ul>

<input type="text" [(ngModel)]="textInput">
<button>Click me!</button>

<p>{{textInput}}</p>

It will be good practice if you didn't use sampleData[0].Use sampleData as I had defined below. If you want to display value only on button click then you can check following code:

Template:

<ul>
  <li *ngFor="let data of sampleData"> {{ data.username }} </li>
</ul>

<input type="text" [(ngModel)]="textInput">
<button (click)="onClick()">Click me!</button>

<p>{{ displayValue }}</p>

Component:

export class AppComponent implements OnInit {
  sampleData:any;
  textInput = '';
  displayValue: string;

  constructor (private _jsonService: JsonServiceService) {}

  ngOnInit() {
    this._jsonService.getData().subscribe((data) => {
      this.sampleData = data;
    });
  }

  onClick() {
    this.displayValue = this.textInput;
  }
}

Upvotes: 1

Related Questions