title: Try to build own Angular table components but false HTML structure
body: <p>I try to write my own Angular table components (table-container, table-row and table-item)</p>
  
  <p>This should look like this</p>
  
  <pre><code>&lt;app-table-container&gt;
    &lt;app-table-row&gt;
      &lt;app-table-item&gt;&lt;/app-table-item&gt;
      &lt;app-table-item&gt;&lt;/app-table-item&gt;
      &lt;app-table-item&gt;&lt;/app-table-item&gt;
    &lt;/app-table-row&gt;
  &lt;/app-table-container&gt;
  </code></pre>
  
  <p>table-container.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-table-container',
    templateUrl: './table-container.component.html',
    styleUrls: ['./table-container.component.scss']
  })
  export class TableContainerComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>table-container.component.html</p>
  
  <pre><code>&lt;table border="1"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header 1&lt;/th&gt;
      &lt;th&gt;Header 2&lt;/th&gt;
      &lt;th&gt;Header 3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>table-row.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-table-row',
    templateUrl: './table-row.component.html',
    styleUrls: ['./table-row.component.scss']
  })
  export class TableRowComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>table-row.component.html</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;Cell 1.1&lt;/td&gt;
    &lt;td&gt;Cell 1.2&lt;/td&gt;
    &lt;td&gt;Cell 1.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Cell 2.1&lt;/td&gt;
    &lt;td&gt;Cell 2.2&lt;/td&gt;
    &lt;td&gt;Cell 2.3&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>and the app.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
  
    title = 'testing-project';
    public tableListObjects: any[] = [
      {
        name: {
          forename: 'Jens',
          surname: 'Vial'
        },
        age: 32,
        job: 'Software Engineer',
        vacation: false
      },
      {
        name: {
          forename: 'Hans',
          surname: 'Peter'
        },
        age: 22,
        job: 'Electrican',
        vacation: true
      }];
  
    ngOnInit(): void {
    }
  }
  </code></pre>
  
  <p>and the app.component.html</p>
  
  <pre><code>&lt;app-table-container&gt;
    &lt;app-table-row&gt;&lt;/app-table-row&gt;
  &lt;/app-table-container&gt;
  </code></pre>
  
  <p>for now, without the app-table-item component because the problem is in the app-table-row-component.
  The problem is, that the table-structure is false.
  I expect a table with 3 columns header 1 - 3 and two rows with cell 1.1 - 1.3 and 2.1 - 2.3
  Instead the cells 1.1 - 1.3 and 2.1 - 2.3 are in the first column from header 1 see the image.</p>
  
  <p><a href="https://i.stack.imgur.com/kLp1v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kLp1v.png" alt="enter image description here"></a></p>
  
  <p>I have absolutely no idea why this happens. Can anyone tell me, at which point I make a mistake?</p>
  
  <p>The DOM looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/0fXgE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0fXgE.png" alt="enter image description here"></a></p>