You are on page 1of 2

1-> users.component.

html

<p>{{users.data.email}}</p><p>{{users2.data.email}}</p><p>{{users3.data.email}}</p>

2-> users.component.ts

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


import { UsersService } from '../services/users.service';

@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent {
users:any ='';
errMsg:any = '';
users2:any ='';
errMsg2:any = '';
users3:any ='';
errMsg3:any = '';
constructor(usersService: UsersService) {
usersService.getEmployees().subscribe(
result => this.users = result,
error => this.errMsg = error

)
usersService.getEmployees2().subscribe(
result => this.users2 = result,
error => this.errMsg2 = error

)
usersService.getEmployees3().subscribe(
result => this.users3 = result,
error => this.errMsg3= error

}
3 -> users.service.ts

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


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

@Injectable({
providedIn: 'root'
})
export class UsersService {
userUrl:string = 'https://reqres.in/api/users/1'
userUrl2:string = 'https://reqres.in/api/users/3'
userUrl3:string = 'https://reqres.in/api/users/10'
constructor(private httpClient:HttpClient){}
getEmployees(){
return this.httpClient.get(this.userUrl)
}
getEmployees2(){
return this.httpClient.get(this.userUrl2)
}
getEmployees3(){
return this.httpClient.get(this.userUrl3)
}

You might also like