title: Update view on ngOnChanges from @Input in Angular
body: <p>I have a @Input property in my child component of type Person and I'm passing the object from the parent component through an attribute</p>
  
  <p>Full working code is available in <a href="https://stackblitz.com/edit/angular-input-ng-onchange" rel="nofollow noreferrer">StackBlitz</a> </p>
  
  <p>I explored the following question I got the point that what they told in the answer but I tried the Object.assign and other things based on the answer but it fails to load the data in View.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/47696848/angular-ngonchanges-not-updating-value">Angular: ngOnChanges not updating value</a></li>
  </ul>
  
  <p>How can I pass the Object through @Input and how can I do some manipulation once the object reached to the child component and need to update in the view?</p>
  
  <p>Sample Code: </p>
  
  <p><strong>App Component</strong>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { Person } from './models/person'
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    person: Person = {
      firstName: 'Emma',
      lastName: 'Watson'
    };
  }
  </code></pre>
  
  <p><strong>App Component HTML</strong>:</p>
  
  <pre><code>&lt;user [user-profile]="person"&gt;&lt;/user&gt;
  </code></pre>
  
  <p><strong>User Component</strong>:</p>
  
  <pre><code>import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
  import { Person } from '../models/person';
  
  @Component({
    selector: 'user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
  })
  export class UserComponent implements OnInit, OnChanges {
  
    @Input('user-profile') profile: Person;
  
    person: Person;
  
    constructor() {}
  
    ngOnInit() { 
      this.person = {
        firstName: '',
        lastName: ''
      }
    }
  
    ngOnChanges(changes:SimpleChanges): void { 
      if(typeof this.profile !== 'undefined' 
        &amp;&amp; typeof this.profile.firstName !== 'undefined' 
        &amp;&amp; typeof this.profile.lastName !== 'undefined') {
          this.person.firstName = this.profile.firstName;
          this.person.lastName = this.profile.lastName;
      }
    }
  
  }
  </code></pre>
  
  <p><strong>User Component HTML</strong>:</p>
  
  <pre><code>Full Name: {{person.firstName}} {{person.lastName}}
  </code></pre>
  
  <p>I need to do some manipulation once I received the object from <code>@Input</code> and need to update it in the UI. I know the object is passing as reference but here I tried with <code>Object.assign</code> and I assigned the property with <code>undefined</code> and then the appropriate object nothing is working.</p>