title: Angular4 CanDeactivateGuard on Child Component
body: <p>I want to warn the user when s/he navigates from a page and has some unsaved changes. I did it in <code>angular 1</code> with plugin <code>ng-unsaved changes</code>. But in <code>angular 4</code> , after searching all pages recommend to use <code>canDeactivate</code>. It works fine for simple form. But I have a form that has a child component. Like route navigate to a page which has Customers list and a button to add new customer. New customer is a separate component and I have added it as a child component on customer list.
  Like this:</p>
  
  <pre><code>&lt;!--   *** Section:CreateClient  ***  --&gt;
  &lt;div class="row" *ngIf="pageAction=='clientDetail'"&gt;
      &lt;div class="col-md-12"&gt;                    
          &lt;app-client-create class="card-header-up" [clientId]="selectedClient.EntityId" (createClientResponse)='createClientCallBack($event)' [calledBy]="prmInCalledBy" [pageMode]="pageMode"&gt;&lt;/app-client-create&gt;            
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now if user has do some changes on this child component, <code>CanDeactiavte</code> on parent component does not fire. 
  How can we access FormGroup.Dirty property of child component when user navigate 
  from page.
  How can we fire <code>CanDeactivate</code> on child component?
  Please help with code /plunker example.</p>