ngOnChanges not getting Fired

Question

I am testing the ngOnChanges method in my running code. But it seems the ngOnchanges isnt getting called though it compiles . Below is my code.

create-employee.component.html:

<form #employeeForm="ngForm"  (ngSubmit)=saveEmployee(employeeForm)>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title"> Create Employee</h3>
    </div>
    <div class="panel-body">
      <div class="form-group" [class.has-error]="fullName.invalid && fullName.touched" [class.has-success]="fullName.valid">
        <label for="fullName"class="control-label">Full Name</label>
        <input required type ="text"  class= "form-control" 
          name="fullName1" 
          [(ngModel)]="employee.fullName"
          #fullName="ngModel" id="fullName">
        <span class="help-block" *ngIf="fullName.invalid && fullName.touched">
          Full Name is Required
        </span>
      </div>
    </div>
    <div class="panel-footer">
     <button  [disabled]="employeeForm.invalid" type ="submit" class= "btn btn-primary" > Save </button>
    </div>
  </div>
  {{employeeForm.value|json}}
  employee: {{employee| json}}
  employee.isActive: {{employee.isActive}}
</form>

create-employee.component.ts:

import { Component,OnChanges, OnInit ,SimpleChanges,Input} from '@angular/core';
import { NgForm } from '@angular/Forms';
import { Department } from '../models/department.model';
import { BsDatepickerModule,BsDatepickerConfig} from 'ngx-bootstrap/datepicker';
import { Employee } from '../models/employee.model';

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

  constructor() {}

  saveEmployee( employeeForm:NgForm): void {
    console.log(employeeForm);
    console.log("employee = " + JSON.stringify(this.employee));  
  }


  allMsgChangeLogs: string[] = [];
  allEmployeeChangeLogs: string[] = [];

  @Input() employee:Employee = { 
    id: null,
    fullName: 'Jay',
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("inside on changes"); 
    for (let propName in changes) {  

      let change = changes[propName];

      let curVal  = JSON.stringify(change.currentValue);
      let prevVal = JSON.stringify(change.previousValue);
      let changeLog = `${propName}: currentValue = ${curVal}, previousValue = ${prevVal}`;

      if (propName === 'employee') {
          this.allEmployeeChangeLogs.push(changeLog);
          console.log(changeLog);
      } else {
         console.log("change detecetd");
      }
    }
  }

The model object employee being used in the form is as : employee.model.ts:

export class Employee {
    id: number;
    fullName: string;
}

ngOnChanges method isnt getting fired at all. Any inputs?

Vadi · Answer 1 · 2019-01-29T10:15:40.733

0

@Input is for parent-child interactions between angular components. I don't see from your code, where you pass employee to CreateEmployeeComponent. So employee is always undefined, and ngOnChanges doesn't fire. More is here https://angular.io/guide/component-interaction.

edited Jan 29 '19 at 10:15

answered Jan 29 '19 at 09:49

Vadi

3,279
2
13
30

employee is just a model object that i have used to back the input fields in the form and it changes as i provide the input text, do i need to use it as component – jayendra bhatt Jan 29 '19 at 09:57
if you want to edit `employee` using form, you can use `angular reactive forms` and put your related to `ngOnChange` code to the function that fires on `submit form`, if I get your problem right. I guess your `ngOnChange` doesn't fire, because @Input is always `undefiend` (there is no value passed to your component). To pass `employee` to your current component using `@Input`, you need to use your `component as a child of another`, in which there is `employee`, and pass it through `parent component template`. – Vadi Jan 29 '19 at 10:12

ngOnChanges not getting Fired

1 Answers1