0

I am new in angular and my sir give me the exercise to get input field data in p element by clicking on a button using angular 7.I do so much attempts using some functions (onClick,onClickSubmit,myFunction) but i failed in every attempt.I think i got problem in data-binding / event-binding.Please help me to sort out this problem.

app.component.html :

<input type="text" [(ngModel)]="name" name="name">
<br><br>
<button (Click)="onClick">Show</button>
<p>{{name}}</p>

app.component.ts : 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'angular7-app';

    show(){
        this.show =
    }
}
MonkeyScript
  • 4,776
  • 1
  • 11
  • 28
Hammad Ur Rehman
  • 1
  • 1
  • 3
  • [Please don't post images of code or errors](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-on-so-when-asking-a-question). Also, since this is an exercise, you may want to read "[How do I ask and answer homework questions?](https://meta.stackoverflow.com/q/334822)". – Haem Nov 12 '19 at 10:33

2 Answers2

1

Try like this:

Working Demo

.html

<input type="text" [(ngModel)]="name" name="name">
<br>
<br>
<button (click)="show = true">Show</button>
<p *ngIf="show">{{name}}</p>
Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
  • in this example data is remove then i press backspace, i think its two way data binding. After clicking on submit button data is entered and remove both sides. – Hammad Ur Rehman Nov 12 '19 at 11:38
0

Just get the input value into a temporary variable and copy it into display on click.

app.component.ts :

tempName : string = '';  // Temp variable to hold input
origName : string = '';  // Name to be displayed

app.component.html :

<input type="text" [(ngModel)]="tempName" name="name">

<button (click)="origName=tempName">Show</button>

<p *ngIf="origName!=''">{{origName}}</p>
MonkeyScript
  • 4,776
  • 1
  • 11
  • 28