Day 22 Assignment
Topic: Advanced Angular Directives & Pipes, HTTP & Observables, Different Types of Angular Pipes,
Component Styling & Communication
Problem Statement
You are working on "BookStore Pro", an Angular application for managing and displaying books.
The app must fetch a list of books from a mock API and display them using different Angular Pipes for
formatting. The app should demonstrate manual Observable subscription (with cleanup) and async pipe usage,
include an HTTP interceptor, and apply component styling and parent-child communication.
What You’ll Build
1. DataService — central place for HTTP calls (GET) returning Observables.
2. AuthInterceptor — adds a dummy Authorization header to every request.
3. BooksComponent —
○ Uses HttpClient + Observables to fetch book data.
○ Displays book title, price (Currency Pipe), publication date (Date Pipe), and description (Slice
Pipe).
○ Demonstrates both:
■ Manual subscribe + cleanup
■ async pipe
4. Parent-Child Communication — Pass book data from parent to child via @Input.
5. Styling — Add simple component-specific styles.
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 1
Angular Pipes to Use
● DatePipe → Display publication date.
● CurrencyPipe → Display book price in INR.
● UpperCasePipe → Display book title in uppercase.
● SlicePipe → Display first 50 characters of description.
● Custom Pipe → Create DiscountPipe to show discounted price.
Submission Instructions
1. Implement all files as shown above.
2. Replace the sample API URL with a books API or your own mock JSON data.
3. Ensure at least 4 built-in pipes and 1 custom pipe are used.
4. Demonstrate both:
○ Manual subscription with unsubscribe
○ async pipe usage
5. Use component-specific styling (.css files).
6. Submit:
○ A zipped Angular project folder.
○ Screenshots of working output.
○ A short document (max 1 page) explaining:
■ How you implemented Observables
■ Which pipes were used and why.
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 2
Self-Evaluation Table
Criteria Yes/No Remarks
DataService implemented correctly
AuthInterceptor adds header
At least 4 built-in pipes used
Custom pipe (DiscountPipe) implemented
Both async pipe and manual subscribe demonstrated
Unsubscribe logic in ngOnDestroy
Parent-child communication implemented
Styling applied to components
App runs without errors
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 3
