title: What's an angular lifecycle-hook need when changing sets in componentInstance property by service?
body: <p>I have a component that i send to MdDialog(Angular Material Dialog in my custom service.ts)</p>
  
  <pre><code>dialogRef = this.dialog.open(component, config);
  </code></pre>
  
  <p>And when I change a public property of this component by componentInstance like that:</p>
  
  <pre><code>dialogRef.componentInstance.task = task;
  </code></pre>
  
  <p>Angular shows me an error: </p>
  
  <blockquote>
    <p>Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'dialog'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?</p>
  </blockquote>
  
  <p>Full code of open-modal.service.ts</p>
  
  <pre><code>@Injectable()
  export class TasksPopupService {
  
  constructor(
    private dialog: MdDialog,
    private router: Router,
    private tasksService: TasksService
  ) { }
  
  public open(component: any, id?: string) {
  
  if (id) {
    this.tasksService.find(id)
      .subscribe(task =&gt; {
        this.bindDialog(component, task);
      });
  } else {
    this.bindDialog(component, new Task());  
    }
  }
  
  bindDialog(component, task: Task) {
    let dialogRef;
    let config = new MdDialogConfig();
    config.height = '80%';
    config.width = '70%';
    dialogRef = this.dialog.open(component, config);
    dialogRef.componentInstance.task = task;
    dialogRef.afterClosed().subscribe(res =&gt; {
      this.router.navigate([{ outlets: { popup: null } }], { replaceUrl: true });
    });
    return dialogRef;
    }
  }
  </code></pre>
  
  <p>But an error occured only if id is undefined (in ELSE block) I think it's because of <strong>this.tasksService.find return Observable (async)</strong>, and block ELSE is not async. But I'm not sure.</p>