bug(EJ2-4521): DropDown component's ng samples corrected.

Author: pipeline

src/autocomplete/default-plnkr.json

@@ -10,9 +10,30 @@ import { AutoCompleteComponent } from '@syncfusion/ej2-ng-dropdowns';
 export class DefaultAutoCompleteComponent {
     @ViewChild('sample')
     public AutoCompleteObj: AutoCompleteComponent;
-    public sportsData: string[] = ['Badminton', 'Basketball', 'Cricket',
-        'Football', 'Golf', 'Gymnastics',
-        'Hockey', 'Rugby', 'Snooker', 'Tennis'];
+    public sportsData: Object[] = [
+        { id: 'Game1', game: 'American Football' },
+        { id: 'Game2', game: 'Badminton' },
+        { id: 'Game3', game: 'Basketball' },
+        { id: 'Game4', game: 'Cricket' },
+        { id: 'Game5', game: 'Football' },
+        { id: 'Game6', game: 'Golf' },
+        { id: 'Game7', game: 'Hockey' },
+        { id: 'Game8', game: 'Rugby' },
+        { id: 'Game9', game: 'Snooker' },
+        { id: 'Game10', game: 'Tennis' }
+    ];
+    public fields: Object = { value: 'game' };
     public value: string = 'Basketball';
     public waterMark: string = 'e.g. Basketball';
+    public height: string = '250px';
+    public onChange(args: any): void {
+        let valueEle: HTMLInputElement = document.getElementsByClassName('e-input')[0] as HTMLInputElement;
+        let text: Element = document.getElementById('text');
+        if (this.AutoCompleteObj.value === "null" || this.AutoCompleteObj.value === null || this.AutoCompleteObj.value === "") {
+            valueEle.value = '';
+        }
+    }
+    ngAfterViewInit(e: any): void {
+        this.onChange(e);
+    }
 }

src/autocomplete/default.component.ts

@@ -1,8 +1,21 @@
 <div class="control-section">
-    <div class="col-lg-12  content-wrapper" style="height: 350px">
+    <div class="col-lg-8  content-wrapper" style="height: 350px">
         <div id='content' style="margin: 0 auto; width:250px; padding-top: 30px">
-            <ej-autocomplete id='games' #sample [dataSource]='sportsData' [value]='value'
-                [placeholder]='waterMark'></ej-autocomplete>
+            <ej-autocomplete id='games' #sample [dataSource]='sportsData' [(value)]='value'
+                [placeholder]='waterMark' [fields]='fields' (change)='onChange($event)'></ej-autocomplete>
+        </div>
+    </div>
+    <div class="col-lg-4 property-section">
+        <div class="property-panel-section">
+            <div class="property-panel-header">Properties</div>
+            <div class="property-panel-content">
+                <table id="property" title="Properties" style="width: 100%; margin:10px">
+                    <tr>
+                        <td style="padding:5px; width:25%">Value</td>
+                        <td>:<input type='text' id='values' [(ngModel)]='value' class='e-input' style='margin-left:10px; width:140px'/></td>
+                    </tr>
+                </table>
+            </div>
         </div>
     </div>
 </div>

src/autocomplete/default.html

@@ -1,5 +1,5 @@
 <div class="control-section">
-    <div id='content' style="margin: 0px auto; width:250px; padding-top: 40px;">
+    <div id='content' style="margin: 0px auto; width:300px; padding-top: 40px;">
         <ej-autocomplete id='employees' [dataSource]='data' [fields]='fields' [placeholder]='watermark'>
             <ng-template #headerTemplate>
                 <div class="head"> <span class="photo">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>

src/autocomplete/template-plnkr.json

@@ -31,6 +31,6 @@
     background: transparent;
 }
 
-.e-input-group.e-ddl .e-input-group-icon.e-spinner-icon {
-    border: none;
+.e-combobox .e-input-group.e-ddl .e-input-group-icon.e-spinner-icon {
+    border-left: 1px solid transparent;
 }

src/autocomplete/template.html

@@ -1,5 +1,5 @@
 <div class="control-section">
-    <div id='content' style="margin: 0px auto; width:250px; padding-top: 40px;">
+    <div id='content' style="margin: 0px auto; width:300px; padding-top: 40px;">
         <ej-combobox id='employees' [dataSource]='data' [fields]='fields' [popupHeight]='height' [placeholder]='watermark'>
             <ng-template #headerTemplate>
                 <div class="head"> <span class="photo">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>