Получите данные поля ввода, нажав кнопку, и получите значение в элементе p в angular7

Question

Я новичок в angular, и мой сэр дал мне упражнение по получению данных поля ввода в элементе p, нажав кнопку с использованием angular 7. Я делаю так много попыток, используя некоторые функции (onClick,onClickSubmit,myFunction), но я терпел неудачу во всех попытках. Я думаю, у меня проблема с привязкой данных / привязкой событий. Пожалуйста, помогите мне разобраться с этой проблемой.

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 =
    }
}

Answer 1

Попробуйте вот так:

Рабочая демонстрация

.html

<input type="text" [(ngModel)]="name" name="name">
<br>
<br>
<button (click)="show = true">Show</button>
<p *ngIf="show">{{name}}</p>

Answer 2

Просто поместите входное значение во временную переменную и скопируйте его на экран при нажатии.

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>