Django + Angular2: How to fetch data from database?

Checkout django-rest-framework

DRF is a django app that makes building ReST apps a breeze. Checkout their quick tutorial to get a sense of how to use DRF in your project.

I'm recently working on the similar project you have. My approach is just like @praba230890 mentioned above.

Here are some samples...

Django

In views.py

class HView(APIView):
  def get(self, request, format=None):
    request_hero_id = request.query_params.get('id', None)
    if request_hero_id:
      return Response(
        {
          'id': 1,
          'name': 'test',
          'position': 'mid'
        },
        status=status.HTTP_200_OK
      )
    return Response(
      { 'error': 'does not exist' },
      status=status.HTTP_404_NOT_FOUND
    )

class HsView(APIView):
  def get(self, request, format=None):
    return Response(
      [
        {
          'id': 1,
          'name': 'test',
          'position': 'mid'
        },
        {
          'id': 2,
          'name': 'test',
          'position': 'mid'
        }
      ],
        status=status.HTTP_200_OK
    )

In urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', include('shweb.urls')),
]

You will need to install django-cros-headers if you run into CROS errors. Also, you will need to configure your settings.py

Angular2

In api-service.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero } from '../utils/hero';

@Injectable()
export class ApiService {
  /** Modify this later */
  private backend_api_url: string = 'http://localhost:8000/api/';
  private api_headers: Headers    = new Headers(
    { 'Content-Type': 'application/json' }
  );

  constructor(private http: Http) { }

  getHero(id: number): Promise<Hero>{
    const url = `${this.backend_api_url}htest/?id=${id}`;

    return this.http.get(url).toPromise().then(
      response => response.json() as Hero
    ).catch(this.handleError);
  } // END getHero

  getHeroes(): Promise<Hero[]>{
    const url = `${this.backend_api_url}htests`;
    console.log(url);
    return this.http.get(url).toPromise().then(
      response => {
        console.log(response.json());
        return response.json() as Hero[];
      }
    ).catch(this.handleError);
  } // END getHeroes

  private handleError(error: any): Promise<any>{
    console.error('An error occurred', error); // TODO: update this
    return Promise.reject(error.message || error);
  }
}

In hero.ts

export class Hero{
  id: number;
  name: string;
  position: string;
}

In your component file, inject the api-service into component

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit{
  title: string = 'Dashboard';
  heroes: Hero[] = [];

  constructor(private apiService: ApiService){}

  ngOnInit(): void{
    this.getHeroes();
  }

  getHeroes(): void{
    this.apiService.getHeroes().then(heroes => this.heroes = heroes);
  } // END getHeroes
}

Basically, using API to retrieve data and cast into class; then, you can use those data.

PS. I haven't touched the credentials and security part. I believe you need to have some sort of Authentication implemented for secure API communication. (In my case, only GETs are allowed. Therefore, I put the security part for later.)

Hope this would help!