@Input and @Output not functioning properly in Angular 2

Question

I am new to Angular2 and I am learning the usage of @Input and @Output parameter but it doesn't seem to work for me. emp.table.ts is a parent component which displays my employee's table and emp.count.component.ts is a nested component where I have defined the radio button functionality.

Please find the code below:

emp.table.ts

import {Component} from '@angular/core';
@Component({
  selector: 'app-emp-table',
  templateUrl: './emp.table.html'
})
export class EmpTableComponent {
  selectedEmployeeRadioButton = 'All';


empcount: number;
  malecount: number;
  femalecount: number;
  employees: any[];

  constructor() {
  this.employees = [
  {code: 'emp101', name: 'Mark', gender: 'male', annualsal: 9550000, dob: '11/25/1989'},
  {code: 'emp102', name: 'Sam', gender: 'male', annualsal: 7500340, dob: '08/18/1995'},
  {code: 'emp103', name: 'Leslie', gender: 'female', annualsal: 245500, dob: '02/21/1988'},
  {code: 'emp104', name: 'Katlyn', gender: 'female', annualsal: 565500, dob: '04/15/1985'},
  {code: 'emp105', name: 'Nick', gender: 'male', annualsal: 245500, dob: '12/05/1982'},
  {code: 'emp106', name: 'Laura', gender: 'female', annualsal: 145500, dob: '05/08/1991'},
  {code: 'emp107', name: 'Marcella', gender: 'female', annualsal: 345600, dob: '07/26/1992'},
  {code: 'emp108', name: 'Tina', gender: 'female', annualsal: 4678990, dob: '01/28/1988'},
  {code: 'emp109', name: 'Scott', gender: 'male', annualsal: 5678900, dob: '09/18/1981'}
  ];

  this.empcount = this.getEmployeesCount();
  this.femalecount = this.getFemaleCount();
  this.malecount = this.getMaleCount();
  }

  getEmployeesCount(): number {
    return this.employees.length;
  }

  getMaleCount(): number {
  return this.employees.filter(e => e.gender === 'male').length;
  }

  getFemaleCount(): number {
  return this.employees.filter(e => e.gender === 'female').length;
  }

  getfullName() {
    return this.firstName + ' ' + this.lastName;
  }

  onEmployeeCountRadioButtonChange(selectedRadioButtonValue: string){
  this.selectedEmployeeRadioButton = selectedRadioButtonValue;
  }
}

emp.table.html

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body class="alignSection">
<app-emp-count [all]="empcount"
               [male]="malecount"
               [female]="femalecount"
               (countRadioButtonSelectedChange)="onEmployeeCountRadioButtonChange($event)">
</app-emp-count>
<table>
    <tr>
        <td>Code</td>
        <td>Name</td>
        <td>Annual Salary</td>
        <td>Gender</td>
        <td>Date of Birth</td>
    </tr>
    <ng-container *ngFor= "let emp of employees">
    <tr *ngIf="selectedEmployeeRadioButton=='All' || selectedEmployeeRadioButton==emp.gender"> 
        <td>{{ emp.code }}</td>
        <td>{{ emp.name }}</td>
        <td>{{ emp.annualsal|currency:'USD' }}</td>
        <td>{{ emp.gender }}</td>
        <td>{{ emp.dob }}</td>
    </tr>
    </ng-container>
</table>

</body>
</html>

emp.count.component.ts

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

@Component({
  selector: 'app-emp-count',
  templateUrl: './emp.count.component.html'
})
export class EmpCountComponent {

  selectedRadioButtonValue = 'All';

  @Output()
  countRadioButtonSelectedChange: EventEmitter<string> = new EventEmitter<string>();

//  @Input() means these parameters will receive values from its parent component
  @Input() all: number;

  @Input() male: number;

  @Input() female: number;

  onRadioButtonSelectionChange() {
    this.countRadioButtonSelectedChange.emit(this.selectedRadioButtonValue);
    console.log(this.selectedRadioButtonValue);
  }
}

emp.count.component.html

<span class="radioClass">Show: </span>
<input type="radio" name="options" value="All" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"/>
<span class="radioClass">{{"All(" + all + ")" }}</span>
<input type="radio" name="options" value="male" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"/>
<span class="radioClass">{{"Male(" + male + ")"}}</span>
<input type="radio" name="options" value="female" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"/>
<span class="radioClass">{{"Female(" + female + ")"}}</span>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';



