How to pass data from child component to parent component when button clicked on parent component

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.

childComp template

<input 
  type="password" 
  [(ngModel)]="userPasswordForm.inputId"
  class="mr-password-field k-textbox" 
  />

childComp TS file

export class PasswordInputComponent{

    constructor() { }
  
    @Output() inputValue = new EventEmitter<string>();
    userPasswordForm:any={'input':''};

  emitValue(value: string) {
    this.inputValue.emit(value);
  }
}

Parent Component Template

<child-component (inputValue)="" > </child-component>
<button (click)="getValueFromChild()"> </button>

Parent Component TS file

tempUserFormPasswords:any=[];
.
.
.
getValueFromChild(receivedVal){
    this.tempUserFormPasswords.push(receivedVal);
}

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!

95 thoughts on “How to pass data from child component to parent component when button clicked on parent component”

  1. Pingback: keto food list
  2. I will immediately snatch your rss as I can’t find your e-mail subscription hyperlink
    or e-newsletter service. Do you’ve any? Please allow me understand
    in order that I could subscribe. Thanks.

    Reply
  3. Hi, I think your blog might be having browser compatibility issues.
    When I look at your blog site in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, amazing blog!

    Reply
  4. Heya are using WordPress for your blog platform?

    I’m new to the blog world but I’m trying to get started and set up
    my own. Do you need any html coding knowledge to make your own blog?
    Any help would be really appreciated!

    Reply
  5. You’re so awesome! I don’t believe I’ve read something like this
    before. So nice to find somebody with a few genuine thoughts on this topic.
    Seriously.. thanks for starting this up. This site is one thing that is required
    on the web, someone with a bit of originality!

    Reply
  6. Howdy I am so grateful I found your site, I really found you by mistake,
    while I was browsing on Bing for something else, Regardless
    I am here now and would just like to say kudos for a incredible post and a
    all round thrilling blog (I also love the theme/design), I don’t have
    time to read through it all at the moment but I have book-marked it and also added in your RSS feeds,
    so when I have time I will be back to read much more, Please do keep up the fantastic job.
    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

    Reply
  7. Pingback: aralen for lupus
  8. Pingback: baricitinib
  9. Pingback: tizanidine
  10. Pingback: tizanidine 2mg
  11. Pingback: lumigan eyelash
  12. Pingback: nolvadex pills

Leave a Comment