[sitecore-jss-angular] Fix default empty field components to not render unwanted wrapping HTML tags

CHANGELOG.md

@@ -16,6 +16,8 @@ Our versioning strategy is as follows:
 * `[templates/nextjs]` `[templates/react]` `[templates/angular]` `[templates/vue]` Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file ([#1875](https://github.com/Sitecore/jss/pull/1875))
 * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911))
 * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932))
+* `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937))
+
 
 ### 🎉 New Features & Improvements
 

packages/sitecore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
  * Default component that will be rendered in pages when image field is empty.
  */
 @Component({
-  selector: 'sc-default-empty-image-field-editing-placeholder',
+  selector: '[sc-default-empty-image-field-editing-placeholder]',
   template: `
     <img
       alt=""

packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
  * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields.
  */
 @Component({
-  selector: 'sc-default-empty-text-field-editing-placeholder',
-  template: '<span>[No text in field]</span>',
+  selector: '<span>[sc-default-empty-text-field-editing-placeholder]</span>',
+  template: '[No text in field]',
 })
 export class DefaultEmptyFieldEditingComponent {}