fix(autosize): export md-autosize directive (#2432)

Closes #2419
angular · Jan 4, 2017 · f2d73da · f2d73da
1 parent 93b0bc9
commit f2d73da
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/src/demo-app/input/input-container-demo.html b/src/demo-app/input/input-container-demo.html
@@ -260,11 +260,11 @@ <h4>Textarea</h4>
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Textarea Autosize</md-toolbar>
   <md-card-content>
-    <textarea md-autosize class="demo-textarea"></textarea>
+    <textarea mdTextareaAutosize class="demo-textarea"></textarea>
     <div>
       <md-input-container>
         <textarea mdInput
-                  md-autosize
+                  mdTextareaAutosize
                   placeholder="Autosized textarea"></textarea>
       </md-input-container>
     </div>

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
@@ -178,5 +178,5 @@ <h4>Textarea</h4>
 
 <md-card>
   <h2>textarea autosize</h2>
-  <textarea md-autosize class="demo-textarea"></textarea>
+  <textarea mdTextareaAutosize class="demo-textarea"></textarea>
 </md-card>
diff --git a/src/lib/input/autosize.spec.ts b/src/lib/input/autosize.spec.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {MdInputModule} from './input';
@@ -97,6 +97,12 @@ describe('MdTextareaAutosize', () => {
     expect(parseInt(textarea.style.maxHeight))
         .toBeGreaterThan(previousMaxHeight, 'Expected increased max-height with maxRows increase.');
   });
+
+  it('should export the mdAutosize reference', () => {
+    expect(fixture.componentInstance.autosize).toBeTruthy();
+    expect(fixture.componentInstance.autosize.resizeToFitContent).toBeTruthy();
+  });
+
 });
 
 
@@ -109,17 +115,22 @@ const textareaStyleReset = `
     }`;
 
 @Component({
-  template: `<textarea md-autosize [minRows]="minRows" [maxRows]="maxRows">{{content}}</textarea>`,
+  template: `
+    <textarea mdTextareaAutosize [minRows]="minRows" [maxRows]="maxRows" 
+        #autosize="mdTextareaAutosize">
+      {{content}}
+    </textarea>`,
   styles: [textareaStyleReset],
 })
 class AutosizeTextAreaWithContent {
+  @ViewChild('autosize') autosize: MdTextareaAutosize;
   minRows: number = null;
   maxRows: number = null;
   content: string = '';
 }
 
 @Component({
-  template: `<textarea md-autosize [value]="value"></textarea>`,
+  template: `<textarea mdTextareaAutosize [value]="value"></textarea>`,
   styles: [textareaStyleReset],
 })
 class AutosizeTextAreaWithValue {

diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts
@@ -5,7 +5,8 @@ import {Directive, ElementRef, Input, OnInit} from '@angular/core';
  * Directive to automatically resize a textarea to fit its content.
  */
 @Directive({
-  selector: 'textarea[md-autosize], textarea[mat-autosize]',
+  selector: 'textarea[md-autosize], textarea[mat-autosize], textarea[mdTextareaAutosize]',
+  exportAs: 'mdTextareaAutosize',
   host: {
     '(input)': 'resizeToFitContent()',
     '[style.min-height]': '_minHeight',