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: ` `, 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: ` `, 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: ` `, 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] ?? ''); });