Below example males a http get request using angular HttpClientModule
app.componnet.html
<input type="text" [(ngModel)]="moduleName" /> <button (click)="getUrl()">Click Me</button>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'HttpClientDemo';
moduleName: string;
reponse: any;
constructor(private http: HttpClient) {}
ngOnInit(): void {}
getUrl() {
console.log('URL Called');
let url = 'https://jsonplaceholder.typicode.com/comments/' + this.moduleName;
console.log(url);
this.reponse = this.http.get(url).subscribe(
(response) => {
this.reponse = response;
}
);
console.log(this.reponse);
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
