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 { }