Angular 4 Communication between the components not working

Question

i am unable to communicate between the two components:

I have 2 components one for saving the username and email (please see screenshot) and another one to show the added users.

First component:

Adduser:

@Component({
  selector: 'app-adduser',
  templateUrl: './adduser.component.html',
  styleUrls: ['./adduser.component.css']
})




export class AdduserComponent implements OnInit {
  @Output('users') users = new EventEmitter<any[]>();
  listOfUsers: Array<{username:string,email:string}>=[];
 username:string="";
 email:string="";
  constructor() { }

  ngOnInit() {
  }

  addedUser(event:Event){
    console.log('emitUser event is called');
    this.users.emit(this.listOfUsers);
  }

  addUser(){
  this.listOfUsers.push( {username:this.username,email:this.email});
  }

  processUser(){

  }
}

HTML code for first component:

 <div class="form-group">
    <label for="formGroupExampleInput">Username</label>
    <input type="text" class="form-control" [(ngModel)]="username">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Email</label>
    <input type="text" class="form-control" [(ngModel)]="email">
  </div>
<button type="button" class="btn btn-primary" [disabled]="username=== '' || email ===''" (click)="addUser()">AddUser</button> 
<div class="divider"></div>

2nd component-> processuser

ts file

import { Component, OnInit, Input } from '@angular/core';

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

  @Input()users:Array<{username:string,email:string}>=[];
  constructor() { }

  ngOnInit() {
  }

}

html code for 2nd component :

<button type="button" class="btn btn-primary" [disabled]="username=== '' || email ===''" (click)="processUser()">ShowUsers</button>
<div class="alert alert-info" role="alert" *ngFor="let user of users ">
  <strong>user.username </strong> <strong>user.email </strong> has been processed.
</div>

And the main app component where i am using both of them :

<div class="container">
  <app-adduser (users)="addedUser($event)"></app-adduser>
  <app-processuser [users]=""></app-processuser>
</div>

My problems/Doubts:

1. First component Adduser is adding the formdata to array but how will it be emitted ? Debug point is not hitting the emit code.

2. Can i directly pass the data from first component to second one in app.component.html file ? or do i need to process it first in app.component.ts file ?

Please note i am new to Angular.

Any advice would be helpful.

Answer 1

Angular has top to bottom data flow approach. It means that the child gets from parent via input and if the child has to tell something to the parent , then it has to emit what it want to tell explicitly

<parent-component>
  <child-component (tellParent)="tellParent($event)" [giveToChild]="giveToChild"> 
  </child-component>
</parent-component>

parent.component.ts : Parent Gives to child toffee via input or square brackets[ ]

import { Component, OnInit } from '@angular/core';

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

  giveToChild:string = 'Toffee';

  constructor() { }

  ngOnInit() {
  }

  tellParent(childResponse){
     console.log(childResponse) // "Thanks dada and mama"
  }

}

child.component.ts

import { Component, OnInit,Input } from '@angular/core';

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

  @Input() giveToChild:string
  @Output() tellParent = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {

  }
  tellParentFunc(){
    this.tellParent.emit("Thanks dada and mama")
  }

Answer 2

Main template:

<parent>
   <child (messageToParent) ="receiveMessageFromChild($event)"></child>
</parent>

Child component:

@Output() messageToParent : EventEmitter<any> = new EventEmitter();

sendMessageToParent() 
{ 
   this.messageToParent.emit("message from child"); 
}

Parent component:

receiveMessageFromChild(message) 
{
   console.log(message); // Console reads : "message from child"
}