From 814d1715faf0707364ecde3a0f7be58ceb739317 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 3 Sep 2024 18:53:50 +0200
Subject: [PATCH] Selector template (#1531)

* chore: remove name from template

* chore: update snapshots

* chore: update snapshots

* chore: fix change

* chore: update styles snapshot

* feat: add selector options

* chore: make backwards compatible

* chore: update readme

* Revert "chore: make backwards compatible"

This reverts commit 699bd4f3ff7a962d9f8d830ce4b3d35a665ed03c.

* chore: remove json.name

* chore: move angular custom selector to metadata

* chore: update from main

* Create funny-files-cheat.md

* update tests

* fix

---------

Co-authored-by: Fernando Nogueira <abert036@uottawa.ca>
Co-authored-by: Fernando Nogueira <mrfernando2509@gmail.com>
Co-authored-by: Sami Jaber <me@sami.website>
Co-authored-by: Sidharth Mohanty <sidmohanty11@gmail.com>
---
 .changeset/funny-files-cheat.md               |    5 +
 .../__snapshots__/alpine.test.ts.snap         |   18 -
 .../__snapshots__/angular.import.test.ts.snap |  588 +++++----
 .../__snapshots__/angular.mapper.test.ts.snap |  590 +++++----
 .../__snapshots__/angular.state.test.ts.snap  |  588 +++++----
 .../__snapshots__/angular.styles.test.ts.snap |  574 ++++----
 .../__snapshots__/angular.test.ts.snap        | 1162 +++++++++--------
 .../__tests__/__snapshots__/lit.test.ts.snap  |    4 -
 .../__snapshots__/preact.test.ts.snap         |   22 -
 .../__tests__/__snapshots__/qwik.test.ts.snap |   40 -
 .../__snapshots__/react-native.test.ts.snap   |   22 -
 .../__snapshots__/react.test.ts.snap          |   22 -
 .../__tests__/__snapshots__/rsc.test.ts.snap  |   22 -
 .../__snapshots__/solid.test.ts.snap          |   44 -
 .../__snapshots__/stencil.test.ts.snap        |    4 -
 .../__snapshots__/svelte.test.ts.snap         |   16 -
 .../__tests__/__snapshots__/taro.test.ts.snap |   22 -
 .../__snapshots__/webcomponent.test.ts.snap   |    4 -
 packages/core/src/__tests__/angular.test.ts   |    2 +-
 .../data/angular/custom-selector.raw.tsx      |    9 +
 packages/core/src/__tests__/test-generator.ts |    1 +
 .../core/src/generators/angular/README.md     |    4 +-
 packages/core/src/generators/angular/index.ts |   33 +-
 packages/core/src/generators/angular/types.ts |    3 +-
 packages/core/src/types/metadata.ts           |    4 +-
 packages/docs/src/components/code-rotator.tsx |    2 +-
 26 files changed, 1958 insertions(+), 1847 deletions(-)
 create mode 100644 .changeset/funny-files-cheat.md
 create mode 100644 packages/core/src/__tests__/data/angular/custom-selector.raw.tsx

diff --git a/.changeset/funny-files-cheat.md b/.changeset/funny-files-cheat.md
new file mode 100644
index 0000000000..b4dff2b0ee
--- /dev/null
+++ b/.changeset/funny-files-cheat.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/mitosis": patch
+---
+
+Angular: Feature: custom template selectors using metadata hook.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 7c346b43e4..87fd1cb69e 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2548,15 +2548,6 @@ exports[`Alpine.js > jsx > Javascript Test > string-literal-store 1`] = `
 "
 `;
 
-exports[`Alpine.js > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"unknown: Unexpected token, expected \\",\\" (2:60)
-
-  1 | document.addEventListener('alpine:init', () => {
-> 2 |               Alpine.data('stringLiteralStore', () => ({ foo-bar: 123,}))
-    |                                                             ^
-  3 |           })"
-`;
-
 exports[`Alpine.js > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<style>
   .div {
@@ -5304,15 +5295,6 @@ exports[`Alpine.js > jsx > Typescript Test > string-literal-store 1`] = `
 "
 `;
 
-exports[`Alpine.js > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"unknown: Unexpected token, expected \\",\\" (2:60)
-
-  1 | document.addEventListener('alpine:init', () => {
-> 2 |               Alpine.data('stringLiteralStore', () => ({ foo-bar: 123,}))
-    |                                                             ^
-  3 |           })"
-`;
-
 exports[`Alpine.js > jsx > Typescript Test > styleClassAndCss 1`] = `
 "<style>
   .div {
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 91abe0fe16..c712462a26 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -7,7 +7,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -84,7 +84,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -133,7 +133,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -182,7 +182,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -235,7 +235,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -279,7 +279,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -323,7 +323,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -367,7 +367,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -399,7 +399,7 @@ import { Component, Input } from \\"@angular/core\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -448,7 +448,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -493,7 +493,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -546,7 +546,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -613,7 +613,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -664,7 +664,7 @@ export function usePrevious(value) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -713,7 +713,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -820,7 +820,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -893,7 +893,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -939,7 +939,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -1046,7 +1046,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -1135,7 +1135,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -1238,7 +1238,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -1610,7 +1610,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -1720,7 +1720,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -1767,7 +1767,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -1871,7 +1871,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -1973,7 +1973,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -2011,7 +2011,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -2053,7 +2053,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -2151,7 +2151,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -2256,7 +2256,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -2355,7 +2355,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -2389,7 +2389,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -2425,7 +2425,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -2457,7 +2457,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -2494,7 +2494,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -2614,7 +2614,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -2701,7 +2701,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -2748,7 +2748,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -2848,7 +2848,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -3097,7 +3097,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -3142,7 +3142,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -3207,7 +3207,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3248,7 +3248,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3289,8 +3289,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -3341,7 +3340,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3376,7 +3375,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3411,7 +3410,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3446,7 +3445,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -3481,7 +3480,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3524,7 +3523,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3563,7 +3562,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3602,7 +3601,7 @@ import { Component, Input } from \\"@angular/core\\";
 import BuilderContext from \\"@dummy/context.js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -3628,6 +3627,36 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3652,7 +3681,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3779,7 +3808,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3894,7 +3923,7 @@ const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -3928,7 +3957,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -3982,7 +4011,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -4039,7 +4068,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -4079,7 +4108,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -4127,7 +4156,7 @@ import { Component, Input } from \\"@angular/core\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -4166,7 +4195,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -4196,7 +4225,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4233,7 +4262,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4283,7 +4312,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -4368,7 +4397,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -4405,7 +4434,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -4448,7 +4477,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -4503,7 +4532,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -4545,7 +4574,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -4587,7 +4616,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -4626,7 +4655,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4666,7 +4695,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4713,7 +4742,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4749,7 +4778,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4795,7 +4824,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -4841,7 +4870,7 @@ export const bar = () => {};
 export function run(value) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -4871,7 +4900,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -4903,7 +4932,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -4940,7 +4969,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -4972,7 +5001,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -5004,7 +5033,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -5072,7 +5101,7 @@ import RenderComponent from \\"./render-component.lite\\";
 import RenderRepeatedBlock from \\"./render-repeated-block.lite\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -5357,7 +5386,7 @@ import {
 import RenderBlocks from \\"@dummy/RenderBlocks.lite.tsx\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -5416,7 +5445,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -5523,7 +5552,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -5556,12 +5585,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -5593,13 +5622,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -5631,7 +5660,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -5698,7 +5727,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -5744,7 +5773,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -5786,7 +5815,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -5821,7 +5850,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
@@ -5864,7 +5893,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -5952,7 +5981,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -6036,7 +6065,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -6066,7 +6095,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -6122,7 +6151,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -6173,7 +6202,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -6214,11 +6243,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -6271,7 +6300,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -6311,7 +6340,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -6350,7 +6379,7 @@ import { Component } from \\"@angular/core\\";
 import Foo from \\"./foo-sub-component.lite\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -6380,7 +6409,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -6431,7 +6460,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -6476,7 +6505,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -6508,7 +6537,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -6544,7 +6573,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -6583,7 +6612,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -6619,7 +6648,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -6696,7 +6725,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -6739,7 +6768,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -6777,7 +6806,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
   \`,
@@ -6819,7 +6848,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -6900,7 +6929,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -6949,7 +6978,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -6998,7 +7027,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -7056,7 +7085,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -7100,7 +7129,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -7144,7 +7173,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -7188,7 +7217,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -7225,7 +7254,7 @@ type Props = {
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -7274,7 +7303,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -7319,7 +7348,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -7376,7 +7405,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -7447,7 +7476,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -7502,7 +7531,7 @@ export function usePrevious<T>(value: T) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -7559,7 +7588,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7681,7 +7710,7 @@ export interface ColumnProps {
 }
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -7761,7 +7790,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -7813,7 +7842,7 @@ const defaultProps = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -7925,7 +7954,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -8019,7 +8048,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -8147,7 +8176,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -8545,7 +8574,7 @@ export interface ImageProps {
 }
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -8655,7 +8684,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -8720,7 +8749,7 @@ export interface ImgProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -8836,7 +8865,7 @@ export interface FormInputProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -8938,7 +8967,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -8981,7 +9010,7 @@ export interface RawTextProps {
 }
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -9030,7 +9059,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -9135,7 +9164,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -9252,7 +9281,7 @@ export interface FormSelectProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -9355,7 +9384,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -9393,7 +9422,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -9433,7 +9462,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -9469,7 +9498,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -9511,7 +9540,7 @@ type SmileReviewsProps = {
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -9637,7 +9666,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -9732,7 +9761,7 @@ export interface TextProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -9788,7 +9817,7 @@ export interface TextareaProps {
 }
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -9915,7 +9944,7 @@ export interface VideoProps {
 }
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -10165,7 +10194,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -10210,7 +10239,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -10282,7 +10311,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -10328,7 +10357,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -10369,8 +10398,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -10421,7 +10449,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10456,7 +10484,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10491,7 +10519,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10533,7 +10561,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -10568,7 +10596,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10615,7 +10643,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -10658,7 +10686,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -10697,7 +10725,7 @@ import { Component, Input } from \\"@angular/core\\";
 import BuilderContext from \\"@dummy/context.js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -10723,6 +10751,36 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10757,7 +10815,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -10893,7 +10951,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -11013,7 +11071,7 @@ const DEFAULT_VALUES: Props = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -11047,7 +11105,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -11101,7 +11159,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -11159,7 +11217,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -11203,7 +11261,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -11258,7 +11316,7 @@ import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -11297,7 +11355,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -11327,7 +11385,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -11364,7 +11422,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -11420,7 +11478,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11505,7 +11563,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -11547,7 +11605,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -11590,7 +11648,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -11645,7 +11703,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -11687,7 +11745,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -11733,7 +11791,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -11772,7 +11830,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -11812,7 +11870,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -11859,7 +11917,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -11899,7 +11957,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -11945,7 +12003,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -12001,7 +12059,7 @@ export const bar = () => {};
 export function run<T>(value: T) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -12044,7 +12102,7 @@ export interface MyBasicComponentProps {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12081,7 +12139,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -12123,7 +12181,7 @@ interface Person {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12160,7 +12218,7 @@ type Person = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12192,7 +12250,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -12273,7 +12331,7 @@ import RenderRepeatedBlock from \\"./render-repeated-block.lite\\";
 import type { RepeatData } from \\"./types.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -12566,7 +12624,7 @@ import {
 import RenderBlocks from \\"@dummy/RenderBlocks.lite.tsx\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -12633,7 +12691,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -12744,7 +12802,7 @@ export interface RenderStylesProps {
 }
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -12777,12 +12835,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -12814,13 +12872,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -12857,7 +12915,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -12929,7 +12987,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -12979,7 +13037,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -13025,7 +13083,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -13069,7 +13127,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
@@ -13118,7 +13176,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -13207,7 +13265,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -13291,7 +13349,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -13321,7 +13379,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -13377,7 +13435,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -13428,7 +13486,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -13469,11 +13527,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -13526,7 +13584,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -13566,7 +13624,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -13605,7 +13663,7 @@ import { Component } from \\"@angular/core\\";
 import Foo from \\"./foo-sub-component.lite\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -13635,7 +13693,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -13686,7 +13744,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -13739,7 +13797,7 @@ import type { Foo } from \\"./foo-type\\";
 import type { Foo as Foo2 } from \\"./type-export.lite\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -13771,7 +13829,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -13807,7 +13865,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -13846,7 +13904,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -13882,7 +13940,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -13959,7 +14017,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -14002,7 +14060,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -14040,7 +14098,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -14076,7 +14134,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -14156,7 +14214,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -14190,7 +14248,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -14226,7 +14284,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -14260,7 +14318,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -14296,7 +14354,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -14334,7 +14392,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -14366,7 +14424,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -14408,7 +14466,7 @@ import { Component } from \\"@angular/core\\";
 import Button from \\"./Button.lite\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -14444,7 +14502,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -14490,7 +14548,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -14529,7 +14587,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -14577,7 +14635,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -14610,7 +14668,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -14648,7 +14706,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -14686,7 +14744,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -14722,7 +14780,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -14802,7 +14860,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -14836,7 +14894,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -14872,7 +14930,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -14906,7 +14964,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -14942,7 +15000,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -14980,7 +15038,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -15012,7 +15070,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -15054,7 +15112,7 @@ import { Component } from \\"@angular/core\\";
 import Button from \\"./Button.lite\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -15090,7 +15148,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -15136,7 +15194,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -15175,7 +15233,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -15223,7 +15281,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -15256,7 +15314,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -15294,7 +15352,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index 806fa6add4..44d4441494 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -7,7 +7,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -85,7 +85,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -135,7 +135,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -185,7 +185,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -239,7 +239,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -284,7 +284,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -329,7 +329,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -374,7 +374,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -407,7 +407,7 @@ import { Component, Input } from \\"@angular/core\\";
 import MyBooleanAttributeComponentModule from \\"./basic-boolean-attribute-component.raw/angular\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -457,7 +457,7 @@ import MyBasicOnMountUpdateComponentModule from \\"./basic-onMount-update.raw/an
 import MyBasicComponentModule from \\"./basic.raw/angular\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -503,7 +503,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -557,7 +557,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -625,7 +625,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -677,7 +677,7 @@ export function usePrevious(value) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -727,7 +727,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -835,7 +835,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -909,7 +909,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -956,7 +956,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -1064,7 +1064,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -1154,7 +1154,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -1258,7 +1258,7 @@ import {
 } from \\"@fake/angular\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -1631,7 +1631,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -1742,7 +1742,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -1790,7 +1790,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -1895,7 +1895,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -1998,7 +1998,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponentModule from \\"./input.raw/angular\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -2037,7 +2037,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -2080,7 +2080,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -2179,7 +2179,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -2285,7 +2285,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -2385,7 +2385,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -2420,7 +2420,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCodeModule from \\"./content-slot-jsx.raw/angular\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -2457,7 +2457,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCodeModule from \\"./content-slot-jsx.raw/angular\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -2490,7 +2490,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -2528,7 +2528,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -2649,7 +2649,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -2737,7 +2737,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -2785,7 +2785,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -2886,7 +2886,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -3137,7 +3137,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -3183,7 +3183,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -3249,7 +3249,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3291,7 +3291,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3333,8 +3333,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -3386,7 +3385,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3422,7 +3421,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3458,7 +3457,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3494,7 +3493,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -3530,7 +3529,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3574,7 +3573,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3614,7 +3613,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3654,7 +3653,7 @@ import { Component, Input } from \\"@angular/core\\";
 import BuilderContext from \\"@dummy/context.lite\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -3681,6 +3680,37 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3705,7 +3735,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3833,7 +3863,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3949,7 +3979,7 @@ const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -3984,7 +4014,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -4039,7 +4069,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -4097,7 +4127,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -4138,7 +4168,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -4187,7 +4217,7 @@ import { Component, Input } from \\"@angular/core\\";
 import RenderBlockModule from \\"./builder-render-block.raw/angular\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -4227,7 +4257,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -4258,7 +4288,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4296,7 +4326,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4347,7 +4377,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -4433,7 +4463,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -4471,7 +4501,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -4515,7 +4545,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -4571,7 +4601,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -4614,7 +4644,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -4657,7 +4687,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -4697,7 +4727,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4738,7 +4768,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4786,7 +4816,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4823,7 +4853,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4870,7 +4900,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -4917,7 +4947,7 @@ export const bar = () => {};
 export function run(value) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -4948,7 +4978,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -4981,7 +5011,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -5019,7 +5049,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -5052,7 +5082,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -5085,7 +5115,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -5154,7 +5184,7 @@ import RenderComponent from \\"./render-component.lite\\";
 import RenderRepeatedBlockModule from \\"./render-repeated-block.lite/angular\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -5440,7 +5470,7 @@ import {
 import RenderBlocksModule from \\"@dummy/RenderBlocks.lite.tsx/angular\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -5500,7 +5530,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -5608,7 +5638,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -5642,12 +5672,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -5680,13 +5710,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -5719,7 +5749,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -5787,7 +5817,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -5834,7 +5864,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -5877,7 +5907,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -5913,7 +5943,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
@@ -5957,7 +5987,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -6046,7 +6076,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -6131,7 +6161,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -6162,7 +6192,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -6219,7 +6249,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -6271,7 +6301,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -6313,11 +6343,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -6370,7 +6400,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -6411,7 +6441,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -6451,7 +6481,7 @@ import { Component } from \\"@angular/core\\";
 import FooModule from \\"./foo-sub-component.lite/angular\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -6482,7 +6512,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -6534,7 +6564,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -6580,7 +6610,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -6613,7 +6643,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -6650,7 +6680,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -6690,7 +6720,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -6727,7 +6757,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -6805,7 +6835,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -6849,7 +6879,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -6888,7 +6918,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
   \`,
@@ -6931,7 +6961,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -7013,7 +7043,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -7063,7 +7093,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -7113,7 +7143,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -7172,7 +7202,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -7217,7 +7247,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -7262,7 +7292,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -7307,7 +7337,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -7345,7 +7375,7 @@ type Props = {
 import MyBooleanAttributeComponentModule from \\"./basic-boolean-attribute-component.raw/angular\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -7395,7 +7425,7 @@ import MyBasicOnMountUpdateComponentModule from \\"./basic-onMount-update.raw/an
 import MyBasicComponentModule from \\"./basic.raw/angular\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -7441,7 +7471,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -7499,7 +7529,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -7571,7 +7601,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -7627,7 +7657,7 @@ export function usePrevious<T>(value: T) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -7685,7 +7715,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7808,7 +7838,7 @@ export interface ColumnProps {
 }
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -7889,7 +7919,7 @@ type Props = {
 import { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -7942,7 +7972,7 @@ const defaultProps = {
 import { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -8055,7 +8085,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -8150,7 +8180,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -8279,7 +8309,7 @@ import {
 } from \\"@fake/angular\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -8678,7 +8708,7 @@ export interface ImageProps {
 }
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -8789,7 +8819,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -8855,7 +8885,7 @@ export interface ImgProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -8972,7 +9002,7 @@ export interface FormInputProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -9075,7 +9105,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponentModule from \\"./input.raw/angular\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -9119,7 +9149,7 @@ export interface RawTextProps {
 }
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -9169,7 +9199,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -9275,7 +9305,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -9393,7 +9423,7 @@ export interface FormSelectProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -9497,7 +9527,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -9536,7 +9566,7 @@ type Props = {
 import ContentSlotCodeModule from \\"./content-slot-jsx.raw/angular\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -9577,7 +9607,7 @@ type Props = {
 import ContentSlotCodeModule from \\"./content-slot-jsx.raw/angular\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -9614,7 +9644,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -9657,7 +9687,7 @@ type SmileReviewsProps = {
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -9784,7 +9814,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -9880,7 +9910,7 @@ export interface TextProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -9937,7 +9967,7 @@ export interface TextareaProps {
 }
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -10065,7 +10095,7 @@ export interface VideoProps {
 }
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -10317,7 +10347,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -10363,7 +10393,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -10436,7 +10466,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -10483,7 +10513,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -10525,8 +10555,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -10578,7 +10607,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10614,7 +10643,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10650,7 +10679,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10693,7 +10722,7 @@ type Props = {
 import { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -10729,7 +10758,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10777,7 +10806,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -10821,7 +10850,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -10861,7 +10890,7 @@ import { Component, Input } from \\"@angular/core\\";
 import BuilderContext from \\"@dummy/context.lite\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -10888,6 +10917,37 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10922,7 +10982,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -11059,7 +11119,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -11180,7 +11240,7 @@ const DEFAULT_VALUES: Props = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -11215,7 +11275,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -11270,7 +11330,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -11329,7 +11389,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -11374,7 +11434,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -11432,7 +11492,7 @@ import RenderBlockModule, {
 } from \\"./builder-render-block.raw/angular\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -11472,7 +11532,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -11503,7 +11563,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -11541,7 +11601,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -11598,7 +11658,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11684,7 +11744,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -11727,7 +11787,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -11771,7 +11831,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -11827,7 +11887,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -11870,7 +11930,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -11917,7 +11977,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -11957,7 +12017,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -11998,7 +12058,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -12046,7 +12106,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -12087,7 +12147,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -12134,7 +12194,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -12191,7 +12251,7 @@ export const bar = () => {};
 export function run<T>(value: T) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -12235,7 +12295,7 @@ export interface MyBasicComponentProps {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12273,7 +12333,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -12316,7 +12376,7 @@ interface Person {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12354,7 +12414,7 @@ type Person = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12387,7 +12447,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -12469,7 +12529,7 @@ import RenderRepeatedBlockModule from \\"./render-repeated-block.lite/angular\\"
 import { RepeatData } from \\"./types.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -12763,7 +12823,7 @@ import {
 import RenderBlocksModule from \\"@dummy/RenderBlocks.lite.tsx/angular\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -12831,7 +12891,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -12943,7 +13003,7 @@ export interface RenderStylesProps {
 }
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -12977,12 +13037,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -13015,13 +13075,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -13059,7 +13119,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -13132,7 +13192,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -13183,7 +13243,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -13230,7 +13290,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -13275,7 +13335,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
@@ -13325,7 +13385,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -13415,7 +13475,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -13500,7 +13560,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -13531,7 +13591,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -13588,7 +13648,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -13640,7 +13700,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -13682,11 +13742,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -13739,7 +13799,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -13780,7 +13840,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -13820,7 +13880,7 @@ import { Component } from \\"@angular/core\\";
 import FooModule from \\"./foo-sub-component.lite/angular\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -13851,7 +13911,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -13903,7 +13963,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -13957,7 +14017,7 @@ import { Foo } from \\"./foo-type\\";
 import { Foo as Foo2 } from \\"./type-export.lite\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -13990,7 +14050,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -14027,7 +14087,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -14067,7 +14127,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -14104,7 +14164,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -14182,7 +14242,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -14226,7 +14286,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -14265,7 +14325,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -14302,7 +14362,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -14383,7 +14443,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -14418,7 +14478,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -14455,7 +14515,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -14490,7 +14550,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -14527,7 +14587,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -14566,7 +14626,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -14599,7 +14659,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -14642,7 +14702,7 @@ import { Component } from \\"@angular/core\\";
 import ButtonModule from \\"./Button.lite/angular\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -14679,7 +14739,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -14726,7 +14786,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -14766,7 +14826,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -14815,7 +14875,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -14849,7 +14909,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -14888,7 +14948,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -14927,7 +14987,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -14964,7 +15024,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -15045,7 +15105,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -15080,7 +15140,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -15117,7 +15177,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -15152,7 +15212,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -15189,7 +15249,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -15228,7 +15288,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -15261,7 +15321,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -15304,7 +15364,7 @@ import { Component } from \\"@angular/core\\";
 import ButtonModule from \\"./Button.lite/angular\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -15341,7 +15401,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -15388,7 +15448,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -15428,7 +15488,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -15477,7 +15537,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -15511,7 +15571,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -15550,7 +15610,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 037c8ca8ca..62dd4f2eb5 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -7,7 +7,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -90,7 +90,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -139,7 +139,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -187,7 +187,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{node_0_div}} Hello! I can run in React, Vue, Solid, or Liquid!
@@ -247,7 +247,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -291,7 +291,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -335,7 +335,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -379,7 +379,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -411,7 +411,7 @@ import { Component, Input } from \\"@angular/core\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -460,7 +460,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -505,7 +505,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -557,7 +557,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -635,7 +635,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -686,7 +686,7 @@ export function usePrevious(value) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -735,7 +735,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -842,7 +842,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -915,7 +915,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -961,7 +961,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -1068,7 +1068,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div #elem [class]=\\"node_0_div\\" [innerHTML]=\\"code\\"></div>
   \`,
@@ -1164,7 +1164,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div #elem [class]=\\"node_0_div\\" [innerHTML]=\\"code\\"></div>
   \`,
@@ -1274,7 +1274,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -1652,7 +1652,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -1775,7 +1775,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -1822,7 +1822,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"node_0_img\\"
@@ -1935,7 +1935,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -2037,7 +2037,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -2075,7 +2075,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -2117,7 +2117,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section [ngStyle]=\\"node_0_section\\" #elRef0>
       <ng-content></ng-content>
@@ -2226,7 +2226,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -2329,7 +2329,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -2428,7 +2428,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -2462,7 +2462,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -2498,7 +2498,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -2530,7 +2530,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -2567,7 +2567,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -2683,7 +2683,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -2770,7 +2770,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -2830,7 +2830,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -2930,7 +2930,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -3193,7 +3193,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -3238,7 +3238,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -3312,7 +3312,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3353,7 +3353,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3394,8 +3394,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -3446,7 +3445,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3481,7 +3480,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3516,7 +3515,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3551,7 +3550,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -3586,7 +3585,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3629,7 +3628,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3668,7 +3667,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3705,7 +3704,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -3731,6 +3730,36 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3755,7 +3784,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3882,7 +3911,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3997,7 +4026,7 @@ const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -4031,7 +4060,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -4106,7 +4135,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -4182,7 +4211,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -4222,7 +4251,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -4281,7 +4310,7 @@ import { Component, Input } from \\"@angular/core\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -4335,7 +4364,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -4365,7 +4394,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4402,7 +4431,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4452,7 +4481,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -4537,7 +4566,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -4574,7 +4603,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -4617,7 +4646,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -4672,7 +4701,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -4714,7 +4743,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -4756,7 +4785,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -4795,7 +4824,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4835,7 +4864,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4882,7 +4911,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4918,7 +4947,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4964,7 +4993,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -5010,7 +5039,7 @@ export const bar = () => {};
 export function run(value) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -5040,7 +5069,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -5072,7 +5101,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -5109,7 +5138,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -5141,7 +5170,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -5173,7 +5202,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -5237,7 +5266,7 @@ import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-bl
 import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -5539,7 +5568,7 @@ import {
 } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -5598,7 +5627,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -5705,7 +5734,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -5738,12 +5767,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -5775,13 +5804,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -5813,7 +5842,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -5880,7 +5909,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -5926,7 +5955,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -5968,7 +5997,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -6003,7 +6032,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
@@ -6046,7 +6075,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -6134,7 +6163,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -6218,7 +6247,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -6248,7 +6277,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -6304,7 +6333,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp [val]=\\"node_0_Comp\\">{{val}}</Comp>
   \`,
@@ -6350,7 +6379,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -6391,11 +6420,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -6448,7 +6477,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div class=\\"builder-column div\\" [ngStyle]=\\"node_0_div\\"></div>
   \`,
@@ -6499,7 +6528,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -6536,7 +6565,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -6566,7 +6595,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -6617,7 +6646,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -6662,7 +6691,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -6694,7 +6723,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -6730,7 +6759,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -6769,7 +6798,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -6805,7 +6834,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -6916,7 +6945,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -6959,7 +6988,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -6997,7 +7026,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
   \`,
@@ -7039,7 +7068,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -7126,7 +7155,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -7175,7 +7204,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -7223,7 +7252,7 @@ import { Component, SimpleChanges } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{node_0_div}} Hello! I can run in React, Vue, Solid, or Liquid!
@@ -7288,7 +7317,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -7332,7 +7361,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -7376,7 +7405,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -7420,7 +7449,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -7457,7 +7486,7 @@ type Props = {
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -7506,7 +7535,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -7551,7 +7580,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -7613,7 +7642,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -7695,7 +7724,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -7750,7 +7779,7 @@ export function usePrevious<T>(value: T) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -7807,7 +7836,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7929,7 +7958,7 @@ export interface ColumnProps {
 }
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -8009,7 +8038,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -8061,7 +8090,7 @@ const defaultProps = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -8179,7 +8208,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div #elem [class]=\\"node_0_div\\" [innerHTML]=\\"code\\"></div>
   \`,
@@ -8286,7 +8315,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div #elem [class]=\\"node_0_div\\" [innerHTML]=\\"code\\"></div>
   \`,
@@ -8421,7 +8450,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -8831,7 +8860,7 @@ export interface ImageProps {
 }
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -8954,7 +8983,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -9019,7 +9048,7 @@ export interface ImgProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"node_0_img\\"
@@ -9144,7 +9173,7 @@ export interface FormInputProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -9246,7 +9275,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -9289,7 +9318,7 @@ export interface RawTextProps {
 }
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -9338,7 +9367,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section [ngStyle]=\\"node_0_section\\" #elRef0>
       <ng-content></ng-content>
@@ -9454,7 +9483,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -9569,7 +9598,7 @@ export interface FormSelectProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -9672,7 +9701,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -9710,7 +9739,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -9750,7 +9779,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -9786,7 +9815,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -9828,7 +9857,7 @@ type SmileReviewsProps = {
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -9950,7 +9979,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -10045,7 +10074,7 @@ export interface TextProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -10114,7 +10143,7 @@ export interface TextareaProps {
 }
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -10241,7 +10270,7 @@ export interface VideoProps {
 }
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -10505,7 +10534,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -10551,7 +10580,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -10632,7 +10661,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -10678,7 +10707,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -10719,8 +10748,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -10771,7 +10799,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10806,7 +10834,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10841,7 +10869,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10883,7 +10911,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -10918,7 +10946,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10965,7 +10993,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -11008,7 +11036,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -11045,7 +11073,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -11071,6 +11099,36 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11105,7 +11163,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -11241,7 +11299,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -11361,7 +11419,7 @@ const DEFAULT_VALUES: Props = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -11395,7 +11453,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -11471,7 +11529,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -11548,7 +11606,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -11592,7 +11650,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -11658,7 +11716,7 @@ import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -11712,7 +11770,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -11742,7 +11800,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -11779,7 +11837,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -11835,7 +11893,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11920,7 +11978,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -11962,7 +12020,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -12005,7 +12063,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -12060,7 +12118,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -12102,7 +12160,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -12148,7 +12206,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -12187,7 +12245,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -12227,7 +12285,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -12274,7 +12332,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -12314,7 +12372,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -12360,7 +12418,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -12416,7 +12474,7 @@ export const bar = () => {};
 export function run<T>(value: T) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -12459,7 +12517,7 @@ export interface MyBasicComponentProps {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12496,7 +12554,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -12538,7 +12596,7 @@ interface Person {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12575,7 +12633,7 @@ type Person = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -12607,7 +12665,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -12684,7 +12742,7 @@ import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 import type { RepeatData } from \\"./types.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -12994,7 +13052,7 @@ import {
 } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -13061,7 +13119,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -13172,7 +13230,7 @@ export interface RenderStylesProps {
 }
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -13205,12 +13263,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -13242,13 +13300,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -13285,7 +13343,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -13357,7 +13415,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -13407,7 +13465,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -13453,7 +13511,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -13497,7 +13555,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
@@ -13546,7 +13604,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -13635,7 +13693,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -13719,7 +13777,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -13749,7 +13807,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -13805,7 +13863,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp [val]=\\"node_0_Comp\\">{{val}}</Comp>
   \`,
@@ -13851,7 +13909,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -13892,11 +13950,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -13949,7 +14007,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div class=\\"builder-column div\\" [ngStyle]=\\"node_0_div\\"></div>
   \`,
@@ -14000,7 +14058,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -14037,7 +14095,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -14067,7 +14125,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -14118,7 +14176,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -14170,7 +14228,7 @@ export type TypeDependencyProps = {
 import type { Foo } from \\"./foo-type\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -14202,7 +14260,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -14238,7 +14296,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -14277,7 +14335,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -14313,7 +14371,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -14424,7 +14482,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -14467,7 +14525,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -14505,7 +14563,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -14541,7 +14599,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -14633,7 +14691,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -14667,7 +14725,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [class]=\\"node_0_input\\" />
   \`,
@@ -14716,7 +14774,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -14750,7 +14808,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -14786,7 +14844,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -14824,7 +14882,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -14856,7 +14914,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -14896,7 +14954,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -14932,7 +14990,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -14978,7 +15036,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -15017,7 +15075,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -15065,7 +15123,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -15098,7 +15156,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -15136,7 +15194,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -15174,7 +15232,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -15210,7 +15268,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -15302,7 +15360,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -15336,7 +15394,7 @@ import { Component, Input, SimpleChanges } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [class]=\\"node_0_input\\" />
   \`,
@@ -15385,7 +15443,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -15419,7 +15477,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -15455,7 +15513,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -15493,7 +15551,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -15525,7 +15583,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -15565,7 +15623,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -15601,7 +15659,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -15647,7 +15705,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -15686,7 +15744,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -15734,7 +15792,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -15767,7 +15825,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -15805,7 +15863,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index e49609120b..6aaa84eeff 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -7,7 +7,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -81,7 +81,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -127,7 +127,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -169,7 +169,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -215,7 +215,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -252,7 +252,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -289,7 +289,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -326,7 +326,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -351,7 +351,7 @@ import { Component, Input } from \\"@angular/core\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -393,7 +393,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -431,7 +431,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -477,7 +477,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -541,7 +541,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -585,7 +585,7 @@ export function usePrevious(value) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -627,7 +627,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -727,7 +727,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -797,7 +797,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -836,7 +836,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -936,7 +936,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -1018,7 +1018,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -1114,7 +1114,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -1483,7 +1483,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -1590,7 +1590,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -1630,7 +1630,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -1727,7 +1727,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -1822,7 +1822,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -1853,7 +1853,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -1888,7 +1888,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -1979,7 +1979,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -2077,7 +2077,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -2169,7 +2169,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -2196,7 +2196,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -2225,7 +2225,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -2250,7 +2250,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -2280,7 +2280,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -2397,7 +2397,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -2477,7 +2477,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -2517,7 +2517,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -2610,7 +2610,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -2845,7 +2845,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -2883,7 +2883,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -2941,7 +2941,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -2979,7 +2979,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -3017,8 +3017,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -3062,7 +3061,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3094,7 +3093,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3126,7 +3125,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3158,7 +3157,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -3186,7 +3185,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -3226,7 +3225,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3258,7 +3257,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -3288,7 +3287,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -3307,6 +3306,29 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3331,7 +3353,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3451,7 +3473,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -3559,7 +3581,7 @@ const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -3586,7 +3608,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -3633,7 +3655,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -3683,7 +3705,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -3716,7 +3738,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -3757,7 +3779,7 @@ import { Component, Input } from \\"@angular/core\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -3789,7 +3811,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -3812,7 +3834,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -3842,7 +3864,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -3885,7 +3907,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -3963,7 +3985,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -3993,7 +4015,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -4029,7 +4051,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -4081,7 +4103,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -4116,7 +4138,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -4151,7 +4173,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -4183,7 +4205,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4216,7 +4238,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -4256,7 +4278,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4285,7 +4307,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -4324,7 +4346,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -4363,7 +4385,7 @@ export const bar = () => {};
 export function run(value) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -4386,7 +4408,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -4411,7 +4433,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -4441,7 +4463,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -4466,7 +4488,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -4491,7 +4513,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -4548,7 +4570,7 @@ import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-bl
 import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -4824,7 +4846,7 @@ import {
 } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -4880,7 +4902,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -4980,7 +5002,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -5006,12 +5028,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -5036,13 +5058,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -5067,7 +5089,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -5127,7 +5149,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -5166,7 +5188,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -5201,7 +5223,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -5229,7 +5251,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
@@ -5269,7 +5291,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -5350,7 +5372,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -5427,7 +5449,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -5450,7 +5472,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -5499,7 +5521,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -5543,7 +5565,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -5577,11 +5599,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`
+      \`
 })
 export default class StringLiteralStore {
 
@@ -5634,7 +5656,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -5671,7 +5693,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -5705,7 +5727,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -5728,7 +5750,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -5772,7 +5794,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -5810,7 +5832,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -5835,7 +5857,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -5868,7 +5890,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -5904,7 +5926,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -5937,7 +5959,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -6007,7 +6029,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -6043,7 +6065,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -6074,7 +6096,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
   \`,
@@ -6109,7 +6131,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -6187,7 +6209,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -6233,7 +6255,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -6275,7 +6297,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -6326,7 +6348,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -6363,7 +6385,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -6400,7 +6422,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -6437,7 +6459,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -6467,7 +6489,7 @@ type Props = {
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -6509,7 +6531,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -6547,7 +6569,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -6597,7 +6619,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -6665,7 +6687,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -6713,7 +6735,7 @@ export function usePrevious<T>(value: T) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -6763,7 +6785,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -6878,7 +6900,7 @@ export interface ColumnProps {
 }
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -6955,7 +6977,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -7000,7 +7022,7 @@ const defaultProps = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -7105,7 +7127,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -7192,7 +7214,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -7313,7 +7335,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -7708,7 +7730,7 @@ export interface ImageProps {
 }
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -7815,7 +7837,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -7873,7 +7895,7 @@ export interface ImgProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -7982,7 +8004,7 @@ export interface FormInputProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -8077,7 +8099,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -8113,7 +8135,7 @@ export interface RawTextProps {
 }
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -8155,7 +8177,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -8253,7 +8275,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -8363,7 +8385,7 @@ export interface FormSelectProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -8459,7 +8481,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -8490,7 +8512,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -8523,7 +8545,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -8552,7 +8574,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -8587,7 +8609,7 @@ type SmileReviewsProps = {
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -8710,7 +8732,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -8798,7 +8820,7 @@ export interface TextProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -8847,7 +8869,7 @@ export interface TextareaProps {
 }
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -8967,7 +8989,7 @@ export interface VideoProps {
 }
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -9203,7 +9225,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -9241,7 +9263,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -9306,7 +9328,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -9349,7 +9371,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -9387,8 +9409,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -9432,7 +9453,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9464,7 +9485,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9496,7 +9517,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9535,7 +9556,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -9563,7 +9584,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9607,7 +9628,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -9643,7 +9664,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -9673,7 +9694,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -9692,6 +9713,29 @@ export class RenderContentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9726,7 +9770,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -9855,7 +9899,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -9968,7 +10012,7 @@ const DEFAULT_VALUES: Props = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -9995,7 +10039,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -10042,7 +10086,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -10093,7 +10137,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -10130,7 +10174,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -10178,7 +10222,7 @@ import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -10210,7 +10254,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -10233,7 +10277,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -10263,7 +10307,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -10312,7 +10356,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -10390,7 +10434,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -10425,7 +10469,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -10461,7 +10505,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -10513,7 +10557,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -10548,7 +10592,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -10587,7 +10631,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -10619,7 +10663,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -10652,7 +10696,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -10692,7 +10736,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -10725,7 +10769,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -10764,7 +10808,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -10813,7 +10857,7 @@ export const bar = () => {};
 export function run<T>(value: T) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -10849,7 +10893,7 @@ export interface MyBasicComponentProps {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -10879,7 +10923,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -10914,7 +10958,7 @@ interface Person {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -10944,7 +10988,7 @@ type Person = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -10969,7 +11013,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -11038,7 +11082,7 @@ import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 import type { RepeatData } from \\"./types.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -11322,7 +11366,7 @@ import {
 } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -11386,7 +11430,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -11490,7 +11534,7 @@ export interface RenderStylesProps {
 }
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -11516,12 +11560,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -11546,13 +11590,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -11582,7 +11626,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -11647,7 +11691,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -11690,7 +11734,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -11729,7 +11773,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -11766,7 +11810,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
@@ -11812,7 +11856,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11894,7 +11938,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11971,7 +12015,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -11994,7 +12038,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -12043,7 +12087,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -12087,7 +12131,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -12121,11 +12165,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`
+      \`
 })
 export default class StringLiteralStore {
 
@@ -12178,7 +12222,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -12215,7 +12259,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -12249,7 +12293,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -12272,7 +12316,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -12316,7 +12360,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -12361,7 +12405,7 @@ export type TypeDependencyProps = {
 import type { Foo } from \\"./foo-type\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -12386,7 +12430,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -12419,7 +12463,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -12455,7 +12499,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -12488,7 +12532,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -12558,7 +12602,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -12594,7 +12638,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -12625,7 +12669,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -12654,7 +12698,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -12727,7 +12771,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -12754,7 +12798,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -12783,7 +12827,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -12810,7 +12854,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -12839,7 +12883,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -12870,7 +12914,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -12895,7 +12939,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -12928,7 +12972,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -12957,7 +13001,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -12996,7 +13040,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -13028,7 +13072,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -13069,7 +13113,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -13095,7 +13139,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -13130,7 +13174,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -13161,7 +13205,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -13190,7 +13234,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -13263,7 +13307,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -13290,7 +13334,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -13319,7 +13363,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -13346,7 +13390,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -13375,7 +13419,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -13406,7 +13450,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -13431,7 +13475,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -13464,7 +13508,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -13493,7 +13537,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -13532,7 +13576,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -13564,7 +13608,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -13605,7 +13649,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -13631,7 +13675,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -13666,7 +13710,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 3e717fe378..42df648e1e 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -7,7 +7,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -78,7 +78,7 @@ exports[`Angular > jsx > Javascript Test > AdvancedRef 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -150,7 +150,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -199,7 +199,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -248,7 +248,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -290,7 +290,7 @@ exports[`Angular > jsx > Javascript Test > Basic 4`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -334,7 +334,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -387,7 +387,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -435,7 +435,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -477,7 +477,7 @@ exports[`Angular > jsx > Javascript Test > Basic OnMount Update 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -516,7 +516,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -558,7 +558,7 @@ exports[`Angular > jsx > Javascript Test > Basic Outputs 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -597,7 +597,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -639,7 +639,7 @@ exports[`Angular > jsx > Javascript Test > Basic Outputs Meta 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -678,7 +678,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -706,7 +706,7 @@ exports[`Angular > jsx > Javascript Test > BasicAttribute 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -733,7 +733,7 @@ import { Component, Input } from \\"@angular/core\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -779,7 +779,7 @@ import { CommonModule } from \\"@angular/common\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -823,7 +823,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -869,7 +869,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -905,7 +905,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -956,7 +956,7 @@ exports[`Angular > jsx > Javascript Test > BasicFor 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -1004,7 +1004,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -1069,7 +1069,7 @@ exports[`Angular > jsx > Javascript Test > BasicRef 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -1131,7 +1131,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -1167,7 +1167,7 @@ exports[`Angular > jsx > Javascript Test > BasicRefAssignment 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -1213,7 +1213,7 @@ export function usePrevious(value) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -1267,7 +1267,7 @@ export function usePrevious(value) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -1311,7 +1311,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -1422,7 +1422,7 @@ exports[`Angular > jsx > Javascript Test > Button 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -1524,7 +1524,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -1595,7 +1595,7 @@ exports[`Angular > jsx > Javascript Test > Columns 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -1663,7 +1663,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -1695,7 +1695,7 @@ exports[`Angular > jsx > Javascript Test > ContentSlotHtml 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -1736,7 +1736,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -1853,7 +1853,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -1955,7 +1955,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -2042,7 +2042,7 @@ exports[`Angular > jsx > Javascript Test > CustomCode 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -2126,7 +2126,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -2213,7 +2213,7 @@ exports[`Angular > jsx > Javascript Test > Embed 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -2311,7 +2311,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -2695,7 +2695,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -3062,7 +3062,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -3170,7 +3170,7 @@ exports[`Angular > jsx > Javascript Test > Image 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -3275,7 +3275,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -3312,7 +3312,7 @@ exports[`Angular > jsx > Javascript Test > Image State 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -3354,7 +3354,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -3456,7 +3456,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -3555,7 +3555,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -3661,7 +3661,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -3758,7 +3758,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -3796,7 +3796,7 @@ import { CommonModule } from \\"@angular/common\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -3829,7 +3829,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -3863,7 +3863,7 @@ exports[`Angular > jsx > Javascript Test > RawText 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -3900,7 +3900,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -3998,7 +3998,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -4099,7 +4099,7 @@ exports[`Angular > jsx > Javascript Test > Section 3`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -4190,7 +4190,7 @@ exports[`Angular > jsx > Javascript Test > Section 4`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -4290,7 +4290,7 @@ import {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -4395,7 +4395,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -4489,7 +4489,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -4519,7 +4519,7 @@ exports[`Angular > jsx > Javascript Test > SlotDefault 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -4548,7 +4548,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -4582,7 +4582,7 @@ import { CommonModule } from \\"@angular/common\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -4613,7 +4613,7 @@ import { Component } from \\"@angular/core\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -4645,7 +4645,7 @@ import { CommonModule } from \\"@angular/common\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -4672,7 +4672,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -4705,7 +4705,7 @@ exports[`Angular > jsx > Javascript Test > SlotNamed 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -4737,7 +4737,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -4851,7 +4851,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -4966,7 +4966,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -5055,7 +5055,7 @@ exports[`Angular > jsx > Javascript Test > Submit 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -5137,7 +5137,7 @@ import { Component, Input } from \\"@angular/core\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -5178,7 +5178,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -5220,7 +5220,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -5318,7 +5318,7 @@ exports[`Angular > jsx > Javascript Test > Textarea 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -5413,7 +5413,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -5532,7 +5532,7 @@ exports[`Angular > jsx > Javascript Test > Video 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -5903,7 +5903,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -5939,7 +5939,7 @@ exports[`Angular > jsx > Javascript Test > arrowFunctionInUseStore 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -5979,7 +5979,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -6049,7 +6049,7 @@ exports[`Angular > jsx > Javascript Test > basicForNoTagReference 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -6109,7 +6109,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -6148,7 +6148,7 @@ exports[`Angular > jsx > Javascript Test > basicForwardRef 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -6184,7 +6184,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -6223,7 +6223,7 @@ exports[`Angular > jsx > Javascript Test > basicForwardRefMetadata 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -6259,8 +6259,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -6309,8 +6308,7 @@ exports[`Angular > jsx > Javascript Test > basicOnUpdateReturn 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -6356,7 +6354,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6389,7 +6387,7 @@ exports[`Angular > jsx > Javascript Test > class + ClassName + css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6419,7 +6417,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6452,7 +6450,7 @@ exports[`Angular > jsx > Javascript Test > class + css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6482,7 +6480,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6515,7 +6513,7 @@ exports[`Angular > jsx > Javascript Test > className + css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6545,7 +6543,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -6578,7 +6576,7 @@ exports[`Angular > jsx > Javascript Test > className 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -6608,7 +6606,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6646,7 +6644,7 @@ exports[`Angular > jsx > Javascript Test > classState 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -6684,7 +6682,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -6721,7 +6719,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -6755,7 +6753,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -6793,7 +6791,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -6825,7 +6823,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -6858,7 +6856,7 @@ import { CommonModule } from \\"@angular/common\\";
 import BuilderContext from \\"@dummy/context.js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -6879,6 +6877,59 @@ export default class RenderContent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > customSelector 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class MyComponent {}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6903,7 +6954,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7030,7 +7081,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7152,7 +7203,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7276,7 +7327,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -7386,7 +7437,7 @@ const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -7422,7 +7473,7 @@ const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -7451,7 +7502,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -7496,7 +7547,7 @@ exports[`Angular > jsx > Javascript Test > dynamicComponent 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -7545,7 +7596,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -7607,7 +7658,7 @@ exports[`Angular > jsx > Javascript Test > dynamicComponentWithEventArg 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -7659,7 +7710,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -7697,7 +7748,7 @@ exports[`Angular > jsx > Javascript Test > expressionState 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -7732,7 +7783,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -7776,7 +7827,7 @@ exports[`Angular > jsx > Javascript Test > getterState 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -7819,7 +7870,7 @@ import { Component, Input } from \\"@angular/core\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -7858,7 +7909,7 @@ import { CommonModule } from \\"@angular/common\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -7892,7 +7943,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -7920,7 +7971,7 @@ exports[`Angular > jsx > Javascript Test > importRaw 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -7945,7 +7996,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -7980,7 +8031,7 @@ exports[`Angular > jsx > Javascript Test > multipleOnUpdate 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -8012,7 +8063,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -8060,7 +8111,7 @@ exports[`Angular > jsx > Javascript Test > multipleOnUpdateWithDeps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -8105,7 +8156,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -8188,7 +8239,7 @@ exports[`Angular > jsx > Javascript Test > multipleSpreads 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -8268,7 +8319,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -8303,7 +8354,7 @@ exports[`Angular > jsx > Javascript Test > nativeAttributes 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -8335,7 +8386,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -8376,7 +8427,7 @@ exports[`Angular > jsx > Javascript Test > nestedShow 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -8414,7 +8465,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -8467,7 +8518,7 @@ exports[`Angular > jsx > Javascript Test > nestedStyles 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -8517,7 +8568,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -8557,7 +8608,7 @@ exports[`Angular > jsx > Javascript Test > onEvent 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -8594,7 +8645,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -8630,7 +8681,7 @@ exports[`Angular > jsx > Javascript Test > onInit & onMount 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -8667,7 +8718,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -8708,7 +8759,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -8742,7 +8793,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -8780,7 +8831,7 @@ exports[`Angular > jsx > Javascript Test > onMount 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -8815,7 +8866,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -8860,7 +8911,7 @@ exports[`Angular > jsx > Javascript Test > onMountMultiple 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -8902,7 +8953,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -8936,7 +8987,7 @@ exports[`Angular > jsx > Javascript Test > onUpdate 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -8967,7 +9018,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -9011,7 +9062,7 @@ exports[`Angular > jsx > Javascript Test > onUpdateWithDeps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -9052,7 +9103,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -9090,7 +9141,7 @@ exports[`Angular > jsx > Javascript Test > outputEventBinding 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -9131,7 +9182,7 @@ export const bar = () => {};
 export function run(value) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -9165,7 +9216,7 @@ export const bar = () => {};
 export function run(value) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -9190,7 +9241,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -9220,7 +9271,7 @@ exports[`Angular > jsx > Javascript Test > preserveTyping 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -9247,7 +9298,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -9282,7 +9333,7 @@ exports[`Angular > jsx > Javascript Test > propsDestructure 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -9314,7 +9365,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -9344,7 +9395,7 @@ exports[`Angular > jsx > Javascript Test > propsInterface 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -9371,7 +9422,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -9401,7 +9452,7 @@ exports[`Angular > jsx > Javascript Test > propsType 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -9428,7 +9479,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -9472,7 +9523,7 @@ exports[`Angular > jsx > Javascript Test > referencingFunInsideHook 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -9531,7 +9582,7 @@ import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-bl
 import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -9828,7 +9879,7 @@ import RenderComponent from \\"./render-component.js\\";
 import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -10101,7 +10152,7 @@ import {
 } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -10160,7 +10211,7 @@ import {
 import RenderBlocks from \\"@dummy/RenderBlocks.js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -10214,7 +10265,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -10325,7 +10376,7 @@ exports[`Angular > jsx > Javascript Test > rootFragmentMultiNode 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -10427,7 +10478,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -10458,7 +10509,7 @@ exports[`Angular > jsx > Javascript Test > rootShow 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -10486,12 +10537,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -10521,12 +10572,12 @@ exports[`Angular > jsx > Javascript Test > self-referencing component 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -10553,13 +10604,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -10589,13 +10640,13 @@ exports[`Angular > jsx > Javascript Test > self-referencing component with child
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -10622,7 +10673,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -10687,7 +10738,7 @@ exports[`Angular > jsx > Javascript Test > showExpressions 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -10749,7 +10800,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -10793,7 +10844,7 @@ exports[`Angular > jsx > Javascript Test > showWithFor 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -10834,7 +10885,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -10874,7 +10925,7 @@ exports[`Angular > jsx > Javascript Test > showWithOtherValues 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -10911,7 +10962,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -10944,7 +10995,7 @@ exports[`Angular > jsx > Javascript Test > showWithRootText 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -10974,7 +11025,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
@@ -11015,7 +11066,7 @@ exports[`Angular > jsx > Javascript Test > signalsOnUpdate 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
@@ -11053,7 +11104,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef, Renderer2 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11133,7 +11184,7 @@ exports[`Angular > jsx > Javascript Test > spreadAttrs 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11216,7 +11267,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11304,7 +11355,7 @@ exports[`Angular > jsx > Javascript Test > spreadNestedProps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -11383,7 +11434,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -11411,7 +11462,7 @@ exports[`Angular > jsx > Javascript Test > spreadProps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -11436,7 +11487,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -11490,7 +11541,7 @@ exports[`Angular > jsx > Javascript Test > stateInit 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -11541,7 +11592,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -11590,7 +11641,7 @@ exports[`Angular > jsx > Javascript Test > stateInitSequence 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -11636,7 +11687,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -11666,7 +11717,7 @@ exports[`Angular > jsx > Javascript Test > string-literal-store 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -11702,11 +11753,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -11765,11 +11816,11 @@ import { CommonModule } from '@angular/common';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`],standalone: true,imports: [CommonModule]
+      \`,styles: [\`:host { display: contents; }\`],standalone: true,imports: [CommonModule]
 })
 export default class StringLiteralStore {
 
@@ -11814,7 +11865,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -11852,7 +11903,7 @@ exports[`Angular > jsx > Javascript Test > styleClassAndCss 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -11887,7 +11938,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -11922,7 +11973,7 @@ exports[`Angular > jsx > Javascript Test > stylePropClassAndCss 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -11954,7 +12005,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -11984,7 +12035,7 @@ import { CommonModule } from \\"@angular/common\\";
 import Foo from \\"./foo-sub-component.js\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -12009,7 +12060,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -12058,7 +12109,7 @@ exports[`Angular > jsx > Javascript Test > svgComponent 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -12104,7 +12155,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -12147,7 +12198,7 @@ exports[`Angular > jsx > Javascript Test > twoForsTrackBy 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -12187,7 +12238,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -12217,7 +12268,7 @@ exports[`Angular > jsx > Javascript Test > typeDependency 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -12244,7 +12295,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -12278,7 +12329,7 @@ exports[`Angular > jsx > Javascript Test > use-style 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -12309,7 +12360,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -12346,7 +12397,7 @@ exports[`Angular > jsx > Javascript Test > use-style-and-css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -12380,7 +12431,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -12414,7 +12465,7 @@ exports[`Angular > jsx > Javascript Test > use-style-outside-component 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -12445,7 +12496,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -12520,7 +12571,7 @@ exports[`Angular > jsx > Javascript Test > useObjectWrapper 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -12592,7 +12643,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -12631,7 +12682,7 @@ exports[`Angular > jsx > Javascript Test > useTarget 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -12669,7 +12720,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -12707,7 +12758,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -12740,7 +12791,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
   \`,
@@ -12770,7 +12821,7 @@ exports[`Angular > jsx > Remove Internal mitosis package 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!</div>
   \`,
@@ -12807,7 +12858,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -12888,7 +12939,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -12964,7 +13015,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -13013,7 +13064,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -13066,7 +13117,7 @@ export const DEFAULT_VALUES = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       <input
@@ -13108,7 +13159,7 @@ exports[`Angular > jsx > Typescript Test > Basic 4`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-for-show-component, MyBasicForShowComponent\\",
+  selector: \\"my-basic-for-show-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -13152,7 +13203,7 @@ import { Component } from \\"@angular/core\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -13205,7 +13256,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       {{myService.method('hello') + name}} Hello! I can run in React, Vue,
@@ -13258,7 +13309,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -13305,7 +13356,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-on-mount-update-component, MyBasicOnMountUpdateComponent\\",
+  selector: \\"my-basic-on-mount-update-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -13344,7 +13395,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -13386,7 +13437,7 @@ exports[`Angular > jsx > Typescript Test > Basic Outputs 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -13425,7 +13476,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -13467,7 +13518,7 @@ exports[`Angular > jsx > Typescript Test > Basic Outputs Meta 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-outputs-component, MyBasicOutputsComponent\\",
+  selector: \\"my-basic-outputs-component\\",
   template: \`
     <div></div>
   \`,
@@ -13506,7 +13557,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -13534,7 +13585,7 @@ exports[`Angular > jsx > Typescript Test > BasicAttribute 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input autocapitalize=\\"on\\" autocomplete=\\"on\\" [attr.spellcheck]=\\"true\\" />
   \`,
@@ -13566,7 +13617,7 @@ type Props = {
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -13617,7 +13668,7 @@ type Props = {
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 @Component({
-  selector: \\"my-boolean-attribute, MyBooleanAttribute\\",
+  selector: \\"my-boolean-attribute\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"children\\">
@@ -13661,7 +13712,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -13707,7 +13758,7 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 import MyBasicComponent from \\"./basic.raw\\";
 
 @Component({
-  selector: \\"my-basic-child-component, MyBasicChildComponent\\",
+  selector: \\"my-basic-child-component\\",
   template: \`
     <div>
       <my-basic-component [id]=\\"dev\\"></my-basic-component>
@@ -13743,7 +13794,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -13794,7 +13845,7 @@ exports[`Angular > jsx > Typescript Test > BasicFor 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-for-component, MyBasicForComponent\\",
+  selector: \\"my-basic-for-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let person of names\\">
@@ -13846,7 +13897,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -13915,7 +13966,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-component, MyBasicRefComponent\\",
+  selector: \\"my-basic-ref-component\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"showInput\\">
@@ -13981,7 +14032,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -14021,7 +14072,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-ref-assignment-component, MyBasicRefAssignmentComponent\\",
+  selector: \\"my-basic-ref-assignment-component\\",
   template: \`
     <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
   \`,
@@ -14071,7 +14122,7 @@ export function usePrevious<T>(value: T) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -14129,7 +14180,7 @@ export function usePrevious<T>(value: T) {
 }
 
 @Component({
-  selector: \\"my-previous-component, MyPreviousComponent\\",
+  selector: \\"my-previous-component\\",
   template: \`
     <div>
       <h1>Now: {{count}} , before: {{this._prevCount}}</h1>
@@ -14181,7 +14232,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -14300,7 +14351,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -14417,7 +14468,7 @@ export interface ColumnProps {
 }
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -14503,7 +14554,7 @@ export interface ColumnProps {
 }
 
 @Component({
-  selector: \\"column, Column\\",
+  selector: \\"column\\",
   template: \`
     <div class=\\"builder-columns div\\">
       <ng-container *ngFor=\\"let column of columns; let index = index\\">
@@ -14578,7 +14629,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -14617,7 +14668,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-code, ContentSlotCode\\",
+  selector: \\"content-slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[testing]\\"></ng-content>
@@ -14664,7 +14715,7 @@ const defaultProps = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -14787,7 +14838,7 @@ const defaultProps = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"content-slot-jsx-code, ContentSlotJsxCode\\",
+  selector: \\"content-slot-jsx-code\\",
   template: \`
     <ng-container *ngIf=\\"slotReference\\">
       <div
@@ -14894,7 +14945,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -14986,7 +15037,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -15075,7 +15126,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -15167,7 +15218,7 @@ export interface CustomCodeProps {
 }
 
 @Component({
-  selector: \\"custom-code, CustomCode\\",
+  selector: \\"custom-code\\",
   template: \`
     <div
       #elem
@@ -15290,7 +15341,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -15706,7 +15757,7 @@ import {
 } from \\"@fake\\";
 
 @Component({
-  selector: \\"form-component, FormComponent\\",
+  selector: \\"form-component\\",
   template: \`
     <form
       [attr.validate]=\\"validate\\"
@@ -16099,7 +16150,7 @@ export interface ImageProps {
 }
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -16226,7 +16277,7 @@ export interface ImageProps {
 }
 
 @Component({
-  selector: \\"image, Image\\",
+  selector: \\"image\\",
   template: \`
     <div>
       <picture #pictureRef>
@@ -16331,7 +16382,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -16368,7 +16419,7 @@ exports[`Angular > jsx > Typescript Test > Image State 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"img-state-component, ImgStateComponent\\",
+  selector: \\"img-state-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
@@ -16428,7 +16479,7 @@ export interface ImgProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -16548,7 +16599,7 @@ export interface ImgProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"img-component, ImgComponent\\",
+  selector: \\"img-component\\",
   template: \`
     <img
       [ngStyle]=\\"{
@@ -16659,7 +16710,7 @@ export interface FormInputProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -16777,7 +16828,7 @@ export interface FormInputProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"form-input-component, FormInputComponent\\",
+  selector: \\"form-input-component\\",
   template: \`
     <input
       [attr.placeholder]=\\"placeholder\\"
@@ -16874,7 +16925,7 @@ import { Component } from \\"@angular/core\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -16912,7 +16963,7 @@ import { CommonModule } from \\"@angular/common\\";
 import FormInputComponent from \\"./input.raw\\";
 
 @Component({
-  selector: \\"stepper, Stepper\\",
+  selector: \\"stepper\\",
   template: \`
     <form-input-component
       name=\\"kingzez\\"
@@ -16950,7 +17001,7 @@ export interface RawTextProps {
 }
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -16989,7 +17040,7 @@ export interface RawTextProps {
 }
 
 @Component({
-  selector: \\"raw-text, RawText\\",
+  selector: \\"raw-text\\",
   template: \`
     <span
       [class]=\\"attributes?.class || attributes?.className\\"
@@ -17033,7 +17084,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -17138,7 +17189,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -17246,7 +17297,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-component, SectionComponent\\",
+  selector: \\"section-component\\",
   template: \`
     <section
       [ngStyle]=\\"maxWidth && typeof maxWidth === 'number' ? {
@@ -17344,7 +17395,7 @@ export interface SectionProps {
 }
 
 @Component({
-  selector: \\"section-state-component, SectionStateComponent\\",
+  selector: \\"section-state-component\\",
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
@@ -17456,7 +17507,7 @@ export interface FormSelectProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -17573,7 +17624,7 @@ export interface FormSelectProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"select-component, SelectComponent\\",
+  selector: \\"select-component\\",
   template: \`
     <select
       [attr.value]=\\"value\\"
@@ -17671,7 +17722,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -17705,7 +17756,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content><div class=\\"default-slot\\">Default content</div></ng-content>
@@ -17738,7 +17789,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -17776,7 +17827,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code>
@@ -17811,7 +17862,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -17847,7 +17898,7 @@ type Props = {
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <content-slot-code [slotTesting]=\\"<div>Hello</div>\\"></content-slot-code>
@@ -17878,7 +17929,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -17915,7 +17966,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"slot-code, SlotCode\\",
+  selector: \\"slot-code\\",
   template: \`
     <div>
       <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
@@ -17952,7 +18003,7 @@ type SmileReviewsProps = {
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -18071,7 +18122,7 @@ type SmileReviewsProps = {
 import { kebabCase, snakeCase } from \\"lodash\\";
 
 @Component({
-  selector: \\"smile-reviews, SmileReviews\\",
+  selector: \\"smile-reviews\\",
   template: \`
     <div [attr.data-user]=\\"name\\">
       <button (click)=\\"showReviewPrompt = true\\">Write a review</button>
@@ -18192,7 +18243,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -18287,7 +18338,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"submit-button, SubmitButton\\",
+  selector: \\"submit-button\\",
   template: \`
     <button type=\\"submit\\" #elRef0>{{text}}</button>
   \`,
@@ -18377,7 +18428,7 @@ export interface TextProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -18426,7 +18477,7 @@ export interface TextProps {
 import { Builder } from \\"@builder.io/sdk\\";
 
 @Component({
-  selector: \\"text, Text\\",
+  selector: \\"text\\",
   template: \`
     <div
       [attr.contentEditable]=\\"allowEditingText || undefined\\"
@@ -18477,7 +18528,7 @@ export interface TextareaProps {
 }
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -18584,7 +18635,7 @@ export interface TextareaProps {
 }
 
 @Component({
-  selector: \\"textarea, Textarea\\",
+  selector: \\"textarea\\",
   template: \`
     <textarea
       [attr.placeholder]=\\"placeholder\\"
@@ -18706,7 +18757,7 @@ export interface VideoProps {
 }
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -18852,7 +18903,7 @@ export interface VideoProps {
 }
 
 @Component({
-  selector: \\"video, Video\\",
+  selector: \\"video\\",
   template: \`
     <video
       preload=\\"none\\"
@@ -19225,7 +19276,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -19261,7 +19312,7 @@ exports[`Angular > jsx > Typescript Test > arrowFunctionInUseStore 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>Hello {{name}}</div>
   \`,
@@ -19301,7 +19352,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -19373,7 +19424,7 @@ exports[`Angular > jsx > Typescript Test > basicForNoTagReference 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-for-no-tag-ref-component, MyBasicForNoTagRefComponent\\",
+  selector: \\"my-basic-for-no-tag-ref-component\\",
   template: \`
     <ng-template #iconTemplate></ng-template>
     <ng-container
@@ -19440,7 +19491,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -19484,7 +19535,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -19525,7 +19576,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -19569,7 +19620,7 @@ export interface Props {
 }
 
 @Component({
-  selector: \\"my-basic-forward-ref-component, MyBasicForwardRefComponent\\",
+  selector: \\"my-basic-forward-ref-component\\",
   template: \`
     <div>
       <input
@@ -19605,8 +19656,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -19655,8 +19705,7 @@ exports[`Angular > jsx > Typescript Test > basicOnUpdateReturn 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector:
-    \\"my-basic-on-update-return-component, MyBasicOnUpdateReturnComponent\\",
+  selector: \\"my-basic-on-update-return-component\\",
   template: \`
     <div>Hello! {{name}}</div>
   \`,
@@ -19702,7 +19751,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -19735,7 +19784,7 @@ exports[`Angular > jsx > Typescript Test > class + ClassName + css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test2 test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -19765,7 +19814,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -19798,7 +19847,7 @@ exports[`Angular > jsx > Typescript Test > class + css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -19828,7 +19877,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -19861,7 +19910,7 @@ exports[`Angular > jsx > Typescript Test > className + css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -19898,7 +19947,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -19938,7 +19987,7 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 @Component({
-  selector: \\"class-name-code, ClassNameCode\\",
+  selector: \\"class-name-code\\",
   template: \`
     <div>
       <div class=\\"no binding\\">Without Binding</div>
@@ -19968,7 +20017,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -20006,7 +20055,7 @@ exports[`Angular > jsx > Typescript Test > classState 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div [class]=\\"classState + ' div'\\" [ngStyle]=\\"styleState\\">
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -20048,7 +20097,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -20089,7 +20138,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -20127,7 +20176,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -20169,7 +20218,7 @@ import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
 
 @Component({
-  selector: \\"component-with-context, ComponentWithContext\\",
+  selector: \\"component-with-context\\",
   template: \`
     <ng-container>
       <ng-container>{{foo.value}}</ng-container>
@@ -20201,7 +20250,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -20234,7 +20283,7 @@ import { CommonModule } from \\"@angular/common\\";
 import BuilderContext from \\"@dummy/context.js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div>setting context</div>
   \`,
@@ -20255,6 +20304,59 @@ export default class RenderContent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > customSelector 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > customSelector 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"not-my-component\\",
+  template: \`
+    <span>My selector shouldn't be my-component!</span>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class MyComponent {}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > defaultProps 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -20289,7 +20391,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -20427,7 +20529,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -20558,7 +20660,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -20691,7 +20793,7 @@ const defaultProps = {
 };
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"link\\">
@@ -20806,7 +20908,7 @@ const DEFAULT_VALUES: Props = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -20846,7 +20948,7 @@ const DEFAULT_VALUES: Props = {
 };
 
 @Component({
-  selector: \\"component-with-types, ComponentWithTypes\\",
+  selector: \\"component-with-types\\",
   template: \`
     <div>Hello {{name || DEFAULT_VALUES.name}}</div>
   \`,
@@ -20875,7 +20977,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -20920,7 +21022,7 @@ exports[`Angular > jsx > Typescript Test > dynamicComponent 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container
       *ngComponentOutlet=\\"
@@ -20969,7 +21071,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -21032,7 +21134,7 @@ exports[`Angular > jsx > Typescript Test > dynamicComponentWithEventArg 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-template #componentTemplate>hello</ng-template>
     <ng-container
@@ -21085,7 +21187,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -21123,7 +21225,7 @@ exports[`Angular > jsx > Typescript Test > expressionState 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{refToUse}}</div>
   \`,
@@ -21162,7 +21264,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -21210,7 +21312,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <div>
       <p>{{foo2}}</p>
@@ -21260,7 +21362,7 @@ import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -21306,7 +21408,7 @@ import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <render-block></render-block>
   \`,
@@ -21340,7 +21442,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -21368,7 +21470,7 @@ exports[`Angular > jsx > Typescript Test > importRaw 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-import-component, MyImportComponent\\",
+  selector: \\"my-import-component\\",
   template: \`
     <div>Testing which imports get excluded!</div>
   \`,
@@ -21393,7 +21495,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -21428,7 +21530,7 @@ exports[`Angular > jsx > Typescript Test > multipleOnUpdate 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"multiple-on-update, MultipleOnUpdate\\",
+  selector: \\"multiple-on-update\\",
   template: \`
     <div></div>
   \`,
@@ -21460,7 +21562,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -21508,7 +21610,7 @@ exports[`Angular > jsx > Typescript Test > multipleOnUpdateWithDeps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
+  selector: \\"multiple-on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -21559,7 +21661,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -21648,7 +21750,7 @@ exports[`Angular > jsx > Typescript Test > multipleSpreads 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -21728,7 +21830,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -21763,7 +21865,7 @@ exports[`Angular > jsx > Typescript Test > nativeAttributes 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [disabled]=\\"disabled\\" />
@@ -21800,7 +21902,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -21846,7 +21948,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container *ngIf=\\"!conditionB\\">
@@ -21884,7 +21986,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -21937,7 +22039,7 @@ exports[`Angular > jsx > Typescript Test > nestedStyles 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"nested-styles, NestedStyles\\",
+  selector: \\"nested-styles\\",
   template: \`
     <div class=\\"div\\">Hello world</div>
   \`,
@@ -21987,7 +22089,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -22027,7 +22129,7 @@ exports[`Angular > jsx > Typescript Test > onEvent 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"embed, Embed\\",
+  selector: \\"embed\\",
   template: \`
     <div class=\\"builder-embed\\" #elem><div>Test</div></div>
   \`,
@@ -22064,7 +22166,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -22100,7 +22202,7 @@ exports[`Angular > jsx > Typescript Test > onInit & onMount 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div></div>
   \`,
@@ -22141,7 +22243,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -22186,7 +22288,7 @@ export const defaultValues = {
 };
 
 @Component({
-  selector: \\"on-init, OnInit\\",
+  selector: \\"on-init\\",
   template: \`
     <div>Default name defined by parent {{name}}</div>
   \`,
@@ -22220,7 +22322,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -22258,7 +22360,7 @@ exports[`Angular > jsx > Typescript Test > onMount 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -22293,7 +22395,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -22338,7 +22440,7 @@ exports[`Angular > jsx > Typescript Test > onMountMultiple 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"comp, Comp\\",
+  selector: \\"comp\\",
   template: \`
     <div></div>
   \`,
@@ -22380,7 +22482,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -22414,7 +22516,7 @@ exports[`Angular > jsx > Typescript Test > onUpdate 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -22449,7 +22551,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -22497,7 +22599,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"on-update-with-deps, OnUpdateWithDeps\\",
+  selector: \\"on-update-with-deps\\",
   template: \`
     <div></div>
   \`,
@@ -22538,7 +22640,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -22576,7 +22678,7 @@ exports[`Angular > jsx > Typescript Test > outputEventBinding 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -22627,7 +22729,7 @@ export const bar = () => {};
 export function run<T>(value: T) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -22671,7 +22773,7 @@ export const bar = () => {};
 export function run<T>(value: T) {}
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div></div>
   \`,
@@ -22709,7 +22811,7 @@ export interface MyBasicComponentProps {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -22752,7 +22854,7 @@ export interface MyBasicComponentProps {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -22784,7 +22886,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -22824,7 +22926,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>
       <ng-content></ng-content>
@@ -22861,7 +22963,7 @@ interface Person {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -22896,7 +22998,7 @@ interface Person {
 }
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -22928,7 +23030,7 @@ type Person = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -22963,7 +23065,7 @@ type Person = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div>Hello! I can run in React, Vue, Solid, or Liquid! {{name}}</div>
   \`,
@@ -22990,7 +23092,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -23034,7 +23136,7 @@ exports[`Angular > jsx > Typescript Test > referencingFunInsideHook 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"on-update, OnUpdate\\",
+  selector: \\"on-update\\",
   template: \`
     <div></div>
   \`,
@@ -23105,7 +23207,7 @@ import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 import type { RepeatData } from \\"./types.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -23415,7 +23517,7 @@ import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
 import type { RepeatData } from \\"./types.js\\";
 
 @Component({
-  selector: \\"render-block, RenderBlock\\",
+  selector: \\"render-block\\",
   template: \`
     <ng-template #rendercomponenttagTemplate></ng-template>
     <ng-container *ngIf=\\"shouldWrap\\">
@@ -23696,7 +23798,7 @@ import {
 } from \\"@dummy/injection-js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -23763,7 +23865,7 @@ import {
 import RenderBlocks from \\"@dummy/RenderBlocks.js\\";
 
 @Component({
-  selector: \\"render-content, RenderContent\\",
+  selector: \\"render-content\\",
   template: \`
     <div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
       <render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
@@ -23825,7 +23927,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -23944,7 +24046,7 @@ export interface ButtonProps {
 }
 
 @Component({
-  selector: \\"button, Button\\",
+  selector: \\"button\\",
   template: \`
     <ng-container>
       <ng-container *ngIf=\\"link\\">
@@ -24050,7 +24152,7 @@ export interface RenderStylesProps {
 }
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -24085,7 +24187,7 @@ export interface RenderStylesProps {
 }
 
 @Component({
-  selector: \\"render-styles, RenderStyles\\",
+  selector: \\"render-styles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
     <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
@@ -24113,12 +24215,12 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -24148,12 +24250,12 @@ exports[`Angular > jsx > Typescript Test > self-referencing component 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce Wayne\\"></MyComponent>
+        <my-component name=\\"Bruce Wayne\\"></my-component>
       </ng-container>
     </div>
   \`,
@@ -24180,13 +24282,13 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -24216,13 +24318,13 @@ exports[`Angular > jsx > Typescript Test > self-referencing component with child
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       {{name}}
       <ng-content></ng-content>
       <ng-container *ngIf=\\"name === 'Batman'\\">
-        <MyComponent name=\\"Bruce\\"><div>Wayne</div></MyComponent>
+        <my-component name=\\"Bruce\\"><div>Wayne</div></my-component>
       </ng-container>
     </div>
   \`,
@@ -24254,7 +24356,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -24324,7 +24426,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">Content0</ng-container>
@@ -24391,7 +24493,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -24440,7 +24542,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"nested-show, NestedShow\\",
+  selector: \\"nested-show\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
       <ng-container
@@ -24485,7 +24587,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -24529,7 +24631,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-with-other-values, ShowWithOtherValues\\",
+  selector: \\"show-with-other-values\\",
   template: \`
     <div>
       <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
@@ -24570,7 +24672,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -24607,7 +24709,7 @@ interface Props {
 }
 
 @Component({
-  selector: \\"show-root-text, ShowRootText\\",
+  selector: \\"show-root-text\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
     <ng-container *ngIf=\\"!(conditionA)\\">
@@ -24646,7 +24748,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
@@ -24696,7 +24798,7 @@ type Props = {
 };
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
@@ -24740,7 +24842,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -24826,7 +24928,7 @@ exports[`Angular > jsx > Typescript Test > spreadAttrs 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -24910,7 +25012,7 @@ import {
 } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -24999,7 +25101,7 @@ exports[`Angular > jsx > Typescript Test > spreadNestedProps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input #elRef0 />
   \`,
@@ -25078,7 +25180,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -25106,7 +25208,7 @@ exports[`Angular > jsx > Typescript Test > spreadProps 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-basic-component, MyBasicComponent\\",
+  selector: \\"my-basic-component\\",
   template: \`
     <input />
   \`,
@@ -25131,7 +25233,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -25185,7 +25287,7 @@ exports[`Angular > jsx > Typescript Test > stateInit 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <div>{{asfas}}</div>
@@ -25236,7 +25338,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -25285,7 +25387,7 @@ exports[`Angular > jsx > Typescript Test > stateInitSequence 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <Comp
       [val]=\\"useObjectWrapper( val
@@ -25331,7 +25433,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -25361,7 +25463,7 @@ exports[`Angular > jsx > Typescript Test > string-literal-store 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"string-literal-store, StringLiteralStore\\",
+  selector: \\"string-literal-store\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -25397,11 +25499,11 @@ import { Component } from '@angular/core';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`]
+      \`,styles: [\`:host { display: contents; }\`]
 })
 export default class StringLiteralStore {
 
@@ -25460,11 +25562,11 @@ import { CommonModule } from '@angular/common';
 
 
 @Component({
-  selector: 'string-literal-store, StringLiteralStore',template: \`
+  selector: 'string-literal-store',template: \`
 
-        <div>{{'foo-bar'}}</div>
+      <div>{{'foo-bar'}}</div>
 
-        \`,styles: [\`:host { display: contents; }\`],standalone: true,imports: [CommonModule]
+      \`,styles: [\`:host { display: contents; }\`],standalone: true,imports: [CommonModule]
 })
 export default class StringLiteralStore {
 
@@ -25509,7 +25611,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -25547,7 +25649,7 @@ exports[`Angular > jsx > Typescript Test > styleClassAndCss 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div
       class=\\"builder-column div\\"
@@ -25582,7 +25684,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -25617,7 +25719,7 @@ exports[`Angular > jsx > Typescript Test > stylePropClassAndCss 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
+  selector: \\"style-prop-class-and-css\\",
   template: \`
     <div [ngStyle]=\\"attributes.style\\" [class]=\\"attributes.class + ' div'\\"></div>
   \`,
@@ -25649,7 +25751,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -25679,7 +25781,7 @@ import { CommonModule } from \\"@angular/common\\";
 import Foo from \\"./foo-sub-component.js\\";
 
 @Component({
-  selector: \\"sub-component, SubComponent\\",
+  selector: \\"sub-component\\",
   template: \`
     <foo></foo>
   \`,
@@ -25704,7 +25806,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -25753,7 +25855,7 @@ exports[`Angular > jsx > Typescript Test > svgComponent 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"svg-component, SvgComponent\\",
+  selector: \\"svg-component\\",
   template: \`
     <svg
       fill=\\"none\\"
@@ -25799,7 +25901,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -25842,7 +25944,7 @@ exports[`Angular > jsx > Typescript Test > twoForsTrackBy 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
@@ -25889,7 +25991,7 @@ export type TypeDependencyProps = {
 import type { Foo } from \\"./foo-type\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -25927,7 +26029,7 @@ import type { Foo } from \\"./foo-type\\";
 import type { Foo as Foo2 } from \\"./type-export.js\\";
 
 @Component({
-  selector: \\"type-dependency, TypeDependency\\",
+  selector: \\"type-dependency\\",
   template: \`
     <div>{{foo}}</div>
   \`,
@@ -25954,7 +26056,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -25988,7 +26090,7 @@ exports[`Angular > jsx > Typescript Test > use-style 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -26019,7 +26121,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -26056,7 +26158,7 @@ exports[`Angular > jsx > Typescript Test > use-style-and-css 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\" class=\\"button\\">Button</button>
   \`,
@@ -26090,7 +26192,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -26124,7 +26226,7 @@ exports[`Angular > jsx > Typescript Test > use-style-outside-component 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <button type=\\"button\\">Button</button>
   \`,
@@ -26155,7 +26257,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, Input } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -26230,7 +26332,7 @@ exports[`Angular > jsx > Typescript Test > useObjectWrapper 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <Comp
@@ -26302,7 +26404,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -26341,7 +26443,7 @@ exports[`Angular > jsx > Typescript Test > useTarget 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"use-target-component, UseTargetComponent\\",
+  selector: \\"use-target-component\\",
   template: \`
     <div>{{name}}</div>
   \`,
@@ -26379,7 +26481,7 @@ import { Component } from \\"@angular/core\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -26417,7 +26519,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { register } from \\"swiper/element/bundle\\";
 
 @Component({
-  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  selector: \\"my-basic-web-component\\",
   template: \`
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
       <swiper-slide>Slide 1</swiper-slide>
@@ -26450,7 +26552,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -26484,7 +26586,7 @@ exports[`Angular > svelte > Javascript Test > basic 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -26515,7 +26617,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -26593,7 +26695,7 @@ exports[`Angular > svelte > Javascript Test > bindGroup 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -26668,7 +26770,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -26698,7 +26800,7 @@ exports[`Angular > svelte > Javascript Test > bindProperty 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -26727,7 +26829,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -26763,7 +26865,7 @@ import { CommonModule } from \\"@angular/common\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -26794,7 +26896,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -26826,7 +26928,7 @@ exports[`Angular > svelte > Javascript Test > context 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -26855,7 +26957,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -26889,7 +26991,7 @@ exports[`Angular > svelte > Javascript Test > each 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -26920,7 +27022,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -26956,7 +27058,7 @@ exports[`Angular > svelte > Javascript Test > eventHandlers 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -26989,7 +27091,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -27019,7 +27121,7 @@ exports[`Angular > svelte > Javascript Test > html 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -27046,7 +27148,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -27084,7 +27186,7 @@ exports[`Angular > svelte > Javascript Test > ifElse 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -27119,7 +27221,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -27155,7 +27257,7 @@ import { CommonModule } from \\"@angular/common\\";
 import Button from \\"./Button.js\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -27186,7 +27288,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -27230,7 +27332,7 @@ exports[`Angular > svelte > Javascript Test > lifecycleHooks 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -27271,7 +27373,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -27308,7 +27410,7 @@ exports[`Angular > svelte > Javascript Test > reactive 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -27342,7 +27444,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -27388,7 +27490,7 @@ exports[`Angular > svelte > Javascript Test > reactiveWithFn 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -27431,7 +27533,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -27462,7 +27564,7 @@ exports[`Angular > svelte > Javascript Test > slots 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -27490,7 +27592,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -27526,7 +27628,7 @@ exports[`Angular > svelte > Javascript Test > style 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -27559,7 +27661,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -27595,7 +27697,7 @@ exports[`Angular > svelte > Javascript Test > textExpressions 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -27628,7 +27730,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -27662,7 +27764,7 @@ exports[`Angular > svelte > Typescript Test > basic 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input (input)=\\"name = $event.target.value\\" [attr.value]=\\"name\\" />
@@ -27693,7 +27795,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -27771,7 +27873,7 @@ exports[`Angular > svelte > Typescript Test > bindGroup 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input
@@ -27846,7 +27948,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -27876,7 +27978,7 @@ exports[`Angular > svelte > Typescript Test > bindProperty 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input [attr.value]=\\"value\\" />
   \`,
@@ -27905,7 +28007,7 @@ import { Component, Input } from \\"@angular/core\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -27941,7 +28043,7 @@ import { CommonModule } from \\"@angular/common\\";
 const defaultProps = {};
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input
       [class]=\\"\\\\\`form-input \\\\\${disabled ? 'disabled' : ''} \\\\\${focus ? 'focus' : ''}\\\\\`\\"
@@ -27972,7 +28074,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -28004,7 +28106,7 @@ exports[`Angular > svelte > Typescript Test > context 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>{{activeTab}}</div>
   \`,
@@ -28033,7 +28135,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -28067,7 +28169,7 @@ exports[`Angular > svelte > Typescript Test > each 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ul>
       <ng-container *ngFor=\\"let num of numbers\\">
@@ -28098,7 +28200,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -28134,7 +28236,7 @@ exports[`Angular > svelte > Typescript Test > eventHandlers 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button (click)=\\"log('hi')\\">Log</button>
@@ -28167,7 +28269,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -28197,7 +28299,7 @@ exports[`Angular > svelte > Typescript Test > html 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div [innerHTML]=\\"html\\"></div>
   \`,
@@ -28224,7 +28326,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -28262,7 +28364,7 @@ exports[`Angular > svelte > Typescript Test > ifElse 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
@@ -28297,7 +28399,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -28333,7 +28435,7 @@ import { CommonModule } from \\"@angular/common\\";
 import Button from \\"./Button.js\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <button type=\\"button\\" [disabled]=\\"disabled\\">
@@ -28364,7 +28466,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -28408,7 +28510,7 @@ exports[`Angular > svelte > Typescript Test > lifecycleHooks 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div></div>
   \`,
@@ -28449,7 +28551,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -28486,7 +28588,7 @@ exports[`Angular > svelte > Typescript Test > reactive 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input [attr.value]=\\"name\\" />
@@ -28520,7 +28622,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component, SimpleChanges } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -28566,7 +28668,7 @@ exports[`Angular > svelte > Typescript Test > reactiveWithFn 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <input type=\\"number\\" (input)=\\"a = $event.target.value\\" [attr.value]=\\"a\\" />
@@ -28609,7 +28711,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -28640,7 +28742,7 @@ exports[`Angular > svelte > Typescript Test > slots 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       <ng-content>default</ng-content>
@@ -28668,7 +28770,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -28704,7 +28806,7 @@ exports[`Angular > svelte > Typescript Test > style 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <input class=\\"form-input\\" />
   \`,
@@ -28737,7 +28839,7 @@ import { CommonModule } from \\"@angular/common\\";
 import { Component } from \\"@angular/core\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
@@ -28773,7 +28875,7 @@ exports[`Angular > svelte > Typescript Test > textExpressions 2`] = `
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
-  selector: \\"my-component, MyComponent\\",
+  selector: \\"my-component\\",
   template: \`
     <div>
       normal: {{a + b}}
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index d3f0752c10..965f0fc720 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -3870,8 +3870,6 @@ export default class StringLiteralStore extends LitElement {
 "
 `;
 
-exports[`Lit > jsx > Javascript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
-
 exports[`Lit > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -8450,8 +8448,6 @@ export default class StringLiteralStore extends LitElement {
 "
 `;
 
-exports[`Lit > jsx > Typescript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
-
 exports[`Lit > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 24fbc83739..9dbfef493a 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3152,17 +3152,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`Preact > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"',' expected. (16:13)
-  14 |
-  15 |   function StringLiteralStore(props) {
-> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  17 |
-  18 |
-  19 |"
-`;
-
 exports[`Preact > jsx > Javascript Test > styleClassAndCss 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -6978,17 +6967,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`Preact > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"',' expected. (16:13)
-  14 |
-  15 |   function StringLiteralStore(props:any) {
-> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  17 |
-  18 |
-  19 |"
-`;
-
 exports[`Preact > jsx > Typescript Test > styleClassAndCss 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 0db8209c81..444ac7fb8a 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4784,26 +4784,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`qwik > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"SyntaxError: ',' expected. (5:20)
-  3 | export const StringLiteralStore=component$((props)=>{const state=useStore({\\"foo-bar\\":123});
-  4 |
-> 5 | return (<div>{state.'foo-bar'}</div>)});
-    |                    ^
-  6 |
-  7 | export default StringLiteralStore;
-========================================================================
-import{Fragment,component$,h,useStore}from\\"@builder.io/qwik\\";
-
-export const StringLiteralStore=component$((props)=>{const state=useStore({\\"foo-bar\\":123});
-
-return (<div>{state.'foo-bar'}</div>)});
-
-export default StringLiteralStore;
-
-========================================================================"
-`;
-
 exports[`qwik > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
@@ -8479,26 +8459,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`qwik > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"SyntaxError: ',' expected. (5:20)
-  3 | export const StringLiteralStore=component$((props:any)=>{const state=useStore<any>({\\"foo-bar\\":123});
-  4 |
-> 5 | return (<div>{state.'foo-bar'}</div>)});
-    |                    ^
-  6 |
-  7 | export default StringLiteralStore;
-========================================================================
-import{Fragment,component$,h,useStore}from\\"@builder.io/qwik\\";
-
-export const StringLiteralStore=component$((props:any)=>{const state=useStore<any>({\\"foo-bar\\":123});
-
-return (<div>{state.'foo-bar'}</div>)});
-
-export default StringLiteralStore;
-
-========================================================================"
-`;
-
 exports[`qwik > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 6b2ad76f59..b7039cbbf6 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -4364,17 +4364,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`React Native > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"',' expected. (16:13)
-  14 |
-  15 |   function StringLiteralStore(props) {
-> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  17 |
-  18 |
-  19 |"
-`;
-
 exports[`React Native > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -9516,17 +9505,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`React Native > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"',' expected. (16:13)
-  14 |
-  15 |   function StringLiteralStore(props:any) {
-> 16 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  17 |
-  18 |
-  19 |"
-`;
-
 exports[`React Native > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 715160aa3b..a21a7e9b54 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3062,17 +3062,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`React > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"',' expected. (15:13)
-  13 |
-  14 |   function StringLiteralStore(props) {
-> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  16 |
-  17 |
-  18 |"
-`;
-
 exports[`React > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
@@ -6792,17 +6781,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`React > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"',' expected. (15:13)
-  13 |
-  14 |   function StringLiteralStore(props:any) {
-> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  16 |
-  17 |
-  18 |"
-`;
-
 exports[`React > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 27b9a47dc8..d5b1d312b9 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2807,17 +2807,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`RSC > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"',' expected. (15:13)
-  13 |
-  14 |   function StringLiteralStore(props) {
-> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  16 |
-  17 |
-  18 |"
-`;
-
 exports[`RSC > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
@@ -6266,17 +6255,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`RSC > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"',' expected. (15:13)
-  13 |
-  14 |   function StringLiteralStore(props:any) {
-> 15 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  16 |
-  17 |
-  18 |"
-`;
-
 exports[`RSC > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index a4462e2e95..1eb42a35c1 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -6384,28 +6384,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`Solid > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"',' expected. (15:11)
-  13 |
-  14 |
-> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
-     |           ^
-  16 |
-  17 |
-  18 |"
-`;
-
-exports[`Solid > jsx > Javascript Test > string-literal-store-kebab 2`] = `
-"',' expected. (15:11)
-  13 |
-  14 |
-> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
-     |           ^
-  16 |
-  17 |
-  18 |"
-`;
-
 exports[`Solid > jsx > Javascript Test > styleClassAndCss 1`] = `
 "function MyComponent(props) {
   return (
@@ -14090,28 +14068,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`Solid > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"',' expected. (15:11)
-  13 |
-  14 |
-> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
-     |           ^
-  16 |
-  17 |
-  18 |"
-`;
-
-exports[`Solid > jsx > Typescript Test > string-literal-store-kebab 2`] = `
-"',' expected. (15:11)
-  13 |
-  14 |
-> 15 | const [foo-bar, setFoo-bar] = createSignal(123)
-     |           ^
-  16 |
-  17 |
-  18 |"
-`;
-
 exports[`Solid > jsx > Typescript Test > styleClassAndCss 1`] = `
 "function MyComponent(props: any) {
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 066497ad5f..d37f1a2b4f 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -2811,8 +2811,6 @@ export default class StringLiteralStore {
 "
 `;
 
-exports[`Stencil > jsx > Javascript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
-
 exports[`Stencil > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -5900,8 +5898,6 @@ export default class StringLiteralStore {
 "
 `;
 
-exports[`Stencil > jsx > Typescript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
-
 exports[`Stencil > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index eefbcbc2cb..bc71cdbca9 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -2630,14 +2630,6 @@ exports[`Svelte > jsx > Javascript Test > string-literal-store 1`] = `
 <div>{foo}</div>"
 `;
 
-exports[`Svelte > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"unknown: Missing semicolon. (1:8)
-
-> 1 | let  foo-bar= 123
-    |         ^
-  2 |"
-`;
-
 exports[`Svelte > jsx > Javascript Test > styleClassAndCss 1`] = `
 "<script>
   function stringifyStyles(stylesObj) {
@@ -6035,14 +6027,6 @@ exports[`Svelte > jsx > Typescript Test > string-literal-store 1`] = `
 <div>{foo}</div>"
 `;
 
-exports[`Svelte > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"unknown: Missing semicolon. (1:8)
-
-> 1 | let  foo-bar= 123
-    |         ^
-  2 |"
-`;
-
 exports[`Svelte > jsx > Typescript Test > styleClassAndCss 1`] = `
 "<script lang=\\"ts\\">
   function stringifyStyles(stylesObj) {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 89254f8fed..8aaed01595 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3117,17 +3117,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`Taro > jsx > Javascript Test > string-literal-store-kebab 1`] = `
-"',' expected. (17:13)
-  15 |
-  16 |   function StringLiteralStore(props) {
-> 17 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  18 |
-  19 |
-  20 |"
-`;
-
 exports[`Taro > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -6938,17 +6927,6 @@ export default StringLiteralStore;
 "
 `;
 
-exports[`Taro > jsx > Typescript Test > string-literal-store-kebab 1`] = `
-"',' expected. (17:13)
-  15 |
-  16 |   function StringLiteralStore(props:any) {
-> 17 |   const [foo-bar, setFoo-bar] = useState(() => (123))
-     |             ^
-  18 |
-  19 |
-  20 |"
-`;
-
 exports[`Taro > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import * as React from \\"react\\";
 import { View } from \\"@tarojs/components\\";
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 0d9a49d675..5c3c782aaa 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -13911,8 +13911,6 @@ customElements.define(\\"string-literal-store\\", StringLiteralStore);
 "
 `;
 
-exports[`webcomponent > jsx > Javascript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
-
 exports[`webcomponent > jsx > Javascript Test > styleClassAndCss 1`] = `
 "/**
  * Usage:
@@ -28958,8 +28956,6 @@ customElements.define(\\"string-literal-store\\", StringLiteralStore);
 "
 `;
 
-exports[`webcomponent > jsx > Typescript Test > string-literal-store-kebab 1`] = `"unknown: Property property of MemberExpression expected node to be of a type [\\"Identifier\\",\\"PrivateName\\"] but instead got \\"StringLiteral\\""`;
-
 exports[`webcomponent > jsx > Typescript Test > styleClassAndCss 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/angular.test.ts b/packages/core/src/__tests__/angular.test.ts
index 317635095e..588e5b22fa 100644
--- a/packages/core/src/__tests__/angular.test.ts
+++ b/packages/core/src/__tests__/angular.test.ts
@@ -1,4 +1,4 @@
-import { componentToAngular } from '../generators/angular';
+import { componentToAngular } from '@/generators/angular';
 import { runTestsForTarget } from './test-generator';
 
 describe('Angular', () => {
diff --git a/packages/core/src/__tests__/data/angular/custom-selector.raw.tsx b/packages/core/src/__tests__/data/angular/custom-selector.raw.tsx
new file mode 100644
index 0000000000..7ac418d0c6
--- /dev/null
+++ b/packages/core/src/__tests__/data/angular/custom-selector.raw.tsx
@@ -0,0 +1,9 @@
+import { useMetadata } from '@builder.io/mitosis';
+
+useMetadata({
+  angular: { selector: 'not-my-component' },
+});
+
+export default function MyComponent() {
+  return <span>My selector shouldn't be my-component!</span>;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 91483c1704..3c19f76dc6 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -312,6 +312,7 @@ const IMPORT_TEST: Tests = {
 };
 
 const ANGULAR_TESTS: Tests = {
+  customSelector: getRawFile('./data/angular/custom-selector.raw.tsx'),
   nativeAttributes: getRawFile('./data/angular/native-attributes.raw.tsx'),
   outputEventBinding: getRawFile('./data/angular/output-event-bindings.raw.tsx'),
   dynamicComponent: getRawFile('./data/angular/dynamic-component.raw.tsx'),
diff --git a/packages/core/src/generators/angular/README.md b/packages/core/src/generators/angular/README.md
index aedd835f13..0730fb4b45 100644
--- a/packages/core/src/generators/angular/README.md
+++ b/packages/core/src/generators/angular/README.md
@@ -25,7 +25,9 @@ export type ComponentMetadata = {
     /* Mitosis uses `attr.XXX` as default see https://angular.io/guide/attribute-binding.
     If you want to skip adding `attr` as prefix you can use the 'nativeAttributes' array.
     An example would be `<input disabled>` which can be boolean. With `attr` it becomes a string, which is always true.  */
-    nativeAttributes: string[];
+    nativeAttributes?: string[];
+      /* Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component) */
+      selector?: string;
   };
     ...
 }
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index d18fb60e96..4e19b83b26 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -57,16 +57,23 @@ import {
 } from './types';
 
 const mappers: {
-  [key: string]: (root: MitosisComponent, json: MitosisNode, options: ToAngularOptions) => string;
+  [key: string]: (
+    root: MitosisComponent,
+    json: MitosisNode,
+    options: ToAngularOptions,
+    blockOptions: AngularBlockOptions,
+  ) => string;
 } = {
-  Fragment: (root, json, options) => {
+  Fragment: (root, json, options, blockOptions) => {
     return `<ng-container>${json.children
-      .map((item) => blockToAngular({ root, json: item, options }))
+      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
       .join('\n')}</ng-container>`;
   },
-  Slot: (root, json, options) => {
+  Slot: (root, json, options, blockOptions) => {
     const renderChildren = () =>
-      json.children?.map((item) => blockToAngular({ root, json: item, options })).join('\n');
+      json.children
+        ?.map((item) => blockToAngular({ root, json: item, options, blockOptions }))
+        .join('\n');
 
     return `<ng-content ${Object.entries({ ...json.bindings, ...json.properties })
       .map(([binding, value]) => {
@@ -220,7 +227,7 @@ const stringifyBinding =
       return ` #${code} `;
     } else if (
       (VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
-      !blockOptions.nativeAttributes.includes(keyToUse) &&
+      !blockOptions.nativeAttributes?.includes(keyToUse) &&
       !Object.values(BINDINGS_MAPPER).includes(keyToUse)
     ) {
       // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
@@ -305,7 +312,7 @@ export const blockToAngular = ({
   const childComponents = blockOptions?.childComponents || [];
 
   if (mappers[json.name]) {
-    return mappers[json.name](root, json, options);
+    return mappers[json.name](root, json, options, blockOptions);
   }
 
   if (isChildren({ node: json })) {
@@ -817,7 +824,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
     }
 
     const [forwardProp, hasPropRef] = getPropsRef(json, true);
-    const childComponents: string[] = [];
+    const childComponents: string[] = [json.name]; // a component can be recursively used in itself
     const propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
 
     json.imports.forEach(({ imports }) => {
@@ -943,11 +950,13 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
 
     // Preparing built in component metadata parameters
     const componentMetadata: Record<string, any> = {
-      selector: `'${kebabCase(json.name || 'my-component')}, ${json.name}'`,
+      selector: useMetadata?.angular?.selector
+        ? `'${useMetadata?.angular?.selector}'`
+        : `'${kebabCase(json.name || 'my-component')}'`,
       template: `\`
-        ${indent(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
-        ${indent(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
-        \``,
+      ${indent(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
+      ${indent(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
+      \``,
       ...(styles
         ? {
             styles: `[\`${indent(styles, 8)}\`]`,
diff --git a/packages/core/src/generators/angular/types.ts b/packages/core/src/generators/angular/types.ts
index 593f828d13..23ec467dc1 100644
--- a/packages/core/src/generators/angular/types.ts
+++ b/packages/core/src/generators/angular/types.ts
@@ -21,5 +21,6 @@ export const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions = {
 
 export interface AngularBlockOptions {
   childComponents?: string[];
-  nativeAttributes: string[]; // set by useMetadata (packages/core/src/types/metadata.ts)
+  nativeAttributes?: string[]; // set by useMetadata (packages/core/src/types/metadata.ts)
+  selector?: string; // set by useMetadata (packages/core/src/types/metadata.ts)
 }
diff --git a/packages/core/src/types/metadata.ts b/packages/core/src/types/metadata.ts
index ea10bfd44a..cea22f9b85 100644
--- a/packages/core/src/types/metadata.ts
+++ b/packages/core/src/types/metadata.ts
@@ -14,7 +14,9 @@ export type ComponentMetadata = {
   angular?: {
     /* Mitosis uses `attr.XXX` as default see https://angular.io/guide/attribute-binding. 
     If you want to skip some you can use the 'nativeAttributes'. */
-    nativeAttributes: string[];
+    nativeAttributes?: string[];
+    /* Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component) */
+    selector?: string;
   };
   qwik?: {
     component?: {
diff --git a/packages/docs/src/components/code-rotator.tsx b/packages/docs/src/components/code-rotator.tsx
index eb486c7797..24b7610d95 100644
--- a/packages/docs/src/components/code-rotator.tsx
+++ b/packages/docs/src/components/code-rotator.tsx
@@ -74,7 +74,7 @@ const angularOutput = `
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "my-component, MyComponent",
+  selector: "my-component",
   template: \`
     <div>
       <input