How to expose child component's @inputs and @outputs implicitly to grandparent in Angular?

Question

Overview:

Im just trying to understand the correct way to handle this scenario. Say I want to
create a custom version of a component (say a fruit select element) using an existing component (say mat-select). Now say the existing component exposes a bunch of @inputs and @outputs which my component doesn't "re-expose" to it's own consumers.

What if there were now apps that wanted to use my custom components but also wanted to use the "bottom" component's @inputs/@outputs ?

Here is an example of what Im trying to convey:

In this example say i've created FruitSelect component that is composed of a MatSelect + some custom behavior around it. But for this example I've intentionally not exposed the placeholder @Input exposed by MatSelect.

How does an app that wants to use FruitSelect in their view get to specify a placeholder?

Options that I could come up with:

1. Go thru the MatSelect class and manually re-expose all @Inputs and @Outputs. For the @Outputs I'll have to write wrapper methods that just propagate the events out.
2. Make my FruitSelect extend MatSelect , so it implicitly has access to it's super's interactors. While this seems design-wise the first solution that comes to mind, not sure if it is easily doable. Googling didnt show a lot of people doing this, so not sure.

Answer 1

So, as far as i see you have 2 options that you described. From my experience, i can say that I saw component inheritance in use only once, it has a lot of drawbacks - it brings another level of complexity (huge), it doesn't inherits template, and check what you will inherit from MatSelect into your child component (~30 public fields).

---

So in case of inheritance, you will end up with component that has a lot of meaningless fields inside + you will still need to bind all the outputs to inherited event triggers (again because template is not being inherited).

---

On the other hand, you need so far only placeholder input, so you can just re-expose it. It also makes sense for your component, but not all the MatSelect fields have meaning for FruitSelect, so you can select which ones you want to re-expose.

---

Speaking about my opinion, i would definitely prefer second option (re-exposing). Hope that helps.