CODEWITHSUNDEEP
htmlangulartypescript
KUROYUKI
KUROYUKI

Reputation: 123

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

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>

Upvotes: 1

Views: 3146

Answers (1)

Sebastian Oleński
Sebastian Oleński

Reputation: 538

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;

}

Upvotes: 2

Related Questions