<p dir="auto">want to perform some operations when input parameters are being changed. Lets say I have a DatePicker component that has a type input variable, and I want to perform some actions with another date variable when type is being changed. How to do that?</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class DatePicker {

    @Input()
    date: Date;

    @Output()
    dateChange = new EventEmitter();

    @Input()
    set type(type: string) {
        if (type === &quot;today&quot;) {
            this.date = new Date();
            this.dateChange(this.date); // because of this change change detector will throw error
        }
    }

}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">DatePicker</span> <span class="pl-kos">{</span>

    @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-c1">date</span>: <span class="pl-smi">Date</span><span class="pl-kos">;</span>

    @<span class="pl-smi">Output</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-c1">dateChange</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">EventEmitter</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">set</span> <span class="pl-en">type</span><span class="pl-kos">(</span><span class="pl-s1">type</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">type</span> <span class="pl-c1">===</span> <span class="pl-s">"today"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">date</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Date</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">dateChange</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">date</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// because of this change change detector will throw error</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

<span class="pl-kos">}</span></pre></div>
<p dir="auto">p.s. I asked this question on <a href="http://stackoverflow.com/questions/38036548/angular-2-change-neighbor-input-variable-on-input-variable-change" rel="nofollow">SO</a> a week ago, and didn't get answer</p>
<p dir="auto">Its a common case task - to perform operations when input values are being changed - any kind of operations, no matter if you change other variables - change detector or something else should not complain. Also, since I opened this issue I want to mention that current component's lifecycle in angular seems doubtful:</p>
<p dir="auto">Inputs are coming before view and content init, and even ngOnInit, and if you are using setters on inputs to perform something that is depend of view components you can't do it on component initialization, but can do on next time inputs are changed. This creates a lot of monkey patches in the code, like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class DatePicker implements AfterViewInit {

    isViewInited = false;

    @Input()
    set data(data: string) {
        if (this.isViewInited)
           this.doSomethingViewRelated(data);
    }

   ngAfterViewInit() {
       this.isViewInited = true;
       this.doSomethingViewRelated(this.data);
   }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">DatePicker</span> <span class="pl-k">implements</span> <span class="pl-smi">AfterViewInit</span> <span class="pl-kos">{</span>

    <span class="pl-c1">isViewInited</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

    @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">set</span> <span class="pl-en">data</span><span class="pl-kos">(</span><span class="pl-s1">data</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isViewInited</span><span class="pl-kos">)</span>
           <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">doSomethingViewRelated</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

   <span class="pl-en">ngAfterViewInit</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
       <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isViewInited</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
       <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">doSomethingViewRelated</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Use loadChildren loaded module will repeat new dependencies module.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Not repeat new, use the singleton module.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">Define a child module, set more than one route, like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {
  Page1Component,
  Page2Component
} from './pages';

const appRoutes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page2', component: Page2Component },
];

export const routing: ModuleWithProviders = RouterModule.forChild(appRoutes);
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">ModuleWithProviders</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Routes</span><span class="pl-kos">,</span> <span class="pl-v">RouterModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/router'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span>
  <span class="pl-v">Page1Component</span><span class="pl-kos">,</span>
  <span class="pl-v">Page2Component</span>
<span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./pages'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">appRoutes</span>: <span class="pl-v">Routes</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">Page1Component</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'page2'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">Page2Component</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">routing</span>: <span class="pl-v">ModuleWithProviders</span> <span class="pl-c1">=</span> <span class="pl-v">RouterModule</span><span class="pl-kos">.</span><span class="pl-en">forChild</span><span class="pl-kos">(</span><span class="pl-s1">appRoutes</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In the parent routing config, dynamic load the child module, like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { SubModule } from 'modules/demo1';
const appRoutes: Routes = [{
  path: '', component: LayoutComponent,
  children: [
    { path: 'demo1', loadChildren: () =&gt; AppModule },
    { path: '**', component: NotFoundComponent }
  ]
}];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">SubModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'modules/demo1'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">appRoutes</span>: <span class="pl-v">Routes</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span>
  <span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">LayoutComponent</span><span class="pl-kos">,</span>
  <span class="pl-c1">children</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'demo1'</span><span class="pl-kos">,</span> <span class="pl-en">loadChildren</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-v">AppModule</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'**'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">NotFoundComponent</span> <span class="pl-kos">}</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">routing</span>: <span class="pl-v">ModuleWithProviders</span> <span class="pl-c1">=</span> <span class="pl-v">RouterModule</span><span class="pl-kos">.</span><span class="pl-en">forRoot</span><span class="pl-kos">(</span><span class="pl-s1">appRoutes</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">useHash</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">When visit <code class="notranslate">/demo1</code> and  <code class="notranslate">/demo1/page1</code>, the sub module's dependency module will also  init.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
When route change in dynamic loaded module.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
It is not important.</p>
<ul dir="auto">
<li><strong>Angular version:</strong><br>
2.4.1</li>
</ul>