Angular EventEmitter passing paramters to parent

Question

I am using Angular 9. On a login event I need to pass the credentials from the child (login component) to the parent (security component).

In the login component, when the form is submitted, an event is fired:

@Output() changed = new EventEmitter<string>();

    this.changed.emit('changed!!');

I would like to subscribe to that event in the parent security component. So I try the following:

this.subscription = this.loginComponent.getLoginDataChangeEmitter()
  .subscribe(
    item => console.log('subscribed', item)
  );

The problem is that that the console.log('subscribed', item) never gets called.

Question

How do I subscribe to the this.changed.emit('changed;!'); ?

More Info

I have the following:

security.component.html (which has a child login directive)

<p>Security Component</p>

<h2>{{response}}</h2>

<app-login></app-login>

security.component.html

import { Component, OnInit } from '@angular/core';
import { JwtClientService } from '../jwt-client.service';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { LoginComponent } from '../login/login.component';

@Component({
  selector: 'app-security',
  templateUrl: './security.component.html',
  styleUrls: ['./security.component.css']
})
export class SecurityComponent implements OnInit {

  loginData:any;

  response:any;
  subscription: any;

  constructor(private service: JwtClientService, private router: Router, private route: ActivatedRoute, private loginComponent: LoginComponent) { }

  ngOnInit(): void {
    console.log('SecurityComponent ngOnInit', this.loginData);

    console.log(this.route.snapshot.params);
    this.subscription = this.loginComponent.getLoginDataChangeEmitter()
      .subscribe(
        item => console.log('subscribed', item)
      );



    if (!this.loginData) {
      //this.router.navigate(['login', {}]);
    } else {
      this.getAccessToken(this.loginData);
    }
  }

  public getAccessToken(loginData) {
    let resp = this.service.generateToken(loginData);
    resp.subscribe(data => {
      let jsonData:string = JSON.parse(data.toString());
      const token = jsonData['jwt'];
      this.accessApi(token);
    });
  }

  public accessApi(token) {
    let resp = this.service.hello(token);
    resp.subscribe(data => {
      this.response = data;
    });
  }
}

login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  @Output() changed = new EventEmitter<string>();
  loginData: any = {};

  constructor(private router: Router) {
  }

  ngOnInit(): void {
    console.log('LoginComponent ngOnInit');
  }

  onSubmit(loginData: any) {
    this.loginData = loginData;
    console.log('Your order has been submitted', this.loginData);
    this.changed.emit('changed!!');
    //this.router.navigate(['auth']);    
  }

  getLoginDataChangeEmitter() {
    console.log('LoginComponent.getLoginData()');
    return this.changed;
  }

}

Answer 1

You need to use that output parameter in the parent:

security.component.html

<p>Security Component</p>

<h2>{{response}}</h2>

<app-login (changed)="handleChange($event)"></app-login>

security.component.ts

handleChange(val) {
 console.log(val);
}