Angular，使用基于父组件的短组件选择器

Question

I am developing a library for the UI components. I created a parent component (using ng-content) that assigns css to the children, and declares that this part of the interface will be built using the library's element components.

I would like to avoid having writing every time a full name with prefix for the child components.

For example I want to build a form component:

<dvl-ui-theme theme="basic">
  <dvl-ui-active-form>
    <dvl-ui-input name="input-name">
  </dvl-ui-active-form>
</dvl-ui-theme>

I would like to use something like

<dvl-ui-theme theme="basic">
  <active-form>
    <input name="input-name">
  </active-form>
</dvl-ui-theme>

It will be shorter and much more readable.

Is there a way I can achieve this?

EDIT: To summarize and make it clear - I want to have different selector of the component based on the parent component element.

Normally I would use <dvl-ui-input> but since the input is in the form, I would like to use <input> and have the same component initialized

Answer 1

The Selector of an angular Component is defined in the ***.component.ts file:

@Component({
  selector: 'app-root', // <= here you can change the selector of your component
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {}

this will look like so in your.html file:

<app-root></app-root>

Be aware that duplicate selectors will cause issues. Also you cannot use plain html tag names as your component selector like: input , div , h1 , etc...