How to pass Django rest Framework API in Angular 9?

Question

I purchase an angular theme, and I developed API using the Django rest framework, and I want to pass my API data in the Angular theme menu. I set up everything (like as: service, classes, components, HTML file), but I am stuck in this (how I can hit API in Angular). I am submitting my service code here, please check, and let me know how I can implement API in Menu.

here are my nav.services.ts file

import { Injectable, HostListener } from '@angular/core';
import { BehaviorSubject,Observable, of, from } from 'rxjs';
import { GYM } from '../classes/gym';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment';

// Menu
export interface Menu {
path?: string;
title?: string;
type?: string;
megaMenu?: boolean;
image?: string;
active?: boolean;
badge?: boolean;
badgeText?: string;
children?: Menu[];
//childrens?: results[];
}

@Injectable({
providedIn: 'root'
})

export class NavService {

//  constructor() { }

public screenWidth: any;
public leftMenuToggle: boolean = false;
public mainMenuToggle: boolean = false;

// Windows width
@HostListener('window:resize', ['$event'])
onResize(event?) {
    this.screenWidth = window.innerWidth;
}

MENUITEMS: Menu[] = [
    {
        title: 'home', type: 'sub', active: false, children: [
            {
                title: 'clothing', type: 'sub', active: false, children: [
                    { path: '/home/fashion', title: 'fashion-01', type: 'link' },
                ]
            },
            { path: '/home/vegetable', title: 'vegetable', type: 'link' },
        ]
    },
];
  // Array
  items = new BehaviorSubject<Menu[]>(this.MENUITEMS);

how i can pass my data here in thi code, because this data i got in existing theme and my api URL is this http://127.0.0.1:8000/category please let me know the demo code how i can implement this api url in above code.

Dewanshu · Accepted Answer · 2020-07-08 10:52:17Z

1

/** GET Menu from the server */
let Url = 'http://127.0.0.1:8000/category'
getMenu(): Observable<Menu[]> {
  return this.http.get<Menu[]>(this.Url)
    .pipe(
      tap(_ => this.log('fetched menu')),
      catchError(this.handleError<Menu[]>('getMenu', []))
    );
}

subscribe to this method where you want to get menu object by NavService instance

answered Jul 8, 2020 at 10:52

Dewanshu

5343 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass Django rest Framework API in Angular 9?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related