How to use Structural Directive on Transclusion in Angular6?

Question

I am have a common modal which body/content will differ

HTML

<common-modal [data]='serverData'>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">IP Address</th>
        <th scope="col">Count</th>
        <th scope="col">Keyword</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let d of serverData'>
        <td>{{d.ip}}</td>
        <td>{{d.count}}</td>
        <td>{{d.keyword}}</td>
      </tr>
    </tbody>
    <tbody *ngIf='serverData?.length==0'>
      <tr>
        <td colspan='3'>
         no data to display
        </td>
      </tr>
    </tbody>
  </table>
</common-modal>

TS

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'common-modal',
  templateUrl: './common-modal.component.html',
  styleUrls: ['./common-modal.component.css']
})
export class CommonModalComponent implements OnInit {
  @Input()
  serverData= []
  constructor() { }

  ngOnInit() {
  }

}

but when i try to open the modal, the structural directive is not working. How can i use the *ngIf & *ngFor inside content projection