(fuse/autogrow) BREAKING: Removed fuseAutogrow in favor of matTextareaAutosize since all of its problems solved, use [matTextareaAutosize] without any vertical padding on the textarea itself.

src/@fuse/directives/autogrow/autogrow.directive.ts

@@ -1,114 +0,0 @@
-import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Subject } from 'rxjs';
-
-@Directive({
-    selector: 'textarea[fuseAutogrow]',
-    exportAs: 'fuseAutogrow'
-})
-export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
-{
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    @Input('fuseAutogrowVerticalPadding') padding: number = 8;
-    @HostBinding('rows') private _rows: number = 1;
-
-    private _height: string = 'auto';
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _elementRef: ElementRef,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _ngZone: NgZone
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Host binding for component inline styles
-     */
-    @HostBinding('style') get styleList(): any
-    {
-        return {
-            'height'  : this._height,
-            'overflow': 'hidden',
-            'resize'  : 'none'
-        };
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Decorated methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resize on 'input' and 'ngModelChange' events
-     *
-     * @private
-     */
-    @HostListener('input')
-    @HostListener('ngModelChange')
-    private _resize(): void
-    {
-        // This doesn't need to trigger Angular's change detection by itself
-        this._ngZone.runOutsideAngular(() => {
-
-            setTimeout(() => {
-
-                // Set the height to 'auto' so we can correctly read the scrollHeight
-                this._height = 'auto';
-
-                // Detect the changes so the height is applied
-                this._changeDetectorRef.detectChanges();
-
-                // Get the scrollHeight and subtract the vertical padding
-                this._height = `${this._elementRef.nativeElement.scrollHeight - this.padding}px`;
-
-                // Detect the changes one more time to apply the final height
-                this._changeDetectorRef.detectChanges();
-            });
-        });
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On changes
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: SimpleChanges): void
-    {
-        // Padding
-        if ( 'fuseAutogrowVerticalPadding' in changes )
-        {
-            // Resize
-            this._resize();
-        }
-    }
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Resize for the first time
-        this._resize();
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-}

src/@fuse/directives/autogrow/autogrow.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseAutogrowDirective } from '@fuse/directives/autogrow/autogrow.directive';
-
-@NgModule({
-    declarations: [
-        FuseAutogrowDirective
-    ],
-    exports     : [
-        FuseAutogrowDirective
-    ]
-})
-export class FuseAutogrowModule
-{
-}

src/@fuse/directives/autogrow/index.ts

@@ -1 +0,0 @@
-export * from '@fuse/directives/autogrow/public-api';

src/@fuse/directives/autogrow/public-api.ts

@@ -1,2 +0,0 @@
-export * from '@fuse/directives/autogrow/autogrow.directive';
-export * from '@fuse/directives/autogrow/autogrow.module';

src/@fuse/styles/overrides/angular-material.scss

@@ -690,8 +690,8 @@
                     align-self: stretch;
                     min-height: 36px;
                     height: auto;
-                    margin: 10px 0;
+                    margin: 14px 0;
-                    padding: 4px 6px 4px 0 !important;
+                    padding: 0 6px 0 0;
                     transform: none;
                 }
 

src/app/modules/admin/apps/calendar/calendar.component.html

@@ -341,8 +341,8 @@
                                 <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
                                     <textarea
                                         matInput
-                                        cdkTextareaAutosize
+                                        matTextareaAutosize
-                                        [cdkAutosizeMinRows]="1"
+                                        [matAutosizeMinRows]="1"
                                         [formControlName]="'description'"
                                         [placeholder]="'Event description'">
                                     </textarea>

src/app/modules/admin/apps/chat/chat.module.ts

@@ -7,7 +7,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { SharedModule } from 'app/shared/shared.module';
 import { chatRoutes } from 'app/modules/admin/apps/chat/chat.routing';
 import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
@@ -35,7 +34,6 @@ import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.co
         MatInputModule,
         MatMenuModule,
         MatSidenavModule,
-        FuseAutogrowModule,
         SharedModule
     ]
 })

src/app/modules/admin/apps/contacts/contacts.module.ts

@@ -17,7 +17,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as moment from 'moment';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
@@ -49,7 +48,6 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
         MatSidenavModule,
         MatTableModule,
         MatTooltipModule,
-        FuseAutogrowModule,
         FuseFindByKeyPipeModule,
         SharedModule
     ],

src/app/modules/admin/apps/contacts/details/details.component.html

@@ -598,11 +598,11 @@
                                 [svgIcon]="'heroicons_solid:menu-alt-2'"></mat-icon>
                             <textarea
                                 matInput
