Angular Getting Started

Requirements

• Angular: 9.0+
• Rxjs: ~6.5.X
• 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.5.4 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 Assets

Request Asset list from the server.

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

@Component({
    selector: 'app-list-assets',
    templateUrl: './list-assets.component.html',
    styleUrls: ['./list-assets.component.less']
})
export class ListAssetComponent {
    assetList: Asset[];

    ngOnInit(){
        AssetService.listAsset()
            .subscribe(({ data }) => this.assetList = 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.5.4 --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.