I am fatch data by username from django API using angular4 - django

Question

this is my anglar4 creating app name as search i want to fatch data from django rest API. I want that when i give username it give me only this username data.
app.components.tc
import { Component } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
username:string = '';
constructor(private httpClient:HttpClient){}
onNameKeyUP(event:any){
this.username = event.target.value;
}
getProfile(){
console.log(this.username)
this.httpClient.get("http://127.0.0.1:8000/loginAdmin/?username=${this.username}")
.subscribe(
(data:any[]) => {
console.log(data);
}
)
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.components.html
it is my simlple Html which is use to send username from Django API
<input type="text" (keyup)="onNameKeyUP($event)">
<button (click)="getProfile()">Get Profile</button>

Answer 1

Try this:
app.component.ts
import { Component, OnInit } from '#angular/core';
import { FormControl } from '#angular/forms';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import {
filter,
map,
switchMap,
debounceTime,
distinctUntilChanged,
} from 'rxjs/operators';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
profile$: Observable<any>;
ctrl = new FormControl();
constructor(private httpClient: HttpClient) {}
ngOnInit() {
this.profile$ = this.ctrl.valueChanges.pipe(
filter(v => v.length > 2),
debounceTime(400),
distinctUntilChanged(),
switchMap(username =>
this.httpClient.get(
`http://127.0.0.1:8000/loginAdmin/?username=${username}`,
),
),
);
}
}
app.component.html
<input [formControl]="ctrl">
<div> {{ profile$ | async | json }} </div>
app.module.ts
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
ReactiveFormsModule,
...
],
providers: [...],
bootstrap: [AppComponent],
})
export class AppModule {
constructor() {}
}