Passing Data From Child Component Into Parent Component

Question

I have problems with my angular, here I have two components:

• MyApp (ParentComponent)
• LoginPage (ChildComponent)

I have a property UserNow in parts MyApp and I want to set the value of the property UserNow through the components LoginPage. How to do it?

I have tried (but did not give any influence)

Import {MyApp} from '../../app/app.component'; 

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    public app: any;

    login() {
        ...
        this.app = MyApp;
        this.app.userNow = MyValue;
        ...
    }
}

Solution 1

There are several ways to do it.

1) Using a service: A service generally has a single instance in the application and can be used to share data between the components easily. E.g. create a service userService and inject it in components where ever you want to use it.

2) using Emit: Emit is used to emit an event in the application and corresponding action can be taken.

this.eventInChild.emit(data);

Two actions can be taken on event emission.

• calling a function of parent :

<child-component (eventInChild)="parentFunction($event)"></child-component>

• Emitting from service and Subscribing to an event(can be subscribed in service as well as components) :

In Service It goes like this:

getEmitStatus() {
    return this.eventInService;
}

//In component or service - to listen to event

this.subscription = this.userService.getEmitStatus()
    .subscribe(item => {
         //thing to do here
}); 

Solution 2

Like @SaUrAbHMaUrYa explained, you can emit data from child to parent, I would do something like this :

Parent

<page-login (on_user_has_logged_in)="userNow = $event"></page-login>

Child :

import {Output}       from '@angular/core'
import {EventEmitter} from '@angular/core'

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    @Output() on_user_has_logged_in : EventEmitter<any> = new EventEmitter()

    login(MyValue) {
        this.on_user_has_logged_in.emit(MyValue)
    }
}

Comments

[Kunal Kakkad]

I think the code should be: this.on_user_has_logged_in.emit(MyValue) instead of this.on_user_has_logged_in(MyValue). Correct me if I am wrong.

[Hadrien TOMA]

You are totally right @KunalKakkad, thank you for noticing it!