title: How to pass data from child component to parent component when button clicked on parent component
body: <p>I need to pass input's value from child component to parent component when user click on a submit button that exists in parent component.</p>
  <p><strong>childComp template</strong></p>
  <pre><code>&lt;input 
    type=&quot;password&quot; 
    [(ngModel)]=&quot;userPasswordForm.inputId&quot;
    class=&quot;mr-password-field k-textbox&quot; 
    /&gt;
  </code></pre>
  <p><strong>childComp TS file</strong></p>
  <pre><code>export class PasswordInputComponent{
  
      constructor() { }
    
      @Output() inputValue = new EventEmitter&lt;string&gt;();
      userPasswordForm:any={'input':''};
  
    emitValue(value: string) {
      this.inputValue.emit(value);
    }
  }
  </code></pre>
  <p><strong>Parent Component Template</strong></p>
  <pre><code>&lt;child-component (inputValue)=&quot;&quot; &gt; &lt;/child-component&gt;
  &lt;button (click)=&quot;getValueFromChild()&quot;&gt; &lt;/button&gt;
  </code></pre>
  <p><strong>Parent Component TS file</strong></p>
  <pre><code>tempUserFormPasswords:any=[];
  .
  .
  .
  getValueFromChild(receivedVal){
      this.tempUserFormPasswords.push(receivedVal);
  }
  </code></pre>
  <p>It would easy to dio it if the button exists inside the child component. but in this case the value should be passed when the button in the parent component is clicked!</p>