**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** TypeScript with Angular **Topic:** Build a basic Angular application using TypeScript with components and services.(Lab topic) In this lab, we will create a basic Angular application using TypeScript, focusing on building components and services. By the end of this topic, you will have a solid understanding of how to build a simple Angular application using TypeScript. **Prerequisites** Before starting this lab, make sure you have: 1. Completed the previous topics in the "TypeScript with Angular" section. 2. Familiarity with Angular and its basic concepts. 3. Node.js (14.x or higher) and npm installed on your machine. 4. Angular CLI (12.x or higher) installed globally on your machine. You can install it by running the command `npm install -g @angular/cli` in your terminal. **Step 1: Create a new Angular project** Open your terminal and run the following command to create a new Angular project: ```bash ng new angular-typescript-app ``` Follow the prompts to set up the project. Choose "SCSS" as the stylesheet format and "No" for routing. **Step 2: Create a new component** Create a new component called `hello-world` by running the following command: ```bash ng generate component hello-world ``` This will create a new directory called `hello-world` with four files: `hello-world.component.css`, `hello-world.component.html`, `hello-world.component.spec.ts`, and `hello-world.component.ts`. **Step 3: Create a new service** Create a new service called `greeting` by running the following command: ```bash ng generate service greeting ``` This will create a new directory called `greeting` with two files: `greeting.service.spec.ts` and `greeting.service.ts`. **Step 4: Implement the service** Open the `greeting.service.ts` file and add the following code: ```typescript import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class GreetingService { greet(name: string): string { return `Hello, ${name}!`; } } ``` This service has a single method `greet` that takes a `name` parameter and returns a greeting message. **Step 5: Inject the service into the component** Open the `hello-world.component.ts` file and add the following code: ```typescript import { Component, OnInit } from '@angular/core'; import { GreetingService } from '../greeting.service'; @Component({ selector: 'app-hello-world', templateUrl: './hello-world.component.html', styleUrls: ['./hello-world.component.css'] }) export class HelloWorldComponent implements OnInit { name: string; greeting: string; constructor(private greetingService: GreetingService) { } ngOnInit(): void { this.name = 'Alice'; this.greeting = this.greetingService.greet(this.name); } } ``` This component injects the `GreetingService` and uses its `greet` method to generate a greeting message. **Step 6: Update the component template** Open the `hello-world.component.html` file and add the following code: ```html <div> <h1>{{ greeting }}</h1> <p>Enter your name:</p> <input [(ngModel)]="name" (ngModelChange)="onNameChange($event)"> </div> ``` This template displays the greeting message and allows the user to enter their name. **Step 7: Update the component to handle name changes** Open the `hello-world.component.ts` file and add the following code: ```typescript onNameChange(name: string): void { this.greeting = this.greetingService.greet(name); } ``` This method updates the greeting message when the user enters a new name. **Conclusion** In this lab, we created a basic Angular application using TypeScript, focusing on building components and services. We created a `GreetingService` that provides a `greet` method, and injected it into a `HelloWorldComponent` that uses the service to generate a greeting message. **Key takeaways** * Create a new Angular project using the `ng new` command. * Create new components and services using the `ng generate` command. * Inject services into components using dependency injection. * Use services to provide data and functionality to components. **External resources** * [Angular documentation](https://angular.io/docs) * [TypeScript documentation](https://typescriptlang.org/docs) **Comments and questions** If you have any questions or need help with any of the steps, please leave a comment below.