Add hint message

src/angular.module.ts

@@ -1,13 +1,22 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { Select2 } from './angular';
+import { Select2, Select2Hint } from './angular';
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [Select2],
-    declarations: [Select2],
+    declarations: [
+        Select2Hint,
+        Select2
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        Select2Hint,
+        Select2
+    ]
 })
 export class Select2Module { }
 
 export * from './angular';
+export * from './common';

src/angular.template.html

@@ -22,6 +22,9 @@
                 </li>
             </ul>
         </div>
+        <div class="select2-subscript-wrapper">
+            <ng-content select="select2-hint"></ng-content>
+        </div>
     </div>
     <div [class]="dropdownStyle">
         <div class="select2-dropdown select2-dropdown--below">

src/angular.ts

@@ -1,6 +1,6 @@
 import {
-    Component, Input, Output, EventEmitter, ElementRef, ViewChild, Optional, Self, ChangeDetectorRef, ViewEncapsulation,
-    Attribute
+    Component, Directive, Input, Output, EventEmitter, ElementRef, ViewChild, Optional, Self, ChangeDetectorRef,
+    ViewEncapsulation, Attribute
 } from '@angular/core';
 import {
     FormGroupDirective, NgControl, NgForm, ControlValueAccessor
@@ -13,6 +13,9 @@ export * from './common';
 
 let nextUniqueId = 0;
 
+@Directive({ selector: 'select2-hint' })
+export class Select2Hint { }
+
 @Component({
     selector: 'select2',
     styleUrls: ['./select2.css'],

src/select2.less

@@ -552,6 +552,12 @@ select2.material {
       border: 0;
     }
   }
+
+  .select2-subscript-wrapper {
+    position: absolute;
+    top: calc(100% - 1.72917em);
+    font-size: 75%;
+  }
 }
 
 // material fix (firefox)