Formation Angular 11 : Création d'un composant avec Angular CLI - Vidéo Tuto

Introduction

In this tutorial, you will learn how to create a component in Angular 11 using Angular CLI. This guide provides a step-by-step approach to building Angular components, which are essential for developing robust Single Page Applications (SPAs). By the end of this tutorial, you will have a solid foundation in component creation, which is a key aspect of Angular development.

Step 1: Set Up Your Angular Environment

Before creating a component, ensure that your Angular development environment is ready. Follow these steps:

1. Install Node.js: Download and install Node.js from the official website.
2. Install Angular CLI: Open your terminal or command prompt and run the following command:

   npm install -g @angular/cli
   

3. Create a New Angular Project: Use Angular CLI to generate a new project by running:

   ng new my-angular-app
   

   Replace my-angular-app with your desired project name.
4. Navigate to Project Directory: Change to your project directory:

   cd my-angular-app
   

Step 2: Generate a New Component

Once your environment is set up, you can create a new component. Follow these steps:

1. Run the Generate Command: Use the Angular CLI to create a new component. For example, to create a component named my-component, run:

   ng generate component my-component
   

   Alternatively, you can use the shorthand:

   ng g c my-component
   

2. Component Directory Structure: After running the command, Angular CLI will create a new directory with the following files:
   • my-component.component.ts (TypeScript file for the component logic)
   • my-component.component.html (HTML template for the component)
   • my-component.component.css (CSS styles for the component)
   • my-component.component.spec.ts (Test file for the component)

Step 3: Understand Component Files

Familiarize yourself with the files generated for your component:

• TypeScript File (my-component.component.ts): This file contains the logic for your component. Here’s a basic example of what it might look like:

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
  })
  export class MyComponent {
    title = 'Hello Angular!';
  }
  

• HTML File (my-component.component.html): This is where you define the structure of your component. A simple example:

  <h1>{{ title }}</h1>
  

Step 4: Integrate the Component into Your Application

To use your newly created component in your application, follow these steps:

1. Open the Main Application Component: Open the app.component.html file located in the src/app directory.
2. Add Your Component Selector: Insert the selector of your new component into the HTML file. For example:

   <app-my-component></app-my-component>
   

Step 5: Serve Your Application

Now that your component is integrated, you can run your application to see it in action:

1. Start the Development Server: Run the following command in your terminal:

   ng serve
   

2. Open Your Browser: Navigate to http://localhost:4200 to view your application. You should see your component rendered on the page.

Conclusion

Congratulations! You have successfully created an Angular component using Angular CLI and integrated it into your application. This foundational skill will empower you to build more complex Angular applications. As you continue your learning journey, explore other concepts such as services, routing, and advanced component interactions to further enhance your Angular skills. Happy coding!