-                                fuseAutogrow
-                                [rows]="5"
                                 [formControlName]="'notes'"
                                 [placeholder]="'Notes'"
-                                [spellcheck]="false"></textarea>
+                                [rows]="5"
+                                [spellcheck]="false"
+                                matTextareaAutosize></textarea>
                         </mat-form-field>
                     </div>
 

src/app/modules/admin/apps/help-center/support/support.component.html

@@ -74,11 +74,10 @@
                     <mat-form-field class="fuse-mat-textarea w-full">
                         <textarea
                             matInput
-                            [cdkTextareaAutosize]
-                            [cdkAutosizeMinRows]="5"
-                            [cdkAutosizeMaxRows]="5"
                             [formControlName]="'message'"
-                            [required]="true"></textarea>
+                            [required]="true"
+                            [rows]="5"
+                            matTextareaAutosize></textarea>
                         <mat-label>Message</mat-label>
                         <mat-error *ngIf="supportForm.get('message').hasError('required')">
                             Required

src/app/modules/admin/apps/notes/details/details.component.html

@@ -27,13 +27,13 @@
                     (input)="updateNoteDetails(note)">
             </div>
             <!-- Note -->
-            <div>
+            <div class="flex w-full py-5 px-2">
                 <textarea
-                    class="w-full my-2.5 p-2"
+                    class="w-full"
-                    fuseAutogrow
                     [placeholder]="'Note'"
                     [(ngModel)]="note.content"
-                    (input)="updateNoteDetails(note)"></textarea>
+                    (input)="updateNoteDetails(note)"
+                    matTextareaAutosize></textarea>
             </div>
             <!-- Tasks -->
             <ng-container *ngIf="note.tasks">

src/app/modules/admin/apps/notes/notes.module.ts

@@ -9,7 +9,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRippleModule } from '@angular/material/core';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseMasonryModule } from '@fuse/components/masonry';
 import { SharedModule } from 'app/shared/shared.module';
 import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
@@ -36,7 +35,6 @@ import { notesRoutes } from 'app/modules/admin/apps/notes/notes.routing';
         MatMenuModule,
         MatRippleModule,
         MatSidenavModule,
-        FuseAutogrowModule,
         FuseMasonryModule,
         SharedModule
     ]

src/app/modules/admin/apps/tasks/details/details.component.html

@@ -66,9 +66,9 @@
                 <mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
                 <textarea
                     matInput
-                    fuseAutogrow
                     [formControlName]="'title'"
                     [spellcheck]="false"
+                    matTextareaAutosize
                     #titleField></textarea>
             </mat-form-field>
         </div>
@@ -323,11 +323,10 @@
             <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                 <mat-label>Notes</mat-label>
                 <textarea
-                    class="leading-relaxed"
                     matInput
-                    fuseAutogrow
                     [formControlName]="'notes'"
-                    [spellcheck]="false"></textarea>
+                    [spellcheck]="false"
+                    matTextareaAutosize></textarea>
             </mat-form-field>
         </div>
 

src/app/modules/admin/apps/tasks/tasks.module.ts

@@ -18,7 +18,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as moment from 'moment';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { tasksRoutes } from 'app/modules/admin/apps/tasks/tasks.routing';
@@ -51,7 +50,6 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
         MatSelectModule,
         MatSidenavModule,
         MatTooltipModule,
-        FuseAutogrowModule,
         FuseFindByKeyPipeModule,
         SharedModule
     ],

src/app/modules/admin/docs/core-features/core-features.component.ts

