更改来自库的组件选择器

Question

Context

I am working on a user interface library - which in itself is consuming another Angular Library which provides own components (for the sake of the example let's assume it's the Angular Material Library. Some of the components provided are such a good fit, that I'd like to simply "hand them through" to the consumers of my library.

Problem

However, for consistency, I'd like to have a comment prefix: Instead of, say mat-button , I'd like to use the selector foo-button .

Is there a way to achieve such behaviour? To "rename" the selector for a component?

I'd like to achieve this without wrapping the consumed component into an another component, because this would force me to write (and maintain) my own methods that mimik the wrapped components' API and delegate to the wrapped component.

Answer 1

There is no other way of doing it apart from creating a wrapper component or to create directives to create these components dynamically and those directives having selector you want. Because a component is responsive for defining its own selector, template etc. that servers as a Metadata for Angular. It can't be overriden from any where else.