Angular 6 Capturing child component value in parent using @Output()

Question

In my child component, on click of a button a process fires and returns a boolean. I need to capture this boolean in my parent component and enable/disable a button. I have never used @Output() before. I have created a sample to show the issue. In the dev tools I get this error:

ERROR TypeError: _co.onclickValidateAndSave is not a function

child.component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
    //passing value to parent component thru event payload
    bSuccess: boolean = false;

    @Output()
    public clickValidateAndSave: EventEmitter<boolean> = new EventEmitter<boolean>();


  constructor() { }

  ngOnInit() {
  }
   public onclickValidateAndSave() {
       this.clickValidateAndSave.emit(this.bSuccess);
      //not being logged
       console.log(this.bSuccess);
   }

    toggleSuccess() {
        this.bSuccess = !this.bSuccess;
    }
}

Here is child.component.html:

<div>
    <div class="form-group">
        <button class="btn btn-default" 
                (click)="toggleSuccess()">
            Toggle Success
        </button>
    </div>
</div>

parent.component.ts:

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
    disableBtn: boolean = false;
  constructor() { }

  ngOnInit() {
  }
    handleClickOnChild(bSuccess) {
        this.disableBtn = !bSuccess
    }
}

and parent.component.html

<app-child (clickValidateAndSave)="handleClickOnChild($event)"></app-child>
<div class="row col-mg-6">
    <button type="submit" class="btn btn-primary" [disabled]="disableBtn" ngDefaultControl name="name">
        Submit for Approval
    </button>
</div>

try changing [(ngModel)]="clickValidateAndSave" to (clickValidateAndSave)="yourFunctionInParent()" — Amit Bhoyar
– Amit Bhoyar, Commented Feb 28, 2019 at 20:44
Amit, I made the suggested changes, there is no error, however, onclickValidateAndSave() never gets called and the button is always enabled — SilverFish
– SilverFish, Commented Feb 28, 2019 at 21:21

Kamil Kiełczewski · Accepted Answer · 2019-02-28 20:42:27Z

1

Try

<app-child (clickValidateAndSave)="handleClickOnChild($event)" ></app-child>
<div class="row col-mg-6">
    <button type="submit" class="btn btn-primary" [disabled]="disableBtn"
            [(ngModel)]="clickValidateAndSave">
        Submit for Approval {{clickValidateAndSave}}
    </button>
</div>

and in parent js

 disableBtn = false;
 ...

 handleClickOnChild(bSuccess) {
     this.disableBtn = !bSuccess
 }

I write code from head so it can have some bugs

answered Feb 28, 2019 at 20:42

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SilverFish Over a year ago

Where do we get value for bSuccess in parent js?

Nathan Beck Over a year ago

This is the right approach. The parent component must have a way of handling the child @Output() event.

Kamil Kiełczewski Over a year ago

@SilverFish the object/value send during event emit is set in parent teemplate in as $event - and template pass it to handler as first parameter.

SilverFish Over a year ago

now I get: ERROR Error: No value accessor for form control with unspecified name attribute

SilverFish Over a year ago

doesn't say line. It is coming from Vendor.js. This happens right when page loads/refreshes. Moreover, the button Submit for Approval is enabled at all time right when it loaded

|

Amir Arbabian · Accepted Answer · 2019-02-28 20:54:01Z

You mixed everything up a little bit, you need to use emit(value) method on @Output field in child component, and that value would be passed into the method in parent component with which you subscribed on particular Output of child. For example take a look on this example (look in "example" folder):

Here we trigger event in child component:

toggleSuccess() {
    this.clickValidateAndSave.emit(this.bSuccess = !this.bSuccess);
}

Here we subscribe on that event in parent component:

<app-child (clickValidateAndSave)="onClickValidateAndSave($event)"></app-child>

And here that method in parent with which we subscribed on child event:

onClickValidateAndSave(value: boolean) {
    this.buttonDisabled = value;
}

Pay attention that we can access Output event value via parameters. Hope that helps.

Collectives™ on Stack Overflow

Angular 6 Capturing child component value in parent using @Output()

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related