How send variable to parent component

Question

I have a problem with my angular 4 project. In fact I want to send a variable to my parent component. My main component have a variable user :

export class AppComponent {
  public user: User = null;
}

His HTML is :

{{user.name}}
<router-outlet></router-outlet>

Instead of router-outlet I have a children component that changes the value of user when I call login():

export class ChildrenComponent {
  login() {
    user.name = 'Toto';
  }
}

Now I would like to sent the value of user to parent component.

Event Emitters, services, a few different ways to do this: angular.io/guide/… — Dan Weber
– Dan Weber, Commented Oct 12, 2017 at 12:39
Event emitter might not work when dealing with router outlets, you have now way of making the specific binding. — Meir
– Meir, Commented Oct 12, 2017 at 12:43

Meir · Accepted Answer · 2017-10-12 12:41:53Z

3

You can use angular's dependency injection.

@Component() {
  ....
}
export class Parent {
  public user: User;
  ....
}

@Component() {
 ....
}
export class Child {
  constructor(public parent: Parent) {
  }

  someAction() {
    this.parent.user = user;
  }
}

Parent and Child are symbolic names, you should substitute to your components names (for example, MainContainer and LoginComponent). Also, you might want to consider making the parent optional so your component will not fail if you use it somewhere else.

Note that this works in normal nesting, you have to check it works with outlets.

You might also want to consider making the parent member an input so it will trigger rendering on value change.

answered Oct 12, 2017 at 12:41

Meir

14.4k4 gold badges44 silver badges49 bronze badges

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

Comments

Roman Skydan · Accepted Answer · 2017-10-12 12:46:49Z

1

You need to use EventEmmiter for emitting your parent component that user changed and you can send your data in your event for example.

Your parent component template:

<your-child-component (selectedUser)="selectUser($event)"></your-child-component>

Your ParentComponent:

export class ParentComponent {
  user: any;

  selectUser(user) {
    this.user= user;
  }
}

Your ChildComponent:

export class ChildComponent{
  user: any;

  @Output() selectUser = new EventEmitter<any>();

  onSelectUser(user: any) {
    this.selectUser.emit(user);
  }
}

You can find good example there

answered Oct 12, 2017 at 12:46

Roman Skydan

5,7664 gold badges22 silver badges40 bronze badges

Comments

Vivien Touly · Accepted Answer · 2017-10-12 12:52:19Z

0

Thank you Meir your solution is good ! For the others it's a good solution but with router-outlet I can't use EventEmitter to send my variable

answered Oct 12, 2017 at 12:52

Vivien Touly

792 silver badges12 bronze badges

1 Comment

Meir Over a year ago

Btw, the service solution is probably a good way as well. The parent/child works but it is good for things such as tabs, when it comes to user, an application wide value, a service sounds better

Collectives™ on Stack Overflow

How send variable to parent component

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related