SQL server connection with angular 4 +

Question

I would like to know how to make a connection to the SQL server database through Angular 4. I needed to know the procedures or an explanatory video.

I’m a beginner in angular.

Answer 1

Leonardo, first the angular has no way to make a connection to the database, it is necessary an application using a backend (c#, java... ) with this application you will create a service (webapi) to consume your database and by angular will have to create a typescript to be able to consume this service, with HTTP requests.

Answer 2

Leonardo, what you want is not possible. Not directly by Angular in the case. The Angular is a framework for software development Front-end. The connection to the database is the responsibility of the back-end.

What you can do to realize this "connection" is to create a Webservice with some language Back-end (Nodejs, C#, Java, etc) and then consume via HTTP requests the data.

Answer 3

There is a considerable possibility to make queries, insertions and data manipulations of a SQL Server BD from Angular4.

To execute queries/queries, you will need to put the BD in contact with some back-end server, like a Java with Hibernate+Spring, for example.

Since the question is only about Angular 4, I’ll just say about it.

First, the darlings will be executed by a Service, the basis of which is basically:

import { Injectable } from '@angular/core';

@Injectable()
export class ExampleService {
  constructor() {}
}

Since it is Angular 4, it is better to import the classes/services of Httpclient, which is a module launched in Angular 4.3, if you use something older, use the Http module. Put Http/Httpclient in the constructor:

constructor(private http: Http/* Ou HttpClient */) {}

Once the constructor is ready, simply create the methods. This method here is an Httpclient version that pulls all data from the table, without paging. This version is that of Httpclient. If using only Http, you will need to map() to convert the response data to JSON.

getAllDepartments(): Rx.Observable<Department> {
   return this.http
    .get<Department>(this.getUrl() + '/', { headers: this.headers }) // HttpClient
    .get(this.getUrl() + '/', requestOptions) // Http
    .map((res) => res.json()) // Http
    .publish()
    .refCount();
}

Note: The function getUrl() returns the start to the URL for the request.

Remembering that HTTP is older, so I recommend using Httpclient as it will be supported in newer versions.

So, just call the service method in the component and assign it to something. For example, this method you can fill in an element SELECT.

In the component

ngOnInit() {
  this.service.getAllDepartments().subscribe(
    data => this.departamentos = data
  );
}

In the HTML template

<select #selectDept (change)="setNewDpt(selectDept.value)">
  <option *ngFor="let dept of departamentos" [value]="dept.id">{{dept.nome}}</option>
</select>