+
+ Calcite Components Angular Example
+
+
+
+
+
+ The slider currently has a value of {{ sliderValue }}.
+
+ Clear
+
diff --git a/angular/src/app/app.component.spec.ts b/angular/src/app/app.component.spec.ts
index bea819e9..acccdd35 100644
--- a/angular/src/app/app.component.spec.ts
+++ b/angular/src/app/app.component.spec.ts
@@ -1,14 +1,14 @@
import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { CalciteComponentsModule } from '@esri/calcite-components-angular';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [RouterTestingModule],
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [CalciteComponentsModule],
declarations: [AppComponent]
- }).compileComponents();
- });
+ }).compileComponents()
+ );
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
@@ -16,18 +16,16 @@ describe('AppComponent', () => {
expect(app).toBeTruthy();
});
- it(`should have as title 'angular'`, () => {
+ it(`should have as title 'calcite-components-angular-example'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
- expect(app.title).toEqual('angular');
+ expect(app.title).toEqual('calcite-components-angular-example');
});
- it('should render title', () => {
+ it('should render calcite-loader with label', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('.content span')?.textContent).toContain(
- 'angular app is running!'
- );
+ expect(compiled.querySelector('calcite-loader')?.label).toBe('Loading...');
});
});
diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts
index 502f240c..29cd8960 100644
--- a/angular/src/app/app.component.ts
+++ b/angular/src/app/app.component.ts
@@ -1,57 +1,37 @@
-import { Component } from '@angular/core';
-
-// Calcite Components
-import '@esri/calcite-components/dist/components/calcite-icon';
-import '@esri/calcite-components/dist/components/calcite-combobox';
-import '@esri/calcite-components/dist/components/calcite-combobox-item';
-
+import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
-export class AppComponent {
- title: string = "Angular";
+export class AppComponent implements OnInit, OnDestroy {
+ title = 'calcite-components-angular-example';
+ sliderValue = 50;
- fields = [
- {
- "displayText": "Natural Resources",
- "value": "natural-resources"
- },
- {
- "displayText": "Agriculture",
- "value": "agriculture"
- },
- {
- "displayText": "Forestry",
- "value": "forestry"
- },
- {
- "displayText": "Mining",
- "value": "mining"
- },
- {
- "displayText": "Business",
- "value": "business"
- },
- {
- "displayText": "Education",
- "value": "education"
- },
- {
- "displayText": "Utilities",
- "value": "utilities"
- },
- {
- "displayText": "Transportation",
- "value": "transportation"
- }
- ];
+ public isLoading: boolean = true;
- logSelectedFields(event: Event) {
- const value = (event.target as HTMLInputElement).value;
- console.log(value);
+ ngOnInit() {
+ this.fetch();
}
+ ngOnDestroy(): void {
+ this.clearSliderValue();
+ }
+
+ async fetch() {
+ await new Promise((r) => setTimeout(r, 2000));
+ this.isLoading = false;
+ }
+
+ onSliderInput(event: Event) {
+ const value = (event.target as HTMLCalciteSliderElement).value;
+ if (typeof value === 'number') {
+ this.sliderValue = value;
+ }
+ }
+
+ clearSliderValue() {
+ this.sliderValue = 0;
+ }
}
diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
index 01bd9cb5..d5812fa9 100644
--- a/angular/src/app/app.module.ts
+++ b/angular/src/app/app.module.ts
@@ -1,14 +1,11 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
+import { CalciteComponentsModule } from '@esri/calcite-components-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
- imports: [BrowserModule, AppRoutingModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ imports: [BrowserModule, CalciteComponentsModule],
providers: [],
bootstrap: [AppComponent]
})
diff --git a/angular/src/assets/.gitkeep b/angular/src/assets/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/angular/src/environments/environment.prod.ts b/angular/src/environments/environment.prod.ts
deleted file mode 100644
index 3612073b..00000000
--- a/angular/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true
-};
diff --git a/angular/src/environments/environment.ts b/angular/src/environments/environment.ts
deleted file mode 100644
index f56ff470..00000000
--- a/angular/src/environments/environment.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/angular/src/index.html b/angular/src/index.html
index 05ff7133..e8ef4757 100644
--- a/angular/src/index.html
+++ b/angular/src/index.html
@@ -1,13 +1,16 @@
-
-