title: Creating a custom component inside a table without directive selector
body: <p>I made a custom row component with some <code>&lt;td&gt;</code>'s inside. It worked with the directive selector but i activated tslint in my project and it throws error that i can't use directive selector in a component.</p>
  
  <p>I don't want to disable this so im trying to change it to a component selector. But the table layout breaks when it is used a component selector.</p>
  
  <p>Is there a solution for this problem or do i have to disable the check?</p>
  
  <p>I tried using <code>&lt;ng-container&gt;</code> but its not what i need (i think)</p>
  
  <p>the custom component:</p>
  
  <pre><code>&lt;td&gt;{{getProductName(neighbour)}}&lt;/td&gt;
  &lt;td&gt;{{getVersion(neighbour)}}&lt;/td&gt;
  &lt;td&gt;{{getProjectName()}}&lt;/td&gt;
  &lt;td&gt;{{neighbour.ip}}&lt;/td&gt;
  &lt;td&gt;{{neighbour.mac}}&lt;/td&gt;
  &lt;td&gt;{{mapHardwareType(neighbour)}}&lt;/td&gt;
  &lt;td&gt;
      &lt;button [disabled]="!reachable" class="btn btn-sm btn-primary" (click)="open()"&gt;
          &lt;i class="fa fa-external-link"&gt;&lt;/i&gt; &lt;span [translate]="'OPEN'"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>table:</p>
  
  <pre><code>&lt;table class="table table-default table-responsive"&gt;
        &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th [translate]="'PRODUCT'"&gt;&lt;/th&gt;
                  &lt;th [translate]="'VERSION_AND_DATE'"&gt;&lt;/th&gt;
                  &lt;th [translate]="'PROJECT_NAME'"&gt;&lt;/th&gt;
                  &lt;th [translate]="'IP'"&gt;&lt;/th&gt;
                  &lt;th [translate]="'MAC'"&gt;&lt;/th&gt;
                  &lt;th [translate]="'HARDWARE'"&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
              &lt;ng-container *ngFor="let n of neighbours|filter:{keys: searchKeys, str: search}"&gt;
                  &lt;tr&gt;
                      &lt;app-neighbour-row [neighbour]="n"&gt;&lt;/app-neighbour-row&gt;
                  &lt;/tr&gt;
              &lt;/ng-container&gt;
  
        &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>