fix[angular-gen2]: update selector to builder-content (#3576)

## Description "content" has been introduced as an HTMLElement in Angular v18. So we are moving away from "content" as a selector to "builder-content" Jira https://builder-io.atlassian.net/browse/ENG-6887 _Screenshot_ If relevant, add a screenshot or two of the changes you made.
BuilderIO · Sep 25, 2024 · 8bfd467 · 8bfd467
1 parent 67acd97
commit 8bfd467
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 10 deletions.
diff --git a/.changeset/three-drinks-boil.md b/.changeset/three-drinks-boil.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-angular": patch
+---
+
+Fix: update exported selector to `builder-content` to fix usage of Content component in Angular v18
diff --git a/packages/sdks/e2e/angular-ssr/src/app/catch-all.component.ts b/packages/sdks/e2e/angular-ssr/src/app/catch-all.component.ts
@@ -18,15 +18,15 @@ interface BuilderProps {
   selector: 'catch-all-route',
   template: `
     <ng-container *ngIf="content; else notFound">
-      <content
+      <builder-content
         [model]="model"
         [content]="content"
         [apiKey]="apiKey"
         [trustedHosts]="trustedHosts"
         [canTrack]="canTrack"
         [customComponents]="customComponents"
         [data]="data"
-      ></content>
+      ></builder-content>
     </ng-container>
 
     <ng-template #notFound>

diff --git a/packages/sdks/e2e/angular/src/app/app.component.ts b/packages/sdks/e2e/angular/src/app/app.component.ts
@@ -21,15 +21,15 @@ interface BuilderProps {
   selector: 'app-root',
   template: `
     <ng-container *ngIf="content; else notFound">
-      <content
+      <builder-content
         [model]="model"
         [content]="content"
         [apiKey]="apiKey"
         [trustedHosts]="trustedHosts"
         [canTrack]="canTrack"
         [customComponents]="customComponents"
         [data]="data"
-      ></content>
+      ></builder-content>
     </ng-container>
 
     <ng-template #notFound>

diff --git a/packages/sdks/output/angular/README.md b/packages/sdks/output/angular/README.md
@@ -21,7 +21,7 @@ import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-angular';
   selector: 'app-catchall',
   template: `
     <ng-container *ngIf="content; else notFound">
-      <content [model]="model" [content]="content" [apiKey]="apiKey"></content>
+      <builder-content [model]="model" [content]="content" [apiKey]="apiKey"></builder-content>
     </ng-container>
 
     <ng-template #notFound>

diff --git a/packages/sdks/snippets/angular-ssr/src/app/announcement-bar/announcement-bar.component.ts b/packages/sdks/snippets/angular-ssr/src/app/announcement-bar/announcement-bar.component.ts
@@ -12,7 +12,11 @@ import { type BuilderContent } from '@builder.io/sdk-angular';
   selector: 'app-announcement-bar',
   template: `
     <ng-container *ngIf="content">
-      <content [model]="model" [content]="content" [apiKey]="apiKey"></content>
+      <builder-content
+        [model]="model"
+        [content]="content"
+        [apiKey]="apiKey"
+      ></builder-content>
     </ng-container>
 
     <!-- Your content coming from your app (or also Builder) -->

diff --git a/packages/sdks/snippets/angular-ssr/src/app/catch-all/catch-all.component.ts b/packages/sdks/snippets/angular-ssr/src/app/catch-all/catch-all.component.ts
@@ -11,7 +11,11 @@ import { type BuilderContent } from '@builder.io/sdk-angular';
   selector: 'app-catchall',
   template: `
     <ng-container *ngIf="content; else notFound">
-      <content [model]="model" [content]="content" [apiKey]="apiKey"></content>
+      <builder-content
+        [model]="model"
+        [content]="content"
+        [apiKey]="apiKey"
+      ></builder-content>
     </ng-container>
 
     <ng-template #notFound>

diff --git a/packages/sdks/snippets/angular/src/app/announcement-bar/announcement-bar.component.ts b/packages/sdks/snippets/angular/src/app/announcement-bar/announcement-bar.component.ts
@@ -11,7 +11,11 @@ import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-angular';
   selector: 'app-announcement-bar',
   template: `
     <ng-container *ngIf="content">
-      <content [model]="model" [content]="content" [apiKey]="apiKey"></content>
+      <builder-content
+        [model]="model"
+        [content]="content"
+        [apiKey]="apiKey"
+      ></builder-content>
     </ng-container>
 
     <!-- Your content coming from your app (or also Builder) -->

diff --git a/packages/sdks/snippets/angular/src/app/catch-all/catch-all.component.ts b/packages/sdks/snippets/angular/src/app/catch-all/catch-all.component.ts
@@ -10,7 +10,11 @@ import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-angular';
   selector: 'app-catchall',
   template: `
     <ng-container *ngIf="content; else notFound">
-      <content [model]="model" [content]="content" [apiKey]="apiKey"></content>
+      <builder-content
+        [model]="model"
+        [content]="content"
+        [apiKey]="apiKey"
+      ></builder-content>
     </ng-container>
 
     <ng-template #notFound>

diff --git a/packages/sdks/src/components/content-variants/content-variants.lite.tsx b/packages/sdks/src/components/content-variants/content-variants.lite.tsx
@@ -28,7 +28,7 @@ useMetadata({
     setUseStoreFirst: true,
   },
   angular: {
-    selector: 'content, content-variants',
+    selector: 'builder-content, content-variants',
   },
 });