import { AppComponent } from './app.component';
import {EmpTableComponent} from './emp.table';
import {EmpCountComponent} from './emp.count.component';

@NgModule({
  declarations: [
    AppComponent, EmpTableComponent, EmpCountComponent
  ],
  imports: [
    BrowserModule, FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent, EmpTableComponent, EmpCountComponent]
})
export class AppModule { }

I am getting the following output. I am trying to get the count of all employees, the count of male employees and the count of female employees from the parent component (emp.table.ts) and passing the values to its nested component (emp.count.component.ts) using @Input parameter but I am getting (undefined) as you can see in the output below. Moreover, if I select male then the table should display only male employees and if I select female then the table should display female employees. However, the table displays all employees every time.

what do you get if you change {{"All(" + all + ")" }} to All ( {{all}} )? — tlt
– tlt, Commented Apr 22, 2018 at 5:14
I was getting Undefined. However, I was making a mistake in app.module.ts file where I was supposed to bootstrap Appcomponent only. This resolved my issue!! — Ritesh Puri
– Ritesh Puri, Commented Apr 22, 2018 at 5:48

Sajeetharan · Accepted Answer · 2018-04-22 04:38:13Z

2

Do not pass function as a input parameter, replace with collection .

<app-emp-count [all]="getEmployeesCount()"
               [male]="getMaleCount()"
               [female]="getFemaleCount()"               (countRadioButtonSelectedChange)="onEmployeeCountRadioButtonChange($event)">

to

<app-emp-count [all]="employees"
               [male]="Males"
               [female]="Females"               (countRadioButtonSelectedChange)="onEmployeeCountRadioButtonChange($event)">

and assign the values to those variables in your parent component

I have made the changes on your code,

  empcount: number;
  malecount: number;
  femalecount: number;
  employees: any[];

  constructor() {
  this.employees = [
  {code: 'emp101', name: 'Mark', gender: 'male', annualsal: 9550000, dob: '11/25/1989'},
  {code: 'emp102', name: 'Sam', gender: 'male', annualsal: 7500340, dob: '08/18/1995'},
  {code: 'emp103', name: 'Leslie', gender: 'female', annualsal: 245500, dob: '02/21/1988'},
  {code: 'emp104', name: 'Katlyn', gender: 'female', annualsal: 565500, dob: '04/15/1985'},
  {code: 'emp105', name: 'Nick', gender: 'male', annualsal: 245500, dob: '12/05/1982'},
  {code: 'emp106', name: 'Laura', gender: 'female', annualsal: 145500, dob: '05/08/1991'},
  {code: 'emp107', name: 'Marcella', gender: 'female', annualsal: 345600, dob: '07/26/1992'},
  {code: 'emp108', name: 'Tina', gender: 'female', annualsal: 4678990, dob: '01/28/1988'},
  {code: 'emp109', name: 'Scott', gender: 'male', annualsal: 5678900, dob: '09/18/1981'}
  ];

  this.empcount = this.employees.length;
  this.getFemaleCount();
  this.getMaleCount();
  }

  getMaleCount(): number {
   this.femalecount = this.employees.filter(e => e.gender === 'male').length;
  }

  getFemaleCount(): number {
   this.malecount = this.femalecount this.employees.filter(e => e.gender === 'female').length;
  }

  getfullName() {
    return this.firstName + ' ' + this.lastName;
  }

  onEmployeeCountRadioButtonChange(selectedRadioButtonValue: string){
  this.selectedEmployeeRadioButton = selectedRadioButtonValue;
  }
}

edited Apr 22, 2018 at 4:38

answered Apr 22, 2018 at 3:33

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

5 Comments

Ritesh Puri Over a year ago

I did but I am still getting the same output.

Sajeetharan Over a year ago

did you call the function on ngOnit?

Ritesh Puri Over a year ago

I initialized them inside the constructor.

Ritesh Puri Over a year ago

I used the same code but it's still not working. If I try to display the values in html, then I do see the correct values in empcount, malecount and femalecount. I suspect if there is a different issue!

Ritesh Puri Over a year ago

The issue was in app.module.ts where I was suppose to bootstrap only AppComponent. Thanks a lot @Sajeetharan for helping me to figure this issue out!!

Collectives™ on Stack Overflow

@Input and @Output not functioning properly in Angular 2

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related