Passing and displaying components angular 5

Question

I have a scenario where I need to pass a list of different "components" to another angular component. I'm passing the list of components as an array using the @Input. How can I render those components in the HTML?

Answer 1

It would be helpful to see some code to have an idea about what you're trying to accomplish.

From the documentation, @Input()

• An Input property is a settable property annotated with an @Input decorator. Values flow into the property when it is data bound with a property binding

An @Input() annotation is used for passing data. It's not used for passing components to another component.

To display another component inside another component, reference the nested component's selector inside the parent component. The selector is part of component metadata

• selector : A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains , then Angular inserts an instance of the HeroListComponent view between those tags.

app-hero-list.component.ts

Create a component and give a selector in the metadata.

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

app.component.html

Then you can reference that selector as a pair of HTML tags in another component's template.

<app-hero-list></app-hero-list>

Have a look at the component metadata link referenced above and the Angular Tutorial for some more information about displaying components in other components.

If you need a more detailed answer, please update your question with a code example.