title: How to show dirty notification on tab header
body: <p>I have a page containing 3 tab-pages.
  Each of this tabpages contains a list of items with CRUD possibilities.</p>
  
  <p>I would like to show a dirty notification inside the tabheader, when a user has changed any of the items inside the tabcontent.</p>
  
  <p>How can i do this?</p>
  
  <p>My tabpages are created as followed:</p>
  
  <pre><code>          &lt;mat-tab-group&gt;
          &lt;mat-tab label="Specialisaties"&gt;
            &lt;div class="tabContent"&gt;
              &lt;dko-bo-onderneming-detail-specialisaties [ondernemingId]="onderneming.id"&gt;&lt;/dko-bo-onderneming-detail-specialisaties&gt;
            &lt;/div&gt;
          &lt;/mat-tab&gt;
          &lt;mat-tab label="Contactpersonen"&gt;
            &lt;div class="tabContent"&gt;
              &lt;dko-bo-onderneming-detail-contactpersonen [ondernemingId]="onderneming.id"&gt;&lt;/dko-bo-onderneming-detail-contactpersonen&gt;
            &lt;/div&gt;
          &lt;/mat-tab&gt;
          &lt;mat-tab label="Referenties"&gt;
            &lt;div class="tabContent"&gt;
              &lt;dko-bo-onderneming-detail-referenties [ondernemingId]="onderneming.id"&gt;&lt;/dko-bo-onderneming-detail-referenties&gt;
            &lt;/div&gt;
          &lt;/mat-tab&gt;
        &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>For example, inside the dko-bo-onderneming-detail-referenties i monitor when the data changes:</p>
  
  <pre><code>addReferentie = function (referentiePersoon: ReferentiePersoon) {
      ...
      this.isDirtyReferentiePersonen = true;
  };
  deleteReferentie = function(referentiePersoon: ReferentiePersoon) {
      ...
      this.isDirtyReferentiePersonen = true;
  };
  </code></pre>
  
  <p>So when i change the isDirtyReferentiePersonen property, i would like to update the tab-header 'Referenties' to show an * when i set the property to true</p>
  
  <p>How can i do that?</p>