Pass in array of components as inputs Angular 12

Question

I'm creating a window like component in Angular. On the top right of the component it can have set of buttons that do different things (like opening a modal, deleting something etc). See the image below for reference:

Now, we're using this type of layout in a lot of places within the application but with different set of buttons for the top right section. Now, in react doing this is pretty straightforward, I can simply pass any number of instanciated components as props to this component and display them.

What is the ideal way to do something like this in Angular?

Jayme · Accepted Answer · 2021-10-11 10:47:07Z

1

A solution to this could be to pass the buttons into a display component. you can pass the buttons in using Content projection.

ng-content is a good example of this but could require you to have the buttons in the layout, for each view you are on, in order to pass them in.

Another solution would be to have all the buttons already exist inside the component and then only display the ones you need based on a input parameter.

You can also look into dynamic components which should allow you to switch out the components when needed.

answered Oct 11, 2021 at 10:47

Jayme

1,9961 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amol Borkar Over a year ago

Thanks, I was also looking into content projection. I'm already using ng-content to display some html/angular template code inside the window area.

Jayme Over a year ago

Generally for the use cases I have experienced, that method is the simplest. Reusability of each button also plays a part.

Collectives™ on Stack Overflow

Pass in array of components as inputs Angular 12

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related