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.

`ts
// 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 => {
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

`ts
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...

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

`ts
// 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.

`ts
@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.