Angular 7 Dynamic Content Projection

I need to be able to tell an angular component to render another angular component based on dynamic data. I think this needs content projection, but I can only make content projection work in simple cases.

Example scenario

I have the following table data in vanilla TypeScript:

const headings = [
  { id: 'cat', label: 'Cat' },
  { id: 'nameIt', label: 'Type the name' }
]

const data = [
  { cat: 'Tabby', nameIt: (name) => updateTabbysName(name) },
  { cat: 'Ginger', nameIt: (name) => updateGingersName(name) },
]

I also have four Angular components:

• simple-span which renders text in a span. In this case, it will render the cat field.
• text-input which renders a text input. In this case, it will render a basic HTML input which will call the nameIt callback when the user inputs text.
• my-special-cat-table which will provide the headings and data variables and is allowed to know about text-input and simple-span
• generic-table which is responsible for rendering table DOM elements. It is not allowed to know that text-input or simple-span exist.

The aim is to have generic-table completely blind to the cell render components

Is it possible to achieve this in Angular 7?

from Angular 7 Dynamic Content Projection

Angular 7 Dynamic Content Projection 2019-03-17T10:59:00-07:00 Rating: 4.5 Diposkan Oleh: Admin