angular using @output to sent data from child to parent component

Question

I have some data that I am passing from my child to parent component and I want it to check if its empty or it has some value inside automatically.

this is in my login.compunent.ts - child ts

@Output() update=new EventEmitter<string>();
userEmail = "[email protected]";
authUser(loginForm) {      
      this.update.emit(userEmail);
      this.router.navigate(['/home']);
  }

this is in my app.compunent.ts - parent ts

  emailData:string;

  onUpdate(userEmail:string){
    console.log("userEmail")
    if(userEmail !== ''){
      this.emailData = userEmail
      console.log(userEmail)
    }
  }

this is in my app.compunent.html - parernt html

{{emailData}}
<router-outlet (update)="onUpdate($event)"></router-outlet>

Sebastian Oleński · Accepted Answer · 2017-12-06 17:53:29Z

2

I'm not sure I understand you completely but if you want to pass data from your child to your parent "automatically" I believe you have to implement a two-way bindable property.

You do that like this

child.ts

export class SomeComponent  {
  ...
     @Input() something;
     // it's important to name it with the 'Change' suffix 
     @Output() somethingChange = new EventEmitter();
  ...

parent.html

<some-component [(something)] = "someFieldYouWantToTwoWayBindTo"></some-component>

now whenever you update something from your child the field someFieldYouWantToTwoWayBindTo will also be updated

Now if you want to check what's in something and only filter certain cases then implement a setter for someFieldYouWantToTwoWayBindTo

parent.ts

_someFieldYouWantToTwoWayBindTo
set someFieldYouWantToTwoWayBindTo(value) {
    if(value !== '')
      this._someFieldYouWantToTwoWayBindTo = value;

}

edited Dec 6, 2017 at 17:53

answered Dec 6, 2017 at 17:46

Sebastian Oleński

5384 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

angular using @output to sent data from child to parent component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related