From 7d64cb4f6636ffef4c437af5aa9c7b5a7bbd8e62 Mon Sep 17 00:00:00 2001
From: sidmohanty11 <sidmohanty11@gmail.com>
Date: Thu, 9 May 2024 12:18:55 +0530
Subject: [PATCH] fix angular styles

---
 .../angular/src/components/dynamic-div.ts     |  4 ++++
 .../dynamic-renderer/dynamic-renderer.ts      | 22 +++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/sdks/overrides/angular/src/components/dynamic-div.ts b/packages/sdks/overrides/angular/src/components/dynamic-div.ts
index 62f658a34e8..e7edbcc216d 100644
--- a/packages/sdks/overrides/angular/src/components/dynamic-div.ts
+++ b/packages/sdks/overrides/angular/src/components/dynamic-div.ts
@@ -22,6 +22,10 @@ import { CommonModule } from '@angular/common';
   `,
   standalone: true,
   imports: [CommonModule],
+  styles: [
+    ':host { display: contents; }',
+    '.props-blocks-wrapper { display: flex; flex-direction: column; align-items: stretch; }',
+  ],
 })
 export default class DynamicDiv {
   @Input() attributes: any;
diff --git a/packages/sdks/overrides/angular/src/components/dynamic-renderer/dynamic-renderer.ts b/packages/sdks/overrides/angular/src/components/dynamic-renderer/dynamic-renderer.ts
index 6f607b4f66f..de00e0b2461 100644
--- a/packages/sdks/overrides/angular/src/components/dynamic-renderer/dynamic-renderer.ts
+++ b/packages/sdks/overrides/angular/src/components/dynamic-renderer/dynamic-renderer.ts
@@ -65,6 +65,7 @@ import { isEmptyElement } from './dynamic-renderer.helpers';
   `,
   standalone: true,
   imports: [CommonModule],
+  styles: [':host { display: contents; }'],
 })
 export default class DynamicRenderer {
   isEmptyElement = isEmptyElement;
@@ -114,6 +115,7 @@ export default class DynamicRenderer {
   selector: 'dynamic-image, DynamicImage',
   template: ` <img #v /> `,
   standalone: true,
+  styles: [':host { display: contents; }'],
 })
 export class DynamicImage {
   @Input() attributes!: any;
@@ -123,9 +125,9 @@ export class DynamicImage {
 
   constructor(private renderer: Renderer2) {}
 
-  ngAfterViewInit() {
-    const el = this.v.nativeElement;
-    if (this.attributes) {
+  ngOnChanges() {
+    const el = this.v && this.v.nativeElement;
+    if (el && this.attributes) {
       Object.keys(this.attributes).forEach((key) => {
         this.renderer.setAttribute(el, key, this.attributes[key] ?? '');
       });
@@ -137,6 +139,7 @@ export class DynamicImage {
   selector: 'dynamic-button, DynamicButton',
   template: ` <button #v><ng-content></ng-content></button>`,
   standalone: true,
+  styles: [':host { display: contents; }'],
 })
 export class DynamicButton {
   @Input() attributes!: any;
@@ -146,9 +149,9 @@ export class DynamicButton {
 
   constructor(private renderer: Renderer2) {}
 
-  ngAfterViewInit() {
-    const el = this.v.nativeElement;
-    if (this.attributes) {
+  ngOnChanges() {
+    const el = this.v && this.v.nativeElement;
+    if (el && this.attributes) {
       Object.keys(this.attributes).forEach((key) => {
         this.renderer.setAttribute(el, key, this.attributes[key] ?? '');
       });
@@ -160,6 +163,7 @@ export class DynamicButton {
   selector: 'dynamic-link, DynamicLink',
   template: ` <a #v><ng-content></ng-content></a>`,
   standalone: true,
+  styles: [':host { display: contents; }'],
 })
 export class DynamicLink {
   @Input() attributes!: any;
@@ -169,9 +173,9 @@ export class DynamicLink {
 
   constructor(private renderer: Renderer2) {}
 
-  ngAfterViewInit() {
-    const el = this.v.nativeElement;
-    if (this.attributes) {
+  ngOnChanges() {
+    const el = this.v && this.v.nativeElement;
+    if (el && this.attributes) {
       Object.keys(this.attributes).forEach((key) => {
         this.renderer.setAttribute(el, key, this.attributes[key] ?? '');
       });