Passing a component as an 'argument' to another component in Angular 2
<p>I am new to web development and I have just started building an Angular 2 app. At this point I am trying to create some CRUD components/forms but I find my self duplicating a lot of code. I am not going to ask what are the common best practices to avoid code duplication and achieve component reusability when designing CRUD applications with Angular2, because the post will get locked. I will rather focus on one particular aspect:</p>

<p>I have a "CRUD page" that has a list (it is an html table actually) of resources and several buttons that open up "create", "read", and "edit" forms. The list is a separate component on its own and the create/read/edit separate components as well. Each row of the table includes another component which knows how to render a resource item. I will call this <code>&lt;resource-item&gt;</code> component. However, I have several of those "CRUD pages", each page for a different resource. So what I want is to reuse the list component for all the resources. So the first thing to do is to add Inputs or Attributes to the list component in order to control its labels. So far so good. </p>

<p>But what about the <code>&lt;resource-item&gt;</code> component? Each resource of my application might have a completely different structure. As a result I will need different components for different resources, e.g.: <code>&lt;resource-a-item&gt;</code>, <code>&lt;resource-b-item&gt;</code>, etc. How can I specify which resource item component I want to use every time I create a list component?</p>

<p>Thank you for your time.</p>