+
+ The example makes an HTTP GET request to a SystemLink API and
+ displays the result on the page. This specific API
+ Authenticates the given x-ni-api-key and returns information
+ about the call.
+
+
+
{{ apiResponse }}
+
+
+
+
+
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.scss b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.scss
new file mode 100644
index 00000000..7a891538
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.scss
@@ -0,0 +1,153 @@
+@use "@ni/nimble-angular/styles/fonts" as *;
+@use "@ni/nimble-angular/styles/tokens" as *;
+
+.header {
+ background-color: $ni-nimble-header-background-color;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 2%;
+
+ width: 100%;
+ min-height: 120px;
+ padding-left: 1%;
+ padding-right: 1%;
+}
+
+.header a {
+ color: inherit;
+ text-decoration: none;
+ background-color: $ni-nimble-header-background-color;
+ margin-top: 4%;
+ margin-bottom: 5%;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid transparent;
+ padding-top: 3%;
+ padding-left: 3%;
+ padding-right: 3%;
+ padding-bottom: 3%;
+}
+
+.header a:hover {
+ background-color: $ni-nimble-application-background-color;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+ border-color: $ni-nimble-border-hover-color;
+}
+
+.card-title {
+ font: $ni-nimble-title-font;
+ text-align: center;
+ color: $ni-nimble-title-font-color;
+}
+
+.card-text {
+ padding-left: 5%;
+ padding-right: 5%;
+ font: $ni-nimble-body-font;
+}
+
+.page {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ font: $ni-nimble-body-font;
+ color: $ni-nimble-body-font-color;
+ background-color: $ni-nimble-section-background-color;
+}
+
+.content {
+ flex: 1;
+ padding: 16px;
+}
+
+.main_description {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+}
+
+.button_and_title {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 0.25%;
+}
+
+.API-title {
+ text-align: center;
+ font-family: $ni-nimble-title-font-family;
+ color: $ni-nimble-title-font-color;
+}
+
+.API-method-and-path {
+ display: flex;
+ color: $ni-nimble-subtitle-font-color;
+ align-items: flex-start;
+ gap: $ni-nimble-medium-padding;
+ margin-left: 1%;
+}
+
+.API-description {
+ color: $ni-nimble-subtitle-font-color;
+ padding: 1%;
+}
+
+.method {
+ background-color: $ni-nimble-button-fill-accent-color;
+ color: $ni-nimble-button-accent-block-font-color;
+ padding: 4px 10px;
+ display: inline-block;
+ align-items: center;
+ line-height: 1;
+ margin-top: 1%;
+ border-radius: 10px;
+ font: $ni-nimble-body-plus-1-emphasized-font;
+}
+
+.path {
+ display: inline-flex;
+ align-items: center;
+ line-height: 1;
+ margin: 0;
+ margin-top: 1.2%;
+ font: $ni-nimble-body-plus-1-emphasized-font;
+}
+
+.API {
+ background-color: $ni-nimble-header-background-color;
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ max-width: 60%;
+ min-width: 60%;
+ height: auto;
+ padding: 0;
+ margin-left: 0;
+ margin-top: 0%;
+ font-size: $ni-nimble-body-plus-1-font-size;
+}
+
+.API-response {
+ background-color: $ni-nimble-application-background-color;
+ padding: 15px;
+ margin-top: 10px;
+ font-family: "Courier New", monospace;
+ font-size: $ni-nimble-body-plus-1-font-size;
+ line-height: 1.5;
+ overflow-x: auto;
+ max-height: 300px;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ word-break: break-word;
+ border: $ni-nimble-border-width solid $ni-nimble-border-color;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.API-description-title {
+ font-weight: bold;
+ color: $ni-nimble-subtitle-font-color;
+ padding: 1%;
+}
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.spec.ts b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.spec.ts
new file mode 100644
index 00000000..5ab926da
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.spec.ts
@@ -0,0 +1,21 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [AppComponent],
+ providers: [provideHttpClient(), provideHttpClientTesting()],
+ schemas: [NO_ERRORS_SCHEMA]
+ }).compileComponents();
+ });
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
+});
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.ts b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.ts
new file mode 100644
index 00000000..15bc389b
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.component.ts
@@ -0,0 +1,33 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { environment } from '../environments/environment';
+
+const systemLinkServerUrl = environment.systemLinkServerUrl;
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ standalone: false,
+ styleUrl: './app.component.scss'
+})
+export class AppComponent {
+ public apiResponse = '';
+
+ constructor(private readonly http: HttpClient) {}
+
+ public handleClick(): void {
+ this.http.get(`${systemLinkServerUrl}/niauth/v1/auth`)
+ .subscribe({
+ next: data => {
+ this.apiResponse = JSON.stringify(data, null, 2);
+ },
+ error: err => {
+ if (err instanceof Error) {
+ this.apiResponse = err.message;
+ } else {
+ this.apiResponse = String(err);
+ }
+ }
+ });
+ }
+}
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.module.ts b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.module.ts
new file mode 100644
index 00000000..d5858da7
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/app/app.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { NimbleButtonModule, NimbleThemeProviderModule } from '@ni/nimble-angular';
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ NimbleThemeProviderModule,
+ NimbleButtonModule
+ ],
+ providers: [
+ provideHttpClient(withFetch())
+ ],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/environments/environment.prod.ts b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/environments/environment.prod.ts
new file mode 100644
index 00000000..303b2138
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/environments/environment.prod.ts
@@ -0,0 +1,4 @@
+export const environment = {
+ production: true,
+ systemLinkServerUrl: ''
+};
\ No newline at end of file
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/environments/environment.ts b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/environments/environment.ts
new file mode 100644
index 00000000..baa39bbe
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/environments/environment.ts
@@ -0,0 +1,4 @@
+export const environment = {
+ production: false,
+ systemLinkServerUrl: 'http://localhost:4000/apiProxy'
+};
\ No newline at end of file
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/index.html b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/index.html
new file mode 100644
index 00000000..d4494e5c
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ Angular - SystemLinkAuthExample
+
+
+
+
+
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/main.ts b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/main.ts
new file mode 100644
index 00000000..469d6722
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/main.ts
@@ -0,0 +1,8 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { AppModule } from './app/app.module';
+
+platformBrowser().bootstrapModule(AppModule, {
+ ngZoneEventCoalescing: true,
+})
+ // eslint-disable-next-line no-console
+ .catch(err => console.error(err));
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/styles.scss b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/styles.scss
new file mode 100644
index 00000000..8aeb64ba
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/src/styles.scss
@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+/* src/styles.scss */
+@use "@ni/nimble-angular/styles/tokens" as *;
+
+body {
+ background-color: $ni-nimble-section-background-color;
+ overflow-y: auto;
+ margin: 0;
+ font: $ni-nimble-body-font;
+}
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.app.json b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.app.json
new file mode 100644
index 00000000..3775b37e
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.json b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.json
new file mode 100644
index 00000000..5525117c
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.json
@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "bundler",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022"
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.spec.json b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.spec.json
new file mode 100644
index 00000000..5fb748d9
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": [
+ "jasmine"
+ ]
+ },
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/examples/Web Apps/Framework Examples/Blazor/README.md b/examples/Web Apps/Framework Examples/Blazor/README.md
new file mode 100644
index 00000000..bd61fe46
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Blazor/README.md
@@ -0,0 +1,20 @@
+# SystemLink Angular Web Apps
+
+This directory contains a collection of Blazor-based web apps designed to work
+with SystemLink services. Each app demonstrates how to build Web Apps that are
+visually uniform with SystemLink's production environment and demonstrates how
+to use SystemLink API's both from within and outside of the production
+environment.
+
+The [Nimble Blazor package](https://www.nuget.org/packages/NimbleBlazor/) can
+be used to import components and styling that are uniform with those of the
+SystemLink production environment.
+
+- For more information about Blazor see [here](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor).
+- For more information about Nimble see [here](https://nimble.ni.dev/).
+
+## Apps Included
+
+- **[SystemLinkAuthExample](./SystemLinkAuthExample/)** – Demonstrates how to make API calls to
+ SystemLink by calling a simple endpoint and displaying information about a
+ user's API keys.
diff --git a/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/.npmrc b/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/.npmrc
new file mode 100644
index 00000000..214c29d1
--- /dev/null
+++ b/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/Pages/API.razor b/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/Pages/API.razor
index d028a6ae..829ff225 100644
--- a/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/Pages/API.razor
+++ b/examples/Web Apps/Framework Examples/Blazor/SystemLinkAuthExample/Pages/API.razor
@@ -11,7 +11,7 @@
-
+
The example makes an HTTP GET request to a SystemLink API and
displays the result on the page. This specific API
Authenticates the given x-ni-api-key and returns information
about the call.