title: Angular Material matToolTip does not display when using ngFor function
body: <p>I have a set of data called reports which contain an array of networks (report.networks). I have model.ts to manipulate the networks array before i return it back. I do an ngFor to iterate over the network data to display the details which works fine. However, adding a matToolTips within the ngFor does not get displayed.</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;span matTooltip="Tooltip Works"&gt;Tooltip Works&lt;/span&gt;
  
  &lt;div *ngFor="let network of report.networks"&gt;
     &lt;span matTooltip="Tooltip Does NOT work!"&gt;Tooltip Does NOT work&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Report } from './../../core/models/report/report.model';
  
  @Component({
      selector: 'app-report-detail',
      templateUrl: './report-detail.component.html',
      styleUrls: ['./report-detail.component.scss']
  })
  export class ReportDetailComponent implements OnInit {
  
      report: Report;
  
      constructor(private route: ActivatedRoute) { }
  
      ngOnInit() {
  
          this.report = this.route.snapshot.data.report;
          console.log(this.report);
  
      }
  
  }
  </code></pre>
  
  <p><strong>report.model.ts</strong></p>
  
  <pre><code>export class Report {
  
      networks?: any = null;
  
      constructor(data?: Report) {
          if (data) {
              this.deserialize(data);
          }
      }
  
      private deserialize(data: Report) {
  
          const keys = Object.keys(this);
  
          for (const key of keys) {
              if (data.hasOwnProperty(key)) {
                  this[key] = data[key];
              }
          }
      }
  
      get networks() {
  
          let n = this.networks;
          //some manipulation
          return n
      }
  }
  </code></pre>