Day 21 – Case Study Assignment
Topic: Component Communication in Angular
User Story
As a product manager at ShopEase, I want a dashboard application where a parent component
(Dashboard) can share selected product details with a child component (ProductDetails), and the child
component can send back user feedback to the parent.
This will ensure seamless communication between components, allowing real-time updates without
reloading the entire page.
Scenario
● The Dashboard Component displays a list of products (name & price).
● When the user clicks on a product, the details should be sent to the ProductDetails Component using
@Input().
● Inside ProductDetails, a user can give a rating or comment, which should be sent back to the
Dashboard using @Output().
● The Dashboard should display the received feedback immediately.
Learning Goals
By completing this case study, learners will:
1. Understand parent-to-child communication using @Input().
2. Implement child-to-parent communication using @Output() and EventEmitter.
3. Practice passing data dynamically between components in Angular.
Assignment Instructions
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 1
1. Read the scenario carefully and design two components that communicate with each
other as described in the user story.
2. Apply @Input() and @Output() decorators appropriately.
3. Ensure data flows correctly from parent to child and child to parent without using any external state
management library.
4. Keep the UI simple but functional — focus on communication logic rather than styling.
Submission Guidelines
● Folder Structure: Submit the full Angular project folder (zipped).
● File Naming: Follow Angular’s naming conventions (dashboard.component.ts,
product-details.component.ts, etc.).
● README File: Include a short README explaining your approach and how to run the application.
● Deadline: Submit by EOD of Day 21.
● Evaluation Criteria:
○ Correct use of @Input() and @Output() (40%)
○ Functional communication between components (30%)
○ Code readability & comments (20%)
○ README & submission format (10%)
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 2
