In Angular, components are the fundamental building blocks of the application. Each component encapsulates a part of the user interface, along with the logic that controls that part. Understanding components is crucial for building scalable and maintainable Angular applications.

1. Component Class: Defines the logic and data for the component.
2. Component Template: Defines the HTML view for the component.
3. Component Styles: Defines the CSS styles for the component.
4. Metadata: Provides additional information about the component to Angular.

A typical Angular component consists of the following files:

• Component Class (TypeScript): Contains the logic and data.
• Component Template (HTML): Contains the view.
• Component Styles (CSS/SCSS): Contains the styles.

1. Generate a Component: Use Angular CLI to generate a new component.

   ng generate component my-component
   

2. Component Class: Define the logic and data.

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

3. Component Template: Define the view.

   <!-- my-component.component.html -->
   <h1>{{ title }}</h1>
   

4. Component Styles: Define the styles.

   /* my-component.component.css */
   h1 {
     color: blue;
   }
   

Let's create a simple component that displays a message.

1. Generate the Component:

   ng generate component message
   

2. Component Class:

   // message.component.ts
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-message',
     templateUrl: './message.component.html',
     styleUrls: ['./message.component.css']
   })
   export class MessageComponent {
     message: string = 'Welcome to Angular!';
   }
   

3. Component Template:

   <!-- message.component.html -->
   <p>{{ message }}</p>
   

4. Component Styles:

   /* message.component.css */
   p {
     font-size: 20px;
     color: green;
   }
   

5. Using the Component: Add the component selector to the main application template.

   <!-- app.component.html -->
   <app-message></app-message>
   

1. Objective: Create a component that displays a greeting message.
2. Steps:
   • Generate a new component named greeting.
   • Define a greeting property in the component class.
   • Display the greeting property in the component template.
   • Style the greeting message.

1. Generate the Component:

   ng generate component greeting
   

2. Component Class:

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

3. Component Template:

   <!-- greeting.component.html -->
   <p>{{ greeting }}</p>
   

4. Component Styles:

   /* greeting.component.css */
   p {
     font-size: 24px;
     color: purple;
   }
   

5. Using the Component:

   <!-- app.component.html -->
   <app-greeting></app-greeting>
   

• Selector Naming: Ensure the component selector is unique and follows the Angular naming conventions.
• Template and Style URLs: Verify that the paths to the template and style files are correct.
• Data Binding: Use proper data binding syntax ({{ }}) in the template to display component properties.

In this section, we covered the basics of Angular components, including their structure, creation, and usage. Components are essential for building Angular applications, and understanding them is the first step towards mastering Angular. In the next section, we will dive deeper into creating and managing components.