6
6
* found in the LICENSE file at https://angular.io/license
7
7
*/
8
8
9
- import { Directive , ElementRef , Input , AfterViewInit , DoCheck } from '@angular/core' ;
9
+ import {
10
+ Directive ,
11
+ ElementRef ,
12
+ Input ,
13
+ AfterViewInit ,
14
+ DoCheck ,
15
+ OnDestroy ,
16
+ NgZone ,
17
+ } from '@angular/core' ;
10
18
import { Platform } from '@angular/cdk/platform' ;
19
+ import { fromEvent } from 'rxjs/observable/fromEvent' ;
20
+ import { auditTime } from 'rxjs/operators/auditTime' ;
21
+ import { takeUntil } from 'rxjs/operators/takeUntil' ;
22
+ import { Subject } from 'rxjs/Subject' ;
11
23
12
24
13
25
/**
@@ -22,9 +34,10 @@ import {Platform} from '@angular/cdk/platform';
22
34
'rows' : '1' ,
23
35
} ,
24
36
} )
25
- export class MatTextareaAutosize implements AfterViewInit , DoCheck {
37
+ export class MatTextareaAutosize implements AfterViewInit , DoCheck , OnDestroy {
26
38
/** Keep track of the previous textarea value to avoid resizing when the value hasn't changed. */
27
39
private _previousValue : string ;
40
+ private _destroyed = new Subject < void > ( ) ;
28
41
29
42
private _minRows : number ;
30
43
private _maxRows : number ;
@@ -47,7 +60,10 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
47
60
/** Cached height of a textarea with a single row. */
48
61
private _cachedLineHeight : number ;
49
62
50
- constructor ( private _elementRef : ElementRef , private _platform : Platform ) { }
63
+ constructor (
64
+ private _elementRef : ElementRef ,
65
+ private _platform : Platform ,
66
+ private _ngZone ?: NgZone ) { }
51
67
52
68
/** Sets the minimum height of the textarea as determined by minRows. */
53
69
_setMinHeight ( ) : void {
@@ -72,9 +88,22 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
72
88
ngAfterViewInit ( ) {
73
89
if ( this . _platform . isBrowser ) {
74
90
this . resizeToFitContent ( ) ;
91
+
92
+ if ( this . _ngZone ) {
93
+ this . _ngZone . runOutsideAngular ( ( ) => {
94
+ fromEvent ( window , 'resize' )
95
+ . pipe ( auditTime ( 16 ) , takeUntil ( this . _destroyed ) )
96
+ . subscribe ( ( ) => this . resizeToFitContent ( true ) ) ;
97
+ } ) ;
98
+ }
75
99
}
76
100
}
77
101
102
+ ngOnDestroy ( ) {
103
+ this . _destroyed . next ( ) ;
104
+ this . _destroyed . complete ( ) ;
105
+ }
106
+
78
107
/** Sets a style property on the textarea element. */
79
108
private _setTextareaStyle ( property : string , value : string ) : void {
80
109
const textarea = this . _elementRef . nativeElement as HTMLTextAreaElement ;
@@ -132,8 +161,12 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
132
161
}
133
162
}
134
163
135
- /** Resize the textarea to fit its content. */
136
- resizeToFitContent ( ) {
164
+ /**
165
+ * Resize the textarea to fit its content.
166
+ * @param force Whether to force a height recalculation. By default the height will be
167
+ * recalculated only if the value changed since the last call.
168
+ */
169
+ resizeToFitContent ( force = false ) {
137
170
this . _cacheTextareaLineHeight ( ) ;
138
171
139
172
// If we haven't determined the line-height yet, we know we're still hidden and there's no point
@@ -146,7 +179,7 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
146
179
const value = textarea . value ;
147
180
148
181
// Only resize of the value changed since these calculations can be expensive.
149
- if ( value === this . _previousValue ) {
182
+ if ( value === this . _previousValue && ! force ) {
150
183
return ;
151
184
}
152
185
0 commit comments