title: How to make two-way data binding by click?
body: <p>I have two input elements in one component and two paragraph elements in the other. When I typing a value in the Input, I immediately get it in the paragraph element because I use two-way data binding. But how can I make relation between two elements on click? I need the data from the input elements to be transferred to the paragraph elements <strong>only after clicking on the button</strong>.</p>
  
  <p>My code:</p>
  
  <p><strong>Main HTML</strong></p>
  
  <pre><code>        &lt;div&gt;&lt;input type="text" [(ngModel)]="names" /&gt;&lt;/div&gt;
   &lt;br/&gt;
      &lt;div&gt;  &lt;input type="text" [(ngModel)]="age" /&gt;&lt;/div&gt;
  
      &lt;app-child [userName]="names" [userAge]="age"&gt;&lt;/app-child&gt;
  
      &lt;button (click)=???&gt;Click&lt;/button&gt;
  </code></pre>
  
  <p><strong>Child HTML</strong></p>
  
  <pre><code>&lt;p&gt;UserName: {{userName}}&lt;/p&gt;
  &lt;p&gt;Age: {{userAge}}&lt;/p&gt;
  </code></pre>
  
  <p><strong>Main TS</strong></p>
  
  <pre><code>  names:string;
      age:number;
  </code></pre>
  
  <p><strong>Child TS</strong></p>
  
  <pre><code>  @Input() userName: string;
    @Input() userAge: number;
  </code></pre>
  
  <p>I will be grateful for any help! Thanks!</p>