|
1 | | -import{booleanAttribute,computed,Directive,effect,ElementRef,inject,input,Renderer2}from'@angular/core'; |
| 1 | +import{ |
| 2 | +afterRenderEffect, |
| 3 | +booleanAttribute, |
| 4 | +computed, |
| 5 | +Directive, |
| 6 | +ElementRef, |
| 7 | +inject, |
| 8 | +input, |
| 9 | +Renderer2 |
| 10 | +}from'@angular/core'; |
2 | 11 | import{Breakpoints,Colors}from'../coreui.types'; |
3 | 12 |
|
4 | 13 | @Directive({ |
@@ -109,17 +118,21 @@ export class TableDirective { |
109 | 118 | }asRecord<string,boolean>; |
110 | 119 | }); |
111 | 120 |
|
112 | | -readonly #responsiveWrapperEffect=effect(()=>{ |
113 | | -constresponsive=this.responsive(); |
114 | | -if(!!responsive){ |
115 | | -constnativeElement:HTMLElement=this.#hostElement.nativeElement; |
116 | | -constwrapper=this.#renderer.createElement('div'); |
117 | | -constclassName=responsive===true ?'table-responsive' :`table-responsive-${responsive}`; |
118 | | -this.#renderer.addClass(wrapper,className); |
119 | | -constparentNode=this.#renderer.parentNode(nativeElement); |
120 | | -this.#renderer.appendChild(parentNode,wrapper); |
121 | | -this.#renderer.insertBefore(parentNode,wrapper,nativeElement); |
122 | | -this.#renderer.appendChild(wrapper,nativeElement); |
| 121 | +readonly #responsiveWrapperEffect=afterRenderEffect({ |
| 122 | +// this fixes RuntimeError: NG0500: During hydration Angular expected <abc> but found <xyz>. |
| 123 | +// Find more at https://angular.dev/errors/NG0500 |
| 124 | +write:()=>{ |
| 125 | +constresponsive=this.responsive(); |
| 126 | +if(!!responsive){ |
| 127 | +constnativeElement:HTMLElement=this.#hostElement.nativeElement; |
| 128 | +constwrapper=this.#renderer.createElement('div'); |
| 129 | +constclassName=responsive===true ?'table-responsive' :`table-responsive-${responsive}`; |
| 130 | +this.#renderer.addClass(wrapper,className); |
| 131 | +constparentNode=this.#renderer.parentNode(nativeElement); |
| 132 | +this.#renderer.appendChild(parentNode,wrapper); |
| 133 | +this.#renderer.insertBefore(parentNode,wrapper,nativeElement); |
| 134 | +this.#renderer.appendChild(wrapper,nativeElement); |
| 135 | +} |
123 | 136 | } |
124 | 137 | }); |
125 | 138 | } |