Passing a component as an 'argument' to another component in Angular 2

Question

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:

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 <resource-item> 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.

But what about the <resource-item> 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.: <resource-a-item>, <resource-b-item>, etc. How can I specify which resource item component I want to use every time I create a list component?

Thank you for your time.

Answer 1

This seems to be a perfect fit for content transclusion.

Angular 2 comes with a component called ng-content that allows you to insert external html/components as the content of your component.

You just need to use in the place where you want the content to be displayed in your component.

For example:

import {Component} from 'angular2/core'

@Component({
  selector: 'holder',
  providers: [],
  template: `
    <div>
      <h2> Here's the content I got </h2>
      <ng-content></ng-content>
    </div>
  `,
  directives: []
})
export class Holder {
  constructor() {

  }
}

And you can specify the content you want injected from the component's parent this way:

import {Component} from 'angular2/core';
import {Holder} from './holder';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <holder>
        <div>yeey transcluded content {{name}}</div>
      </holder>
    </div>
  `,
  directives: [Holder]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

You can see working example here.

In your case you can make the list row/item a component that can accept some content to display.