fbpx

Angular 7 integration

Find out how to integrate JSQL with Angular 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.

Example usage:

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

Angular 7 module installation

Install via NPM
npm install jsql-angular7 --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-angular7": "latest"
}

Module configuration

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

import {JsqlModule} from "jsql-angular7";
import {JsqlConfig} from "jsql-angular7/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-angular7";
import {JsqlConfig} from "jsql-angular7/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-angular7";

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-angular7";

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

export class AppComponent {

  constructor(private jsqlService: JsqlService) {

    jsqlService.select("@sql select * from person")
      .observe()
      .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.

Example integration with Angular 7 and JSQL CLI in package.json

This example needs concurrently module to be installed.

This example needs Disable hashing for development mode option enabled in security options.

"scripts": {
"serve": "concurrently --kill-others \"ng serve\" \"npm run jsql-watch\"",
"jsql-watch": "jsql-cli --apiKey=(..) --input=/src/app/**/*.* --extensions=ts --watch",
"jsql-build": "jsql-cli --apiKey=(..) --devKey=(..) --output=/dist/main[...].js --input=/dist/main[...].js",
"build": "ng build --prod && npm run jsql-build",
}
Close Menu