Angular Getting Started

Requirements

• Angular: 11+
• Rxjs: ~6.6.7
• Optionally, we use keycloak-js to handle the authentication

Installation

From the command prompt go to your app's root folder and execute:

npm install @kelvininc/angular-client-sdk rxjs@~6.6.7 keycloak-angular keycloak-js --save

Setup (Kelvin SDK Client & Keycloak)

Import KelvinSDKModule, KelvinSDK, KeycloakAngularModule and KeycloakService in your app.module.ts

If you want to know more about keycloak-angular follow this README.

We are going to initialize the KelvinSDK with the base url of the API and the http client adapter of angular.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';

import { KelvinSDK, KelvinSDKModule } from '@kelvininc/angular-client-sdk';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';

export function initializer(
	HttpClient: HttpClient,
	KelvinSDK: KelvinSDK,
	Keycloak: KeycloakService
) {
	return (): Promise<any> => { 
		KelvinSDK.initialize({
			baseUrl: 'https://xxx.kelvininc.com/api/v4'
		}, HttpClient);

		return Keycloak.init({
			config: {
				url: 'https://xxx.kelvininc.com/auth',
				realm: 'your-kelvin-realm',
				clientId: 'your-kelvin-client-id',,
			},
			initOptions: {
				onLoad: 'login-required',
				checkLoginIframe: false
			},
			loadUserProfileAtStartUp: false
		});
	}
}

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		AppRoutingModule,
		BrowserModule,
		HttpClientModule,
		KelvinSDKModule,
		KeycloakAngularModule
	],
	providers: [
		{
			provide: APP_INITIALIZER,
			useFactory: initializer,
			multi: true,
			deps: [HttpClient, KelvinSDK, KeycloakService]
		}
	],
	bootstrap: [AppComponent]
})
export class AppModule { }

Usage

We are now able to request data to the server using the available services of Kelvin SDK Client.

List ACPS

Request ACPs list from the server.

import { Component } from '@angular/core';
import { ACPService, ACP } from '@kelvininc/angular-client-sdk';

@Component({
	selector: 'app-list-acps',
	templateUrl: './list-acps.component.html',
	styleUrls: ['./list-acps.component.less']
})
export class ListACPSComponent {
	acpList: ACP[];

	ngOnInit(){
		ACPService.listACPS()
			.subscribe(({ data }) => this.acpList = data);
	}
}

Setup without Keycloak

If we follow this approach, it is necessary to prepare the application with authentication mechanisms to check if it has a valid session, make the login, logout, etc...

npm install @kelvininc/angular-client-sdk rxjs@~6.6.7 --save

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import { KelvinSDK, KelvinSDKModule } from '@kelvininc/angular-client-sdk';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		AppRoutingModule,
		BrowserModule,
		HttpClientModule,
		KelvinSDKModule
	],
	bootstrap: [AppComponent]
})
export class AppModule { }


// app.component.ts

...
import { HttpClient } from '@angular/common/http';
import { KelvinSDK, IKvEnvironmentConfig } from '@kelvininc/angular-client-sdk';

export class AppComponent {
	constructor(KelvinSDK: KelvinSDK, HttpClient: HttpClient) {
		const config: IKvEnvironmentConfig = {
			baseUrl: 'https://xxx.kelvininc.com/api/v4',
			authConfig: {
				clientId: 'your-kelvin-client-id',
				realm: 'your-kelvin-realm',
				url: 'https://xxx.kelvininc.com/auth'
			}
		};

		KelvinSDK.initialize(config, HttpClient);
	}
}

To start managing the authentication process, create a login component. The AuthService will handle it in a background process, but you need to check the validity of the session in every page refresh.

@Component({
	selector: 'app-login',
	templateUrl: './login.component.html',
	styleUrls: ['./login.component.less']
})
export class LoginComponent {

	doLogin() {
		AuthService.login({
			username: 'user',
			password: 'pass'
		}).subscribe();
	}
}

Kelvin SDK Client API Documentation

You can find the full Client API reference here.