**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Components and Templates **Topic:** Build a component-based application with multiple components and directives.(Lab topic) **Objective:** In this lab, we will build a component-based application using Angular. We will create multiple components and directives to demonstrate a real-world scenario. By the end of this lab, you will understand how to create a scalable and maintainable Angular application. **Introduction:** In the previous topics, we covered the basics of Angular components, templates, and directives. We also learned how to create and organize components in a best practice approach. Now, it's time to apply our knowledge to build a real-world application. **Lab Overview:** We will build a simple e-commerce application that displays products, allows users to add products to a shopping cart, and displays the total cost of the products in the cart. We will use multiple components and directives to achieve this functionality. **Step 1: Create a new Angular application** If you haven't already, create a new Angular application using the Angular CLI: ```bash ng new products-app ``` **Step 2: Create a Product Model** Create a new file `product.model.ts` in the root of your application: ```typescript // product.model.ts export interface Product { id: number; name: string; price: number; } ``` **Step 3: Create a Product Component** Create a new file `product.component.ts` in the `app` directory: ```typescript // product.component.ts import { Component, Input } from '@angular/core'; import { Product } from '../product.model'; @Component({ selector: 'app-product', template: ` <div> <h2>{{ product.name }}</h2> <p>Price: {{ product.price }}</p> <button (click)="addToCart()">Add to Cart</button> </div> `, }) export class ProductComponent { @Input() product: Product; addToCart(): void { console.log(`Adding ${this.product.name} to cart`); } } ``` **Step 4: Create a Cart Component** Create a new file `cart.component.ts` in the `app` directory: ```typescript // cart.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-cart', template: ` <div> <h2>Cart</h2> <ul> <li *ngFor="let product of products">{{ product.name }}</li> </ul> <p>Total: {{ total }}</p> </div> `, }) export class CartComponent { products = []; total = 0; addProduct(product: any): void { this.products.push(product); this.total += product.price; } } ``` **Step 5: Create a Directive to Highlight Products on Hover** Create a new file `highlight-directive.ts` in the `app` directory: ```typescript // highlight-directive.ts import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appHighlight]', }) export class HighlightDirective { constructor(private elementRef: ElementRef) {} @HostListener('mouseover') onMouseOver(): void { this.elementRef.nativeElement.style.backgroundColor = 'yellow'; } @HostListener('mouseout') onMouseOut(): void { this.elementRef.nativeElement.style.backgroundColor = ''; } } ``` **Step 6: Use the Components and Directive in the App Component** Update the `app.component.ts` file: ```typescript // app.component.ts import { Component } from '@angular/core'; import { Product } from './product.model'; @Component({ selector: 'app-root', template: ` <div> <h1>Products App</h1> <div *ngFor="let product of products"> <app-product [product]="product"></app-product> </div> <app-cart></app-cart> </div> `, }) export class AppComponent { products = [ { id: 1, name: 'Product 1', price: 10.99 }, { id: 2, name: 'Product 2', price: 5.99 }, { id: 3, name: 'Product 3', price: 7.99 }, ]; } ``` **Step 7: Style the Application** Add some basic CSS styles to the `styles.css` file: ```css /* styles.css */ body { font-family: Arial, sans-serif; } .app-product { width: 200px; border: 1px solid #ccc; padding: 10px; margin: 10px; display: inline-block; } .app-cart { width: 300px; border: 1px solid #ccc; padding: 10px; margin: 10px; } .highlight { background-color: yellow; } ``` **Conclusion:** In this lab, we built a simple e-commerce application using multiple components and directives. We demonstrated how to create a scalable and maintainable Angular application by breaking down the application into smaller, reusable components. **What's Next?** In the next topic, we will learn about services in Angular. A service is a class that provides a set of methods that can be called by components to perform specific tasks. We will learn how to create and use services in our Angular application. **External Links:** * [Angular Documentation: Components](https://angular.io/guide/components) * [Angular Documentation: Directives](https://angular.io/guide/attribute-directives) * [Angular Documentation: Services](https://angular.io/guide/services) **Leave a Comment/Ask for Help:** If you have any questions or need help with this lab, please leave a comment below.