FSD-II Practical Assignment 1

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





Comments

Post a Comment

Popular posts from this blog

Slip 11: Write node js application that transfer a file as an attachment on web and enables browser to prompt the user to download file using express js.

  const express = require ( 'express' ); const path = require ( 'path' ); const app = express (); const PORT = 3000 ; // Route to download file app . get ( '/download' , ( req , res ) => {     res . download ( 'a.txt' , ( err ) => {         if ( err ) {             console . log ( "Error downloading file:" , err );         } else {             console . log ( "File sent successfully" );         }     }); }); // Home app . get ( '/' , ( req , res ) => {     res . send ( '<h2>Click below to download file</h2><a href="/download">Download File</a>' ); }); app . listen ( PORT , () => {     console . log ( `Server running at http://localhost: ${ PORT } ` ); });
Read more

Slip 7 Create a node js file named main.js for event-driven application. There should be a main loop that listens for events, and then triggers a callback function when one of those events is detected.

 // import event module var events = require('events'); // create an eventEmitter object var eventEmitter = new events.EventEmitter(); // create an event handler var connectHandler = function (s) {    console.log('Its', s); }; // Bind the data_received event eventEmitter.on('data_received', function (name) {    console.log(name, "Understood event -Driven"); }); // trigger data_received event eventEmitter.emit('data_received', "FYMSC(CS)"); // Bind the connection event eventEmitter.on('connection', connectHandler); // trigger connection event eventEmitter.emit('connection', "SIMPLE SOLUTION"); console.log("program Ended");
Read more

Slip 1(a) Write an Angular 13 application addition of two numbers using ng-init, ng-model & ng-bind. And also demonstrate ng-show, ng-disabled, ng-click directives on button component.

Image
 a) ng new slip1 b) cd slip1 c) open app.component.ts   import { Component } from '@angular/core' ; @ Component ({   selector : 'app-root' ,   templateUrl : './app.component.html' ,   styleUrls : [ './app.component.css' ] }) export class AppComponent {   num1 : number = 0 ;   num2 : number = 0 ;   result : number = 0 ;   disableButton : boolean = false ;   showResult : boolean = false ;   add () : void {     this . result = this . num1 + this . num2 ;     this . disableButton = true ;   // Disable the button after calculation     this . showResult = true ;       // Show the computed result   } }                                                                ...
Read more