CODEWITHSUNDEEP
angulartypescriptdecorator
Passionate Coder
Passionate Coder

Reputation: 7294

Getting confused in @output decorator behaviour

I am going through input output decorator and tried to implement in below example for demo purpose, to understand the importance of these decorators:

home.component.html

<app-login>
  <app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox>
</app-login>

login.comp.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{
  public checkBoxValueChanged(event){
    alert("called from here "+event)
  }
}

login.comp.html

<form>
    <input type="text" placeholder="email"/>
    <input type="password" placeholder="password"/>
    <ng-content></ng-content>
    <input type="button" value="login"/>
</form>

checkbox.comp.ts

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

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent{
  @Output() checkBoxValue : EventEmitter<any> = new EventEmitter();
  valueChanged(value){
    this.checkBoxValue.emit(value)
  }
}

checkbox.comp.html

<input type="checkbox" value="Y" (change)="valueChanged($event.target.value)"/> Remember Me

As per my understanding checkBoxValueChanged should be in login component as checkbox component is called inside login component but this is not working. I am getting error of ERROR TypeError: _co.checkBoxValueChanged is not a function if i write checkBoxValueChanged inside login component. But when i write this function inside home component everything works fine but i am confused why its not working when it is in login component.

Upvotes: 1

Views: 164

Answers (1)

Zee
Zee

Reputation: 483

You should have checkBoxValueChanged function in home.component.ts component as you are using app-checkbox component in home.component.ts, simply move checkBoxValueChanged function to home.component.ts from login.comp.ts and you will receive the emitted value, rest is perfect!!

or if you want emitted value in login.comp.ts, don't follow above point rather move your <app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox> tag to login.comp.html...

Hope it helps you!! :)

Consider upvoting please if it helped!

Upvotes: 3

Related Questions