File tree Expand file tree Collapse file tree 2 files changed +15
-10
lines changed
src/cdk-experimental/deferred-content Expand file tree Collapse file tree 2 files changed +15
-10
lines changed Original file line number Diff line number Diff line change @@ -32,17 +32,25 @@ describe('DeferredContent', () => {
32
32
component . preserveContent . set ( true ) ;
33
33
} ) ;
34
34
35
- it ( 'creates the content when hidden .' , async ( ) => {
35
+ it ( 'does not create the content until first visible .' , async ( ) => {
36
36
collapsible . injector . get ( Collapsible ) . contentVisible . set ( false ) ;
37
37
await fixture . whenStable ( ) ;
38
- expect ( collapsible . nativeElement . innerText ) . toBe ( 'Lazy Content ' ) ;
38
+ expect ( collapsible . nativeElement . innerText ) . toBe ( '' ) ;
39
39
} ) ;
40
40
41
41
it ( 'creates the content when visible.' , async ( ) => {
42
42
collapsible . injector . get ( Collapsible ) . contentVisible . set ( true ) ;
43
43
await fixture . whenStable ( ) ;
44
44
expect ( collapsible . nativeElement . innerText ) . toBe ( 'Lazy Content' ) ;
45
45
} ) ;
46
+
47
+ it ( 'does not remove the content when hidden.' , async ( ) => {
48
+ collapsible . injector . get ( Collapsible ) . contentVisible . set ( true ) ;
49
+ await fixture . whenStable ( ) ;
50
+ collapsible . injector . get ( Collapsible ) . contentVisible . set ( false ) ;
51
+ await fixture . whenStable ( ) ;
52
+ expect ( collapsible . nativeElement . innerText ) . toBe ( 'Lazy Content' ) ;
53
+ } ) ;
46
54
} ) ;
47
55
} ) ;
48
56
Original file line number Diff line number Diff line change 7
7
*/
8
8
9
9
import {
10
+ afterRenderEffect ,
10
11
Directive ,
11
- effect ,
12
12
inject ,
13
13
input ,
14
14
TemplateRef ,
@@ -21,7 +21,7 @@ import {
21
21
*/
22
22
@Directive ( )
23
23
export class DeferredContentAware {
24
- contentVisible = signal ( false ) ;
24
+ readonly contentVisible = signal ( false ) ;
25
25
readonly preserveContent = input ( false ) ;
26
26
}
27
27
@@ -48,16 +48,13 @@ export class DeferredContent {
48
48
private _isRendered = false ;
49
49
50
50
constructor ( ) {
51
- effect ( ( ) => {
52
- if (
53
- this . _deferredContentAware . preserveContent ( ) ||
54
- this . _deferredContentAware . contentVisible ( )
55
- ) {
51
+ afterRenderEffect ( ( ) => {
52
+ if ( this . _deferredContentAware . contentVisible ( ) ) {
56
53
if ( this . _isRendered ) return ;
57
54
this . _viewContainerRef . clear ( ) ;
58
55
this . _viewContainerRef . createEmbeddedView ( this . _templateRef ) ;
59
56
this . _isRendered = true ;
60
- } else {
57
+ } else if ( ! this . _deferredContentAware . preserveContent ( ) ) {
61
58
this . _viewContainerRef . clear ( ) ;
62
59
this . _isRendered = false ;
63
60
}
You can’t perform that action at this time.
0 commit comments