What is Angular Service ,Router & Component in Angular? Calling process with example.

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({

providedIn: 'root'

})

export class QuotationService {

headers = new HttpHeaders();

//Base URL

base: string = 'http://localhost:14714/';

//List of APIs

apiBidDetails: string = this.base + 'API/BidDetails/GetBidDetails';

constructor(private http: HttpClient) {

this.headers = this.headers.append('Content-Type', 'application/json');

console.log('Headers: ', this.headers);

}

//API methods

getBidDetails()

{

return this.http.get(this.apiBidDetails, {headers: this.headers});

}

}

------------------------

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './components/login/login.component';

import { DashboardComponent } from './components/dashboard/dashboard.component';

import { LayoutComponent } from './components/layout/layout.component';

const routes: Routes = [

{path:'login',component:LoginComponent},

{path:'dashboard',component:DashboardComponent},

{path:'layout',component:LayoutComponent},

{path:'',redirectTo:'/login',pathMatch:'full'}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

-----------------------

import { Component, OnInit } from '@angular/core';

import { QuotationService } from '../../services/quotation.service';

@Component({

selector: 'app-dashboard',

templateUrl: './dashboard.component.html',

styleUrls: ['./dashboard.component.css']

})

export class DashboardComponent implements OnInit {

response: any = "";

constructor(private service:QuotationService)

{

this.getBids();

}

//Define method

public getBids() {

this.service.getBidDetails().subscribe(serverResponse => { this.response = serverResponse;console.log(this.response);});

}

ngOnInit() {

}

}

Share: