Connection SQL server with angular 4 +

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

What you can do to make this "connection" is to create a Webservice with some Backend language (NodeJS, C #, Java, etc.) and then consume via Http requests the data.

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

There is a considerable possibility of querying, inserting, and manipulating data from a SQL Server DB from Angular4.

To run queries / queries, you will need to put the DB in contact with some backend server, such as a Java with Hibernate + Spring, for example.

As the question is just about Angular 4, I'll just say about it.

First, the queries will be executed by a Service , whose base is basically like this:

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

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

As it is Angular 4, you'd better 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 the Http / HttpClient in the constructor:

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

Once the builder is ready, you just need to create the methods. This method here is an HttpClient version that pulls all the data from the table, without paging. This version is that of HttpClient. If you use only Http, you will need to map () to convert the response data into 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 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 on the component and assign it to something. For example, this method you can fill in a SELECT element.

In the

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>