Q.1 Create a simple Angular application that fetches data from an API using HttpClient.
-
Implement an Observable to fetch data from an API endpoint. - Use operators like `map`, `filter`,
`tap`, etc., to manipulate the fetched data. - Display the fetched data in the Angular application
using `async` pipe.
1. ng new student
2. cd student
3.Compatitable version of web api for angular 13.
npm install angular-in-memory-web-api@0.11.0 --legacy-peer-deps
4.create file in app folder in-memory-data.service.ts file create student data in that
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const students = [
{ id: 11, grade:'A', name: 'Kale swapnil' },
{ id: 12,grade:'A', name: 'Gaikwad sanjay' },
{ id: 13, grade:'B',name: 'Sham Sundar' },
{ id: 14, grade:'A',name: 'Pawar Kartik' },
{ id: 15, grade:'B',name: 'Kadam ram' },
{ id: 16,grade:'A', name: 'Ravi Sharma' }
];
return { students };
}
}
5.Generate service
ng generate service studentdata
6. studentdata.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';
export interface Student {
id: number;
grade: string;
name: string;
}
@Injectable({
providedIn: 'root'
})
export class StudentdataService {
private apiUrl = 'api/students'; // Adjust the URL to your actual endpoint
constructor(private http: HttpClient) { }
getBooks(): Observable<Student[]> {
return this.http.get<Student[]>(this.apiUrl).pipe(
// Log the raw data
tap(data => console.log('Raw Data:', data)),
// Ensure data is present and filter students with grade 'A'
filter((students: Student[]) => students.length > 0),
map((students: Student[]) =>
students
.filter(student => student.grade === 'A') // Only students with
grade 'A'
.map(student => ({
...student,
name: student.name.toUpperCase() // Capitalize names
}))
),
// Log the transformed data
tap(data => console.log('Transformed Data:', data))
);
}
}
7.app.component.ts
import { Component,OnInit } from '@angular/core';
import {StudentdataService, Student} from './studentdata.service'
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'student';
students$!:Observable<Student[]>;
constructor(private studentds: StudentdataService) { }
ngOnInit(): void {
this.students$=this.studentds.getBooks();
}
}
8. app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserModule,
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
9.app.component.html
<h1>Heroes</h1>
<ul>
<li *ngFor="let student of students$ | async">
{{student.id}} {{ student.name }}</li>
</ul>
10. ng serve –o
