Creating Components (ng generate) in Angular Tutorial

Welcome back to CodeYourCraft! Today, we're diving into creating components using Angular's CLI command ng generate. By the end of this tutorial, you'll be able to create your own custom components, a crucial skill in building Angular applications. 🎯

Understanding Components

Components are the building blocks of an Angular application. They encapsulate HTML, TypeScript, and styles for a specific part of the UI. Every Angular app has at least one root component (AppComponent). 📝

Creating a Component

To create a new component, open your terminal and navigate to your Angular project directory. Then, run the following command:

bash

ng generate component component-name

Replace component-name with the name of your new component. This command will create files for your component in the appropriate folders. 💡 Pro Tip: It's best practice to use PascalCase for component names.

The generated files

Upon running the command, the following files will be created:

src/app/component-name/component-name.component.ts (TypeScript file for your component)
src/app/component-name/component-name.component.html (HTML template for your component)
src/app/component-name/component-name.component.spec.ts (Unit test file for your component)
src/app/component-name/component-name.component.css (Optional styles for your component)

Now, let's explore the TypeScript file.

component-name.component.ts

This file is where your component class resides. Here's a simple example:

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.css']
})
export class ComponentNameComponent {
  message: string = 'Hello, ComponentName!';
}

The @Component decorator tells Angular that this class represents a component.
The selector specifies the HTML tag to use when rendering the component.
The templateUrl points to the HTML template file for the component.
The styleUrls list any styles associated with the component.
The component class has a property message and a constructor is not required.

component-name.component.html

This file contains the HTML template for your component:

html

<p>
  {{ message }}
</p>

The {{ message }} binding displays the message property from the component class.

Using the new component

To use the new component in your AppComponent, you'll need to add it to the app.component.html file:

html

<app-component-name></app-component-name>

Now, when you run your application, you should see the message "Hello, ComponentName!" displayed.

Quiz Time!

With this tutorial, you've learned how to create your own Angular components using the ng generate command. In the next lesson, we'll dive into component interaction and communication, so stay tuned! 📝