Skip to content

Commit

Permalink
feat(igx-autocomplete): initial sample #3585
Browse files Browse the repository at this point in the history
  • Loading branch information
Lipata committed Jan 11, 2019
1 parent c76a18a commit 5ff6505
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ export class AppComponent implements OnInit {
};

componentLinks = [
{
link: '/autocomplete',
icon: 'account_circle',
name: 'Autocomplete'
},
{
link: '/avatar',
icon: 'account_circle',
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,11 @@ import { TreeGridFlatDataSampleComponent } from './tree-grid-flat-data/tree-grid
import { GridColumnPercentageWidthsSampleComponent } from './grid-percentage-columns/grid-percantge-widths.sample';
import { BannerSampleComponent } from './banner/banner.sample';
import { TreeGridWithTransactionsComponent } from './tree-grid/tree-grid-with-transactions.component';
import { AutocompleteSampleComponent } from './autocomplete/autocomplete.sample';

const components = [
AppComponent,
AutocompleteSampleComponent,
AvatartSampleComponent,
BadgeSampleComponent,
BannerSampleComponent,
Expand Down
5 changes: 5 additions & 0 deletions src/app/app.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,18 @@ import { TreeGridSampleComponent } from './tree-grid/tree-grid.sample';
import { TreeGridFlatDataSampleComponent } from './tree-grid-flat-data/tree-grid-flat-data.sample';
import { GridColumnPercentageWidthsSampleComponent } from './grid-percentage-columns/grid-percantge-widths.sample';
import { BannerSampleComponent } from './banner/banner.sample';
import { AutocompleteSampleComponent } from './autocomplete/autocomplete.sample';

const appRoutes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/avatar'
},
{
path: 'autocomplete',
component: AutocompleteSampleComponent
},
{
path: 'avatar',
component: AvatartSampleComponent
Expand Down
Empty file.
19 changes: 19 additions & 0 deletions src/app/autocomplete/autocomplete.sample.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<div class="sample-wrapper">
<app-page-header title="Autocomplete"></app-page-header>

<section class="sample-content">

<article class="sample-column">
<h4 class="sample-title">Autocomplete</h4>

<form class="input-sample" action="/" method="POST">
<h4 class="form-title igx-typography__overline">Personal Info</h4>

<igx-input-group>
<input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required [igxAutocomplete]='items'/>
<label igxLabel for="firstName">First Name</label>
</igx-input-group>
</form>
</article>
</section>
</div>
39 changes: 39 additions & 0 deletions src/app/autocomplete/autocomplete.sample.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-autocomplete-sample',
styleUrls: ['autocomplete.sample.css'],
templateUrl: `autocomplete.sample.html`
})
export class AutocompleteSampleComponent {
placeholder = 'Please enter a value';

user = {
comment: '',
firstName: 'John',
gender: 'Male',
lastName: 'Doe',
password: '1337s3cr3t',
registered: false,
subscribed: false
};

items;
itemsObj;

constructor() {
this.items = [
'Jambol',
'Topolovgrad',
'Kermen',
'Bolyarovo'
];

this.itemsObj = [
{ id: 1, name: 'Jambol'},
{ id: 2, name: 'Topolovgrad'},
{ id: 3, name: 'Kermen'},
{ id: 4, name: 'Bolyarovo'}
];
}
}
5 changes: 5 additions & 0 deletions src/app/routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,18 @@ import { TreeGridSampleComponent } from './tree-grid/tree-grid.sample';
import { TreeGridFlatDataSampleComponent } from './tree-grid-flat-data/tree-grid-flat-data.sample';
import { GridColumnPercentageWidthsSampleComponent } from './grid-percentage-columns/grid-percantge-widths.sample';
import { BannerSampleComponent } from './banner/banner.sample';
import { AutocompleteSampleComponent } from './autocomplete/autocomplete.sample';

const appRoutes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/avatar'
},
{
path: 'autocomplete',
component: AutocompleteSampleComponent
},
{
path: 'avatar',
component: AvatartSampleComponent
Expand Down
2 changes: 2 additions & 0 deletions src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import {
IgxAutocompleteModule,
IgxAvatarModule,
IgxBadgeModule,
IgxBottomNavModule,
Expand Down Expand Up @@ -39,6 +40,7 @@ import {
} from 'igniteui-angular';

const igniteModules = [
IgxAutocompleteModule,
IgxAvatarModule,
IgxBadgeModule,
IgxBottomNavModule,
Expand Down

0 comments on commit 5ff6505

Please sign in to comment.