Angular 2+ integration

Find out how to integrate JSQL with Angular 2,4,5,6 and 7

Stack requirements

The JSQL Angular library will not work without an account in the JSQL cloud, a backend application (API) integrated with JSQL and integration with the tasks of the runner. To learn more see overview.

RxJS support

Each implementation of the JSQL library for the framework has a slightly different structure.

For Angular we use RxJS default convention using Observables.

Read Angular RxJS guide

Example usage:

 jsqlService.select("select * from person where id = :id")
.param('id', 5) .rx.subscribe((result: any) => { //Query result }, (error: any) => { // Database errors });

Angular 6 Guide

Installation

Install via NPM

npm install jsql-angular6 --save

The default way to connect a library in projects based on Angular is simply to save them in package.json using –save parameter during installation via NPM.

After installation, you will see the library in the dependencies section.

"dependencies": {
 "jsql-angular6": "latest"
}

Module configuration

First of all, you need to import jsql-angular6 module into your Angular app module:

import {JsqlModule} from "jsql-angular6";
import {JsqlConfig} from "jsql-angular6/src/modules/jsql.module";

We also import the configuration class.

Then you can set JSQL configuration using JsqlConfig interface:

const jsqlConfig: JsqlConfig = {
  host: 'https://mysite.com'
} as JsqlConfig;

You can also pass additional configuration parameters.

After that, add JsqlModule in the imports section of our module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JsqlModule.forRoot(jsqlConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Full configuration of you application can look like:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import {JsqlModule} from "jsql-angular6";
import {JsqlConfig} from "jsql-angular6/src/modules/jsql.module";

const jsqlConfig: JsqlConfig = {
  host: 'https://mysite.com'
} as JsqlConfig;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JsqlModule.forRoot(jsqlConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

To usa JSQL in your Angular project you need to import JsqlService into your class:

import {JsqlService} from "jsql-angular6";

Then you need to inject the JsqlService into your class:

constructor(private jsqlService: JsqlService)

Then you can execute operational functions as on example below:

Example select usage

import {Component} from '@angular/core';
import {JsqlService} from "jsql-angular6";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  constructor(private jsqlService: JsqlService) {

    jsqlService.select("select * from person")
      .rx.subscribe((result: any) => {
        //Query result
      }, (error: any) => {
        // Database errors
      });

  }

For details on using other methods like delete, update, insert and binding parameters, see the documentation.

Close Menu