@@ -96,12 +96,6 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
                 title   : 'Directives',
                 type    : 'group',
                 children: [
-                    {
-                        id   : 'core-features.directives.autogrow',
-                        title: 'Autogrow',
-                        type : 'basic',
-                        link : '/docs/core-features/directives/autogrow'
-                    },
                     {
                         id   : 'core-features.directives.scrollbar',
                         title: 'Scrollbar',

src/app/modules/admin/docs/core-features/core-features.module.ts

@@ -23,7 +23,6 @@ import { DrawerComponent } from 'app/modules/admin/docs/core-features/components
 import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
 import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
 import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
-import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
 import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
 import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
 import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
@@ -44,7 +43,6 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
         HighlightComponent,
         MasonryComponent,
         NavigationComponent,
-        AutogrowComponent,
         ScrollbarComponent,
         ScrollResetComponent,
         ConfigComponent,

src/app/modules/admin/docs/core-features/core-features.routing.ts

@@ -8,7 +8,6 @@ import { DrawerComponent } from 'app/modules/admin/docs/core-features/components
 import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
 import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
 import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
-import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
 import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
 import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
 import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
@@ -80,11 +79,7 @@ export const coreFeaturesRoutes: Route[] = [
                     {
                         path      : '',
                         pathMatch : 'full',
-                        redirectTo: 'autogrow'
+                        redirectTo: 'scrollbar'
-                    },
-                    {
-                        path     : 'autogrow',
-                        component: AutogrowComponent
                     },
                     {
                         path     : 'scrollbar',

src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.html

@@ -1,99 +0,0 @@
-<div class="flex flex-col flex-auto min-w-0">
-
-    <!-- Header -->
-    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
-        <div class="flex-1 min-w-0">
-            <!-- Breadcrumbs -->
-            <div class="flex flex-wrap items-center font-medium">
-                <div>
-                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
-                </div>
-                <div class="flex items-center ml-1 whitespace-nowrap">
-                    <mat-icon
-                        class="icon-size-5 text-secondary"
-                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
-                </div>
-                <div class="flex items-center ml-1 whitespace-nowrap">
-                    <mat-icon
-                        class="icon-size-5 text-secondary"
-                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <span class="ml-1 text-secondary">Directives</span>
-                </div>
-            </div>
-            <!-- Title -->
-            <div class="mt-2">
-                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
-                    Autogrow
-                </h2>
-            </div>
-        </div>
-        <button
-            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
-            mat-icon-button
-            (click)="toggleDrawer()">
-            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
-        </button>
-    </div>
-
-    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
-
-        <p>
-            <strong>fuseAutogrow</strong> is a <code>&lt;textarea&gt;</code> directive to make them automatically grow depending on their content. It's an alternative for
-            Angular Material's <strong>cdkTextareaAutosize</strong> directive with a more native and lightweight approach.
-        </p>
-        <p>
-            <strong>Exported as: </strong><code>fuseAutogrow</code>
-        </p>
-
-        <h2>Module</h2>
-        <textarea
-            fuse-highlight
-            lang="typescript">
-            import { FuseAutogrowModule } from '@fuse/directives/autogrow';
-        </textarea>
-
-        <h2>Usage</h2>
-        <p>
-            Here's the basic usage of the <code>fuseAutogrow</code>:
-        </p>
-        <!-- @formatter:off -->
-        <textarea fuse-highlight
-                  lang="html">
-            &lt;textarea fuseAutogrow
-                      [fuseAutogrowVerticalPadding]="12"&gt;
-                Content of the textarea
-            &lt;/textarea&gt;
-        </textarea>
-        <!-- @formatter:on -->
-
-        <h2>Properties</h2>
-        <div class="bg-card py-3 px-6 rounded shadow">
-            <table>
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Description</th>
-                        <th>Default</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
-                            <div>fuseAutogrowVerticalPadding: number</div>
-                        </td>
-                        <td>
-                            Padding of the textarea. Must be inline with textarea's padding style.
-                        </td>
-                        <td>
-                            <code class="whitespace-nowrap">8</code>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-    </div>
-
-</div>

src/app/modules/admin/docs/core-features/directives/autogrow/autogrow.component.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
-
-@Component({
-    selector   : 'autogrow',
-    templateUrl: './autogrow.component.html',
-    styles     : ['']
-})
-export class AutogrowComponent
-{
-    /**
-     * Constructor
-     */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle the drawer
-     */
-    toggleDrawer(): void
-    {
-        // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
-    }
-}

src/app/modules/admin/pages/profile/profile.component.html

@@ -541,9 +541,9 @@
                     <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                         <textarea
                             matInput
-                            cdkTextareaAutosize
+                            [placeholder]="'What\'s on your mind?'"
-                            [cdkAutosizeMinRows]="3"
+                            [rows]="3"
-                            placeholder="What's on your mind?"></textarea>
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -804,9 +804,9 @@
                             <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                                 <textarea
                                     matInput
-                                    cdkTextareaAutosize
+                                    [placeholder]="'Write a comment...'"
-                                    [cdkAutosizeMinRows]="3"
+                                    [rows]="3"
-                                    placeholder="Write a comment..."></textarea>
+                                    matTextareaAutosize></textarea>
                             </mat-form-field>
                         </div>
                         <div class="flex items-center mt-3 ml-auto -mr-3">

src/app/modules/admin/pages/settings/account/account.component.html

@@ -67,10 +67,10 @@
                 <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                     <mat-label>About</mat-label>
                     <textarea
+                        matInput
                         [formControlName]="'about'"
-                        [cdkTextareaAutosize]
+                        matTextareaAutosize
-                        cdkAutosizeMinRows="5"
+                        [matAutosizeMinRows]="5"></textarea>
-                        matInput></textarea>
                 </mat-form-field>
                 <div class="mt-1 text-md text-hint">Brief description for your profile. Basic HTML and Emoji are allowed.</div>
             </div>

src/app/modules/admin/pages/settings/settings.module.ts

@@ -9,7 +9,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { FuseAlertModule } from '@fuse/components/alert';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { SharedModule } from 'app/shared/shared.module';
 import { SettingsComponent } from 'app/modules/admin/pages/settings/settings.component';
 import { SettingsAccountComponent } from 'app/modules/admin/pages/settings/account/account.component';
@@ -39,7 +38,6 @@ import { settingsRoutes } from 'app/modules/admin/pages/settings/settings.routin
         MatSidenavModule,
         MatSlideToggleModule,
         FuseAlertModule,
-        FuseAutogrowModule,
         SharedModule
     ]
 })

src/app/modules/admin/ui/cards/cards.component.html

@@ -2176,9 +2176,9 @@
                     <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                         <textarea
                             matInput
-                            cdkTextareaAutosize
+                            [placeholder]="'What\'s on your mind?'"
-                            [cdkAutosizeMinRows]="3"
+                            [rows]="3"
-                            placeholder="What's on your mind?"></textarea>
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -2440,9 +2440,9 @@
                             <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                                 <textarea
                                     matInput
-                                    cdkTextareaAutosize
+                                    [rows]="3"
-                                    [cdkAutosizeMinRows]="3"
+                                    [placeholder]="'Write a comment...'"
-                                    placeholder="Write a comment..."></textarea>
+                                    matTextareaAutosize></textarea>
                             </mat-form-field>
                         </div>
                         <div class="flex items-center mt-3 ml-auto -mr-3">
@@ -4012,8 +4012,9 @@
                             <textarea
                                 class="leading-normal my-2"
                                 matInput
-                                cdkTextareaAutosize
+                                [placeholder]="'Write a comment...'"
-                                placeholder="Write a comment..."></textarea>
+                                matTextareaAutosize
+                                [rows]="3"></textarea>
                         </mat-form-field>
                     </div>
                     <div class="flex items-center mt-3 ml-auto -mr-3">

src/app/modules/admin/ui/forms/fields/fields.component.html

@@ -70,8 +70,8 @@
                         <mat-label>Address</mat-label>
                         <textarea
                             matInput
-                            cdkTextareaAutosize
+                            [rows]="3"
-                            cdkAutosizeMinRows="3"></textarea>
+                            matTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matSuffix
@@ -357,7 +357,7 @@
                         <mat-label>Textarea with autosize</mat-label>
                         <textarea
                             matInput
-                            fuseAutogrow></textarea>
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex">
@@ -367,7 +367,7 @@
                         <mat-label>Textarea with autosize, prefix & suffix</mat-label>
                         <textarea
                             matInput
-                            fuseAutogrow></textarea>
+                            matTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matPrefix
@@ -625,8 +625,8 @@
                         class="fuse-mat-textarea flex-auto">
                         <textarea
                             matInput
-                            fuseAutogrow
+                            [placeholder]="'Textarea with autosize'"
-                            [placeholder]="'Textarea with autosize'"></textarea>
+                            matTextareaAutosize></textarea>
                     </mat-form-field>
                 </div>
                 <div class="flex">
@@ -635,8 +635,8 @@
                         class="fuse-mat-textarea flex-auto">
                         <textarea
                             matInput
-                            fuseAutogrow
+                            [placeholder]="'Textarea with autosize, prefix & suffix'"
-                            [placeholder]="'Textarea with autosize, prefix & suffix'"></textarea>
+                            matTextareaAutosize></textarea>
                         <mat-icon
                             class="icon-size-5"
                             matPrefix

src/app/modules/admin/ui/forms/fields/fields.module.ts

@@ -11,7 +11,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatSelectModule } from '@angular/material/select';
-import { FuseAutogrowModule } from '@fuse/directives/autogrow';
 import { FuseHighlightModule } from '@fuse/components/highlight';
 import { SharedModule } from 'app/shared/shared.module';
 import { FormsFieldsComponent } from 'app/modules/admin/ui/forms/fields/fields.component';
@@ -40,7 +39,6 @@ export const routes: Route[] = [
         MatMenuModule,
         MatMomentDateModule,
         MatSelectModule,
-        FuseAutogrowModule,
         FuseHighlightModule,
         SharedModule
     ]