title: How to Separate List Items into Components in Angular
body: <p>Suppose I am creating a typical to-do list that has a structure as following:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Item 1 - description for item 1&lt;/li&gt;
      &lt;li&gt;Item 2 - description for item 2&lt;/li&gt;
      &lt;!-- ... --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like the list and the items to be as reusable as possible, and so I can make them into separate components:</p>
  
  <h3>todo-list.component.*</h3>
  
  <pre><code>@Component({
      selector: "todo-list",
      templateUrl: "todo-list.component.html"
  })
  export class TodoListComponent { /* ... */ }
  </code></pre>
  
  
  
  <pre><code>&lt;ul&gt;
      &lt;li todo-list-item *ngFor="let item of items" [item]="item"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h3>todo-list-item.component.*</h3>
  
  <pre><code>@Component({
      selector: "li[todo-list-item]",
      templateUrl: "todo-list-item.component.html"
  })
  export class TodoListItemComponent { /* ... */ }
  </code></pre>
  
  
  
  <pre><code>{{ item.title }} - {{ item.description }}
  </code></pre>
  
  <hr>
  
  <p>So far everything will work as long as I stick with native HTML elements such as <code>ul</code> and <code>li</code>.</p>
  
  <p>However an issue arises when I try to use Angular components instead native elements such as <code>mat-list</code> and <code>mat-list-item</code>:</p>
  
  <h3>todo-list.component.*</h3>
  
  <pre><code>&lt;mat-list&gt;
      &lt;mat-list-item todo-list-item *ngFor="let item of items" [item]="item"&gt;&lt;/mat-list-item&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <h3>todo-list-item.component.*</h3>
  
  <pre><code>{{ item.title }} - {{ item.description }}
  </code></pre>
  
  <hr>
  
  <p>The snippets above <strong>do not</strong> work. <code>mat-list-item</code> does not accept <code>item</code> and also now there are two component definitions that matches <code>mat-list-item[todo-list-item]</code>.</p>
  
  <p>I can do it this way:</p>
  
  <h3>todo-list.component.*</h3>
  
  <pre><code>&lt;mat-list&gt;
      &lt;todo-list-item *ngFor="let item of items" [item]="item"&gt;&lt;/todo-list-item&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <h3>todo-list-item.component.*</h3>
  
  <pre><code>&lt;mat-list-item&gt;
      {{ item.title }} - {{ item.description }}
  &lt;/mat-list-item&gt;
  </code></pre>
  
  <hr>
  
  <p>However now the structure is not correct and it <strong>will not</strong> produce the correct styling:</p>
  
  <pre><code>&lt;mat-list&gt;
      &lt;todo-list-item&gt;
          &lt;mat-list-item&gt;Item 1 - description for item 1&lt;/mat-list-item&gt;
      &lt;/todo-list-item&gt;
      &lt;todo-list-item&gt;
          &lt;mat-list-item&gt;Item 2 - description for item 2&lt;/mat-list-item&gt;
      &lt;/todo-list-item&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <p><code>mat-list-item</code> should be directly under <code>mat-list</code>:</p>
  
  <pre><code>&lt;mat-list&gt;
      &lt;mat-list-item&gt;Item 1 - description for item 1&lt;/mat-list-item&gt;
      &lt;mat-list-item&gt;Item 2 - description for item 2&lt;/mat-list-item&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <hr>
  
  <p>I am aware that I can combine the two components into a single one, however each of the list items can be fairly complex (with buttons and additional logic) that I would like them to be in separate components. What is the usual approach to this problem? Many of the related questions (such as <a href="https://stackoverflow.com/questions/34480243">this</a> and <a href="https://stackoverflow.com/questions/34556277">this</a>) that I could find assume native elements are used, which is not the case here. Specifically, how do I create the following structure using two components that I can define myself?</p>
  
  <pre><code>&lt;todo-list&gt;
      &lt;mat-list&gt;
          &lt;mat-list-item&gt;Item 1 - description for item 1&lt;/mat-list-item&gt;
          &lt;mat-list-item&gt;Item 2 - description for item 2&lt;/mat-list-item&gt;
      &lt;/mat-list&gt;
  &lt;/todo-list&gt;
  </code></pre>