title: Modify a property of another component if a property changes value?
body: <p>I have an Angular project that contains three components - an item, a location, and a parent that uses both of them. They are defined as follows:</p>
  
  <p><strong>item.ts:</strong></p>
  
  <pre><code>export class Item {
    hours: number;
  }
  </code></pre>
  
  <p><strong>item.component.ts:</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { Item } from './item';
  
  @Component({
    selector: 'app-item',
    template: `&lt;div&gt;Hours: {{ model.hours }}&lt;/div&gt;`
  })
  export class ItemComponent {
    @Input('item') model: Item;
  }
  </code></pre>
  
  <p><strong>location.ts:</strong></p>
  
  <pre><code>export class Location {
    local: boolean;
  }
  </code></pre>
  
  <p><strong>location.component.ts:</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { Location } from './location';
  
  @Component({
    selector: 'app-location',
    template: `&lt;div&gt;&lt;input type="checkbox" [(ngModel)]="model.local"&gt;&lt;/div&gt;`
  })
  export class ItemComponent {
    @Input('location') model: Location;
  }
  </code></pre>
  
  <p><strong>parent.component.ts:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Item } from './item';
  import { Location } from './location';
  
  @Component({
    selector: 'app-parent',
    template: `
      &lt;app-item [item]="item"&gt;&lt;/app-item&gt;
      &lt;app-location [location]="location"&gt;&lt;/app-location&gt;
    `
  })
  export class ParentComponent {
    item: Item = new Item();
    location: Location = new Location();
  
    // ???
  }
  </code></pre>
  
  <p>The <code>???</code> comment is where the problem lies. When the <code>local</code> property of the <code>Location</code> is set to <code>true</code>, I want to explicitly set the <code>hours</code> property of the <code>Item</code> to 8.</p>
  
  <p>I have looked through the Angular docs and a number of examples but haven't been able to figure out how to change a property in one component when a property in another changes.</p>
  
  <p>What are my options?</p>