50 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | @import "node_modules/bootstrap/scss/functions";
2 |
3 | @import "node_modules/bootstrap/scss/variables";
4 |
5 | .example-spacer {
6 | flex: 1 1 auto;
7 | }
8 | .mat-toolbar {
9 | position: sticky;
10 | position: -webkit-sticky; /* For macOS/iOS Safari */
11 | top: 0; /* Sets the sticky toolbar to be on top */
12 | z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
13 | }
14 | .left-section {
15 | max-width: 250px !important;
16 | width: 250px !important;
17 | position: fixed;
18 | display: flex;
19 | height: calc(100vh - 64px);
20 | overflow: auto;
21 | border-right: 1px solid #ccc;
22 | }
23 | .center-section {
24 | max-width: initial !important;
25 | margin-left: 250px;
26 | padding-top: 10px;
27 | }
28 | .right-section {
29 | max-width: 300px !important;
30 | }
31 | .mat-grid-list {
32 | height: calc(100vh - 64px) !important;
33 | }
34 | .left-sidebar {
35 | position: fixed;
36 | top: 65px;
37 | height: calc(100vh - 75px);
38 | padding-right: 0px;
39 | overflow: hidden;
40 | }
41 | .left-sidebar, .right-sidebar {
42 | width: 260px;
43 | }
44 | .left-sidebar:hover {
45 | overflow: auto;
46 |
47 | }
48 |
49 | .outer-wrapper {
50 | padding: 30px;
51 | }
52 | .center-content{
53 | border-right: $border-width solid $gray-300;
54 | }
55 | @media (min-width: 768px) {
56 | .center-content {
57 | margin-left: 265px;
58 | }
59 | }
60 | .nav-sub{
61 | width: 100%;
62 | box-shadow: none;
63 | margin-bottom: 6px;
64 | padding: 0px;
65 | margin-top: 50px;
66 | }
67 | .nav-wrapper {
68 | padding: 0px 10px;
69 | }
70 | .list-group-item {
71 | padding-top: 0.5rem;
72 | padding-bottom: 0.5rem;
73 | }
74 |
75 |
76 |
77 | .sidebar {
78 | position: fixed;
79 | top: 0;
80 | /* rtl:raw:
81 | right: 0;
82 | */
83 | bottom: 0;
84 | /* rtl:remove */
85 | left: 0;
86 | z-index: 100; /* Behind the navbar */
87 | padding: 60px 0 0; /* Height of navbar */
88 | overflow: auto;
89 | width: 250px;
90 | border-right: $border-width solid $gray-300;
91 | }
92 |
93 | @media (max-width: 767.98px) {
94 | .sidebar {
95 | top: 5rem;
96 | }
97 | }
98 |
99 | .sidebar-sticky {
100 | position: relative;
101 | top: 0;
102 | height: calc(100vh - 48px);
103 | padding-top: .5rem;
104 | overflow-x: hidden;
105 | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
106 | }
107 |
108 | .sidebar .nav-link .feather {
109 | margin-right: 4px;
110 | color: #727272;
111 | }
112 |
113 | .sidebar .nav-link.active {
114 | color: #007bff;
115 | }
116 |
117 | .sidebar .nav-link:hover .feather,
118 | .sidebar .nav-link.active .feather {
119 | color: inherit;
120 | }
121 |
122 | .sidebar-heading {
123 | font-size: .75rem;
124 | text-transform: uppercase;
125 | }
126 | .center-content {
127 | margin-left: 250px !important;
128 | }
129 | .ad-container {
130 | flex: 0 0 300px;
131 | }
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { AppComponent } from './app.component';
5 |
6 | describe('AppComponent', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('should create the app', async(() => {
17 | const fixture = TestBed.createComponent(AppComponent);
18 | const app = fixture.debugElement.componentInstance;
19 | expect(app).toBeTruthy();
20 | }));
21 |
22 | it(`should have as title 'app works!'`, async(() => {
23 | const fixture = TestBed.createComponent(AppComponent);
24 | const app = fixture.debugElement.componentInstance;
25 | expect(app.title).toEqual('app works!');
26 | }));
27 |
28 | it('should render title in a h1 tag', async(() => {
29 | const fixture = TestBed.createComponent(AppComponent);
30 | fixture.detectChanges();
31 | const compiled = fixture.debugElement.nativeElement;
32 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
33 | }));
34 | });
35 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4 | import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
5 | import { MockService } from './examples/mock-data';
6 | import { AppComponent } from './app.component';
7 | import { AngularMultiSelectModule } from '../../projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component';
8 | import { AppRouterModule } from './app.router';
9 | import { BasicExample } from './examples/basic';
10 | import { SingleSelectionExample } from './examples/singleselection';
11 | import { GroupByExample } from './examples/groupBy';
12 | import { SearchFilterExample } from './examples/searchFilter';
13 | import { TemplatingExample } from './examples/templating';
14 | import { ResetDropdownExample } from './examples/resetdropdown';
15 | import { DisableModeExample } from './examples/disablemode';
16 | import {LimitSelectionExample } from './examples/limitselection';
17 | import {LimitBadgesExample } from './examples/limitbadges';
18 | import { CustomPlaceholderExample } from './examples/customplaceholder';
19 | import { StylingExample } from './examples/styling';
20 | import { ng2Gist } from './examples/gist';
21 | import { UsingWithFormExample } from './examples/usingWithForms';
22 | import { UsingWithReactiveFormExample } from './examples/usingInReactForms';
23 | import { LazyLoadingExample } from './examples/lazyLoading';
24 | import { MultipleDropdownsExample } from './examples/multipleDropdowns';
25 | import { DynamicDataSetsExample } from './examples/dynamicDataSets';
26 | import { ThemingExample } from './examples/theming';
27 | import { RemoteDataExample } from './examples/remoteData';
28 | import { CustomSearchExample } from './examples/customSearch';
29 | import { SearchFilterByOnePropertyExample } from './examples/searchByOneProperty';
30 | import {LazyLoadingRemoteDataExample } from './examples/lazyLoadingRemoteData';
31 | import {SearchFilterAddItemExample } from './examples/searchFilterAddNewItem';
32 | import { EventsExample } from './examples/events';
33 | import { HighlightModule } from 'ngx-highlightjs';
34 | import { UsingInListExample } from './examples/usingInList';
35 | import {SourceTab} from './components/sourcetab/sourcetab.component';
36 | import { ServiceWorkerModule } from '@angular/service-worker';
37 | import { environment } from '../environments/environment';
38 | import { CheckForUpdateService } from './check-for-update.service';
39 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
40 | import { DialogContentExampleDialog, UsingWithinDialog } from './examples/usingWithinDialog';
41 | import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
42 | import { AdsenseModule } from 'ng2-adsense';
43 |
44 | @NgModule({ declarations: [
45 | AppComponent,
46 | ng2Gist,
47 | BasicExample,
48 | SingleSelectionExample,
49 | GroupByExample,
50 | SearchFilterExample,
51 | TemplatingExample,
52 | ResetDropdownExample,
53 | DisableModeExample,
54 | LimitSelectionExample,
55 | LimitBadgesExample,
56 | CustomPlaceholderExample,
57 | StylingExample,
58 | UsingWithFormExample,
59 | UsingWithReactiveFormExample,
60 | LazyLoadingExample,
61 | MultipleDropdownsExample,
62 | DynamicDataSetsExample,
63 | ThemingExample,
64 | RemoteDataExample,
65 | CustomSearchExample,
66 | SearchFilterByOnePropertyExample,
67 | LazyLoadingRemoteDataExample,
68 | SearchFilterAddItemExample,
69 | EventsExample,
70 | UsingInListExample,
71 | SourceTab,
72 | DialogContentExampleDialog,
73 | UsingWithinDialog
74 | ],
75 | bootstrap: [AppComponent], imports: [BrowserModule.withServerTransition({ appId: 'serverApp' }),
76 | ReactiveFormsModule,
77 | FormsModule,
78 | AppRouterModule,
79 | AngularMultiSelectModule,
80 | AdsenseModule.forRoot(),
81 | NgbModule,
82 | HighlightModule,
83 | ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
84 | BrowserAnimationsModule], providers: [MockService, CheckForUpdateService, provideHttpClient(withInterceptorsFromDi())] })
85 | export class AppModule { }
86 |
--------------------------------------------------------------------------------
/src/app/app.prerender.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
3 |
4 | import { AppModule } from './app.module';
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | imports: [
9 | AppModule,
10 | ServerModule,
11 | ServerTransferStateModule
12 | ],
13 | bootstrap: [AppComponent]
14 | })
15 | export class AppPrerenderModule {
16 | }
--------------------------------------------------------------------------------
/src/app/app.server.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ServerModule } from '@angular/platform-server';
3 |
4 | import { AppModule } from './app.module';
5 | import { AppComponent } from './app.component';
6 | import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
7 |
8 | @NgModule({
9 | imports: [
10 | AppModule,
11 | ServerModule,
12 | ModuleMapLoaderModule,
13 | ],
14 | bootstrap: [AppComponent],
15 | })
16 | export class AppServerModule {}
17 |
--------------------------------------------------------------------------------
/src/app/check-for-update.service.ts:
--------------------------------------------------------------------------------
1 | import { ApplicationRef, Injectable } from '@angular/core';
2 | import { SwUpdate } from '@angular/service-worker';
3 | import { concat, interval } from 'rxjs';
4 | import { first } from 'rxjs/operators';
5 |
6 | @Injectable()
7 | export class CheckForUpdateService {
8 |
9 | constructor(appRef: ApplicationRef, updates: SwUpdate) {
10 | // Allow the app to stabilize first, before starting polling for updates with `interval()`.
11 | const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
12 | const everySixHours$ = interval(24* 60 * 60 * 1000);
13 | const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
14 |
15 | everySixHoursOnceAppIsStable$.subscribe(() => {
16 | console.log("checking for update");
17 | updates.checkForUpdate();
18 | });
19 | }
20 | }
--------------------------------------------------------------------------------
/src/app/components/sourcetab/sourcetab.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CuppaLabs/angular2-multiselect-dropdown/ec5c610ad65bf3d75f9fee8d000faecf026a0cd0/src/app/components/sourcetab/sourcetab.component.css
--------------------------------------------------------------------------------
/src/app/components/sourcetab/sourcetab.component.html:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/src/app/components/sourcetab/sourcetab.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit} from '@angular/core'
2 |
3 |
4 | @Component({
5 | selector: 'cuppa-source',
6 | templateUrl: './sourcetab.component.html',
7 | styleUrls: ['./sourcetab.component.css']
8 |
9 | })
10 | export class SourceTab implements OnInit {
11 | @Input()
12 | tstitle: string
13 |
14 | @Input()
15 | htmltitle: string
16 |
17 | @Input()
18 | csstitle: string
19 |
20 | @Input()
21 | tsgist: string
22 |
23 | @Input()
24 | htmlgist: string
25 |
26 | @Input()
27 | cssgist: string
28 |
29 | active = 1;
30 | constructor(){}
31 | ngOnInit(){
32 |
33 | }
34 | }
--------------------------------------------------------------------------------
/src/app/examples/basic.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { DropdownSettings } from 'projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.interface';
4 | @Component({
5 | templateUrl: './views/view.html'
6 | })
7 | export class BasicExample implements OnInit {
8 |
9 | itemList = [];
10 | selectedItems = [];
11 | settings: DropdownSettings = {};
12 |
13 | constructor(public seotitle: Title, public meta: Meta) {
14 | this.seotitle.setTitle('Basic example');
15 | this.meta.addTags([
16 | {name: 'description', content:'Basic example of angular multiselect drodown.'}
17 | ]);
18 | }
19 | ngOnInit() {
20 |
21 | this.itemList = [
22 | { "countryId": 1, "itemName": "India" },
23 | { "countryId": 2, "itemName": "Singapore" },
24 | { "countryId": 3, "itemName": "Australia" },
25 | { "countryId": 4, "itemName": "Canada" },
26 | { "countryId": 5, "itemName": "South Korea" },
27 | { "countryId": 6, "itemName": "Brazil" }
28 | ];
29 |
30 | this.selectedItems = [
31 | { "countryId": 1, "itemName": "India" },
32 | { "countryId": 2, "itemName": "Singapore" },
33 | { "countryId": 3, "itemName": "Australia" },
34 | { "countryId": 4, "itemName": "Canada" },
35 | { "countryId": 5, "itemName": "South Korea" }];
36 |
37 | this.settings = {
38 | text: "Select Countries",
39 | selectAllText: 'Select All',
40 | unSelectAllText: 'UnSelect All',
41 | classes: "myclass custom-class",
42 | primaryKey: "countryId",
43 | enableSearchFilter: true,
44 | tagToBody: true,
45 | };
46 | }
47 | onItemSelect(item: any) {
48 | console.log(item);
49 | console.log(this.selectedItems);
50 | }
51 | OnItemDeSelect(item: any) {
52 | console.log(item);
53 | console.log(this.selectedItems);
54 | }
55 | onSelectAll(items: any) {
56 | console.log(items);
57 | }
58 | onDeSelectAll(items: any) {
59 | console.log(items);
60 | }
61 | cssgist: boolean = false;
62 | title: string = "Basic example";
63 | tsgist: string = "CuppaLabs/ee72fbc7b21dad7e4e7664c5b1553235";
64 | htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8";
65 | tstitle: string = "basic.ts"
66 | htmltitle: string = "basic.html";
67 | }
68 |
--------------------------------------------------------------------------------
/src/app/examples/customSearch.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 |
4 | @Component({
5 | templateUrl: './views/customSearch.html'
6 | })
7 | export class CustomSearchExample implements OnInit {
8 |
9 | itemList: any = [];
10 | selectedItems = [];
11 | settings = {};
12 | filter = "";
13 | constructor(private http: HttpClient) { }
14 | ngOnInit() {
15 |
16 | this.settings = {
17 | text: "Select Countries",
18 | selectAllText: 'Select All',
19 | unSelectAllText: 'UnSelect All',
20 | classes: "myclass custom-class",
21 | primaryKey: "alpha3Code",
22 | labelKey: "name",
23 | noDataLabel: "Search Countries...",
24 | enableSearchFilter: true,
25 | searchBy: ['name', 'capital'],
26 | tagToBody: true,
27 | };
28 | }
29 | onItemSelect(item: any) {
30 | console.log(item);
31 | console.log(this.selectedItems);
32 | }
33 | OnItemDeSelect(item: any) {
34 | console.log(item);
35 | console.log(this.selectedItems);
36 | }
37 | onSelectAll(items: any) {
38 | console.log(items);
39 | }
40 | onDeSelectAll(items: any) {
41 | console.log(items);
42 | }
43 | onSearch(evt: any) {
44 | console.log(evt.target.value);
45 | this.itemList = [];
46 | this.http.get('https://restcountries.eu/rest/v2/name/'+evt.target.value+'?fulltext=true')
47 | .subscribe(res => {
48 | console.log(res);
49 | this.itemList = res;
50 | }, error => {
51 |
52 | });
53 | }
54 | onClose(){
55 | this.itemList = [];
56 | this.filter = "";
57 | }
58 | cssgist: boolean = false;
59 | title: string = "Custom Search / Search from API";
60 | tsgist: string = "CuppaLabs/1bab5ecbbb22727eb0afe49848a454f0";
61 | htmlgist: string = "CuppaLabs/7f0d8ea9f9cfe9eec2cc1699affd2c14";
62 | tstitle: string = "customSearch.ts"
63 | htmltitle: string = "customSearch.html";
64 | }
65 |
--------------------------------------------------------------------------------
/src/app/examples/customplaceholder.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './views/view.html'
5 | })
6 | export class CustomPlaceholderExample implements OnInit {
7 |
8 | itemList = [];
9 | selectedItems = [];
10 | settings = {};
11 |
12 | constructor() {
13 |
14 | }
15 | ngOnInit() {
16 |
17 |
18 | this.itemList = [
19 | { "id": 1, "itemName": "India" },
20 | { "id": 2, "itemName": "Singapore" },
21 | { "id": 3, "itemName": "Australia" },
22 | { "id": 4, "itemName": "Canada" },
23 | { "id": 5, "itemName": "South Korea" },
24 | { "id": 6, "itemName": "Brazil" }
25 | ];
26 |
27 | this.selectedItems = [
28 | { "id": 1, "itemName": "India" },
29 | { "id": 2, "itemName": "Singapore" },
30 | { "id": 3, "itemName": "Australia" },
31 | { "id": 4, "itemName": "Canada" }];
32 | this.settings = {
33 | text: "Select Countries",
34 | selectAllText: 'Select All',
35 | unSelectAllText: 'UnSelect All',
36 | enableSearchFilter: true,
37 | classes: "myclass custom-class",
38 | searchPlaceholderText: "Custom Placeholder text",
39 | tagToBody: true,
40 | };
41 | }
42 | onItemSelect(item: any) {
43 | console.log(item);
44 | console.log(this.selectedItems);
45 | }
46 | OnItemDeSelect(item: any) {
47 | console.log(item);
48 | console.log(this.selectedItems);
49 | }
50 | onSelectAll(items: any) {
51 | console.log(items);
52 | }
53 | onDeSelectAll(items: any) {
54 | console.log(items);
55 | }
56 | cssgist: boolean = false;
57 | title: string = "Custom search placeholder";
58 | tsgist: string = "CuppaLabs/48c087b6c0b4381d5bae1c689cc0ee3e";
59 | htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8";
60 | tstitle: string = "customPlaceholder.ts"
61 | htmltitle: string = "customPlaceholder.html";
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/examples/disablemode.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './views/disableMode.html'
5 | })
6 | export class DisableModeExample implements OnInit {
7 |
8 | itemList = [];
9 | selectedItems = [];
10 | settings: any = {};
11 |
12 | constructor() {
13 |
14 | }
15 | ngOnInit() {
16 |
17 |
18 | this.itemList = [
19 | { "id": 1, "itemName": "India" },
20 | { "id": 2, "itemName": "Singapore" },
21 | { "id": 3, "itemName": "Australia" },
22 | { "id": 4, "itemName": "Canada" },
23 | { "id": 5, "itemName": "South Korea" },
24 | { "id": 6, "itemName": "Brazil" }
25 | ];
26 |
27 | this.selectedItems = [
28 | { "id": 1, "itemName": "India" },
29 | { "id": 2, "itemName": "Singapore" },
30 | { "id": 3, "itemName": "Australia" },
31 | { "id": 4, "itemName": "Canada" }];
32 | this.settings = {
33 | text: "Select Countries",
34 | selectAllText: 'Select All',
35 | unSelectAllText: 'UnSelect All',
36 | enableSearchFilter: false,
37 | classes: "myclass custom-class",
38 | disabled: true,
39 | tagToBody: true
40 | };
41 | }
42 | onItemSelect(item: any) {
43 | console.log(item);
44 | console.log(this.selectedItems);
45 | }
46 | OnItemDeSelect(item: any) {
47 | console.log(item);
48 | console.log(this.selectedItems);
49 | }
50 | onSelectAll(items: any) {
51 | console.log(items);
52 | }
53 | onDeSelectAll(items: any) {
54 | console.log(items);
55 | }
56 | showModel() {
57 | console.log(this.selectedItems);
58 | }
59 | changeData() {
60 | this.selectedItems = [];
61 | }
62 | disable() {
63 | this.settings = {
64 | text: "Select Countries",
65 | selectAllText: 'Select All',
66 | unSelectAllText: 'UnSelect All',
67 | enableSearchFilter: false,
68 | classes: "myclass custom-class",
69 | disabled: true
70 | };
71 | }
72 | enable() {
73 | this.settings = {
74 | text: "Select Countries",
75 | selectAllText: 'Select All',
76 | unSelectAllText: 'UnSelect All',
77 | enableSearchFilter: false,
78 | classes: "myclass custom-class",
79 | disabled: false
80 | };
81 | }
82 | toggleDisable() {
83 | console.log(this.settings);
84 | this.settings = {
85 | text: "Select Countries",
86 | selectAllText: 'Select All',
87 | unSelectAllText: 'UnSelect All',
88 | enableSearchFilter: false,
89 | classes: "myclass custom-class",
90 | limitSelection: 2,
91 | disabled: false
92 | };
93 | }
94 | cssgist: boolean = false;
95 | title: string = "Disable mode";
96 | tsgist: string = "CuppaLabs/96f799302bdfa08e11b4420c86c1d720";
97 | htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8";
98 | tstitle: string = "disableMode.ts"
99 | htmltitle: string = "disableMode.html";
100 | }
101 |
--------------------------------------------------------------------------------
/src/app/examples/dynamicDataSets.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { MockService } from './mock-data';
3 |
4 | @Component({
5 | templateUrl: './views/dynamicData.html'
6 | })
7 | export class DynamicDataSetsExample implements OnInit {
8 |
9 | itemList = [];
10 | selectedItems = [];
11 | settings = {};
12 |
13 | constructor(private mockService: MockService) { }
14 | ngOnInit() {
15 |
16 | this.settings = {
17 | text: "Select Countries",
18 | selectAllText: 'Select All',
19 | unSelectAllText: 'UnSelect All',
20 | classes: "myclass custom-class",
21 | tagToBody: true
22 | };
23 | this.loadDataSet2();
24 | }
25 | onItemSelect(item: any) {
26 | console.log(item);
27 | console.log(this.selectedItems);
28 | }
29 | OnItemDeSelect(item: any) {
30 | console.log(item);
31 | console.log(this.selectedItems);
32 | }
33 | onSelectAll(items: any) {
34 | console.log(items);
35 | }
36 | onDeSelectAll(items: any) {
37 | console.log(items);
38 | }
39 | loadDataSet1() {
40 | this.settings = {
41 | text: "Select Fruits",
42 | selectAllText: 'Select All',
43 | unSelectAllText: 'UnSelect All',
44 | classes: "myclass custom-class"
45 | };
46 | this.selectedItems = [];
47 | this.itemList = [];
48 | const tempArr = this.mockService.getFruits();
49 | for (let i = 0; i < tempArr.length; ++i) {
50 | this.itemList.push(tempArr[i]);
51 | }
52 | }
53 | loadDataSet2() {
54 | this.settings = {
55 | text: "Select Countries",
56 | selectAllText: 'Select All',
57 | unSelectAllText: 'UnSelect All',
58 | classes: "myclass custom-class"
59 | };
60 | this.selectedItems = [];
61 | this.itemList = [];
62 | const tempArr = this.mockService.getCountries();
63 | for (let i = 0; i < tempArr.length; ++i) {
64 | this.itemList.push(tempArr[i]);
65 | }
66 | }
67 | cssgist: boolean = false;
68 | title: string = "Dynamic datasets loading";
69 | tsgist: string = "CuppaLabs/302d580f91bc40611b2474558d98fbf2";
70 | htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8";
71 | mockgist: string = "CuppaLabs/b3e947ec83710307a3b8680a2ff89693";
72 | tstitle: string = "dynamicData.ts"
73 | htmltitle: string = "dynamicData.html";
74 | mocktitle: string = "mock-data.ts";
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/examples/events.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './views/events.html'
5 | })
6 | export class EventsExample implements OnInit {
7 |
8 | itemList = [];
9 | selectedItems = [];
10 | settings = {};
11 | selectedItemString: string = '';
12 | unSelectedItemString: string = '';
13 | openString: string = '';
14 | closeString: string = '';
15 | selectAllString: string = '';
16 | unSelectAllString: string = '';
17 |
18 | constructor() { }
19 | ngOnInit() {
20 |
21 | this.itemList = [
22 | { "countryId": 1, "itemName": "India" },
23 | { "countryId": 2, "itemName": "Singapore" },
24 | { "countryId": 3, "itemName": "Australia" },
25 | { "countryId": 4, "itemName": "Canada" },
26 | { "countryId": 5, "itemName": "South Korea" },
27 | { "countryId": 6, "itemName": "Brazil" }
28 | ];
29 |
30 | this.selectedItems = [
31 | { "countryId": 1, "itemName": "India" },
32 | { "countryId": 2, "itemName": "Singapore" },
33 | { "countryId": 3, "itemName": "Australia" },
34 | { "countryId": 4, "itemName": "Canada" }];
35 |
36 | this.settings = {
37 | text: "Select Countries",
38 | selectAllText: 'Select All',
39 | unSelectAllText: 'UnSelect All',
40 | classes: "myclass custom-class",
41 | primaryKey: "countryId",
42 | tagToBody: true
43 | };
44 | }
45 | onItemSelect(item: any) {
46 | console.log(item);
47 | this.selectedItemString = JSON.stringify(item);
48 | console.log(this.selectedItems);
49 | }
50 | OnItemDeSelect(item: any) {
51 | console.log(item);
52 | this.unSelectedItemString = JSON.stringify(item);
53 | console.log(this.selectedItems);
54 | }
55 | onOpen(evt: any){
56 | this.openString = "Dropdown opened: "+evt;
57 | }
58 | onClose(evt: any){
59 | this.closeString = "Dropdown opened: "+evt;
60 | }
61 | onSelectAll(items: any) {
62 | console.log(items);
63 | this.selectAllString = JSON.stringify(items);
64 | this.unSelectAllString = "";
65 | }
66 | onDeSelectAll(items: any) {
67 | console.log(items);
68 | this.selectAllString = '';
69 | this.unSelectAllString = "all items un-selected";
70 | }
71 | cssgist: boolean = false;
72 | title: string = "Events";
73 | tsgist: string = "CuppaLabs/ee72fbc7b21dad7e4e7664c5b1553235";
74 | htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8";
75 | tstitle: string = "basic.ts"
76 | htmltitle: string = "basic.html";
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/examples/gist.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ng2-gist',
5 | template:`
6 |
7 | `,
8 | styleUrls: []
9 | })
10 |
11 | export class ng2Gist implements AfterViewInit {
12 | @ViewChild('iframe', {static: true}) iframe:ElementRef;
13 | @Input() gistId;
14 |
15 | constructor() { }
16 |
17 | ngAfterViewInit() {
18 | this.iframe.nativeElement.id = 'gist-' + this.gistId;
19 | let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentElement.contentWindow;
20 | let content = `
21 |
22 |
23 |
51 |
65 |
66 |
87 |
94 |
88 |
93 | Develop across all platforms
5 |Learn one way to build applications with Angular and reuse your code and abilities to build 6 | apps for any deployment target. For web, mobile web, native mobile and native desktop.
7 | 8 |Speed & Performance
9 |Achieve the maximum speed possible on the Web Platform today, and take it further, via Web 10 | Workers and server-side rendering. Angular puts you in control over scalability. Meet huge 11 | data requirements by building data models on RxJS, Immutable.js or another push-model.
12 | 13 |Incredible tooling
14 |Build features quickly with simple, declarative templates. Extend the template language with 15 | your own components and use a wide array of existing components. Get immediate Angular-specific 16 | help and feedback with nearly every IDE and editor. All this comes together so you can focus 17 | on building amazing apps rather than trying to make the code work.
18 | 19 |Loved by millions
20 |From prototype through global deployment, Angular delivers the productivity and scalable 21 | infrastructure that supports Google's largest applications.
22 | 23 |What is Angular?
24 | 25 |Angular is a platform that makes it easy to build applications with the web. Angular 26 | combines declarative templates, dependency injection, end to end tooling, and integrated 27 | best practices to solve development challenges. Angular empowers developers to build 28 | applications that live on the web, mobile, or the desktop
29 | 30 |Architecture overview
31 | 32 |Angular is a platform and framework for building client applications in HTML and TypeScript. 33 | Angular is itself written in TypeScript. It implements core and optional functionality as a 34 | set of TypeScript libraries that you import into your apps.
35 | 36 |The basic building blocks of an Angular application are NgModules, which provide a compilation 37 | context for components. NgModules collect related code into functional sets; an Angular app is 38 | defined by a set of NgModules. An app always has at least a root module that enables 39 | bootstrapping, and typically has many more feature modules.
40 | 41 |Components define views, which are sets of screen elements that Angular can choose among and 42 | modify according to your program logic and data. Every app has at least a root component.
43 | 44 |Components use services, which provide specific functionality not directly related to views. 45 | Service providers can be injected into components as dependencies, making your code modular, 46 | reusable, and efficient.
47 | 48 |Both components and services are simply classes, with decorators that mark their type and 49 | provide metadata that tells Angular how to use them.
50 | 51 |The metadata for a component class associates it with a template that defines a view. A 52 | template combines ordinary HTML with Angular directives and binding markup that allow Angular 53 | to modify the HTML before rendering it for display.
54 | 55 |The metadata for a service class provides the information Angular needs to make it available 56 | to components through Dependency Injection (DI).
57 | 58 |An app's components typically define many views, arranged hierarchically. Angular provides 59 | the Router service to help you define navigation paths among views. The router provides 60 | sophisticated in-browser navigational capabilities.
-------------------------------------------------------------------------------- /src/app/examples/views/disableMode.html: -------------------------------------------------------------------------------- 1 |10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/app/examples/views/groupBy.html:
--------------------------------------------------------------------------------
1 |
13 |
17 | On Select
14 | 16 |
18 |
22 | On Un-select
19 | 21 |
23 |
27 | On Open
24 | 26 |
28 |
32 | On Close
29 | 31 |
33 |
37 | On Select All
34 | 36 |
38 |
42 | On Un-Select All
39 | 41 |11 | Total Records : {{itemList.length}} 12 | -------------------------------------------------------------------------------- /src/app/examples/views/lazyLoadingRemoteData.html: -------------------------------------------------------------------------------- 1 |
12 | Total Records : {{itemList.length}} 13 | -------------------------------------------------------------------------------- /src/app/examples/views/multipledropdowns.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 7 |
8 |
19 |
20 |
21 | 4 | 7 |
8 |
22 |
23 |
24 |
25 | 28 |
29 |
40 |
41 |
--------------------------------------------------------------------------------
/src/app/examples/views/remoteData.html:
--------------------------------------------------------------------------------
1 | 25 | 28 |
29 |
23 | -------------------------------------------------------------------------------- /src/app/examples/views/searchFilter.html: -------------------------------------------------------------------------------- 1 |
13 |
14 | How this example works !!
15 |
16 | When you try to filter the list items, if no search results are 17 | available, you would see an 'Add' button. On clicking the add button, it 18 | would emit the text that you enter in the input field to your controlle 19 | in the callback method, as show in the below code. You can add this item 20 | to the data list. If you wish, that this item be selected, add it to 21 | selected items list. 22 |
--------------------------------------------------------------------------------
/src/app/examples/views/singleSelection.html:
--------------------------------------------------------------------------------
1 | 16 | When you try to filter the list items, if no search results are 17 | available, you would see an 'Add' button. On clicking the add button, it 18 | would emit the text that you enter in the input field to your controlle 19 | in the callback method, as show in the below code. You can add this item 20 | to the data list. If you wish, that this item be selected, add it to 21 | selected items list. 22 |
2 |
5 | Code
6 | 7 | -------------------------------------------------------------------------------- /src/app/examples/views/using-in-form.html: -------------------------------------------------------------------------------- 1 | 45 || 48 | | {{formModel.name}} | 49 |
| 52 | | {{formModel.email}} | 53 |
| 56 | |
57 | {{obj.itemName}}58 | |
59 |
Form status: {{ loginForm.form.status | json }}
63 | -------------------------------------------------------------------------------- /src/app/examples/views/using-in-react-form.html: -------------------------------------------------------------------------------- 1 | 44 || 47 | | {{userForm.value.name}} | 48 |
| 51 | | {{userForm.value.email}} | 52 |
| 55 | |
56 | {{obj.itemName}}57 | |
58 |
Form status: {{ userForm.status | json }}
62 | -------------------------------------------------------------------------------- /src/app/examples/views/usingInList.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
27 | {{customers | json}}
28 |
--------------------------------------------------------------------------------
/src/app/examples/views/usingWithinDialog.html:
--------------------------------------------------------------------------------
1 | | Customer | 6 |Countries | 7 |
|---|---|
| {{item.name}} | 12 |
13 | |
24 |
2 |
3 |
6 |
7 |
--------------------------------------------------------------------------------
/src/app/examples/views/view.html:
--------------------------------------------------------------------------------
1 |
2 |