Angular components are indeed the fundamental building blocks of Angular applications. They are self-contained, reusable units that manage a specific part of the user interface and its associated logic. Let’s break down the three key parts in more detail:

TypeScript Class: This is the brain of your component.

• It’s where you write the logic that controls the component’s behavior.
• It defines the data the component uses (properties).
• It handles user interactions and events (methods).
• Decorators like @Component attach metadata, linking the class to the template and styles.
• It’s written in TypeScript, allowing for strong typing and better code organization.

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

@Component({
  selector: 'app-greeting', // Selector to use this component in HTML
  templateUrl: './greeting.component.html', // Path to the HTML template
  styleUrls: ['./greeting.component.css'] // Path to the CSS styles
})
export class GreetingComponent {
  message: string = 'Hello, Angular Learners!'; // Data property

  constructor() {
    console.log('Greeting component initialized'); // Example of component logic
  }

  greetUser(userName: string): string { // Example of a method
    return `Greetings, ${userName}!`;
  }
}

In above code

@Component decorator: Metadata that tells Angular this class is a component.

• selector: ‘app-greeting’: How you’ll use this component in other templates (e.g., <app-greeting></app-greeting>).
• templateUrl: ‘./greeting.component.html’: Links to the HTML template file.
• styleUrls: [‘./greeting.component.css’]: Links to the CSS style file(s).

export class GreetingComponent: Defines the component class.

• message: string = ‘Hello, Angular Learners!’;: A property holding the greeting message.
• constructor(): A simple constructor for initialization (often used for dependency injection, which is more advanced).
• greetUser(userName: string): string: A method that takes a username and returns a personalized greeting.

HTML Template: This defines the structure and presentation of the component’s view.

• It’s written in HTML, creating the visual elements users see.
• Angular’s template syntax (e.g., data binding, directives) allows for dynamic content.
• Templates can display data from the TypeScript class and respond to events.
• It’s responsible for rendering the component in the browser.

<div class="greeting-container">
  <h1>{{ message }}</h1>  <!-- Interpolation to display the 'message' property -->
  <p>{{ greetUser('Code Enthusiast') }}</p> <!-- Calling the 'greetUser' method -->
</div>

In above code

• {{ message }}: Interpolation – Angular replaces this with the value of the message property from the TypeScript class.
• {{ greetUser(‘Code Enthusiast’) }}: Calls the greetUser method in the TypeScript class and displays the returned value using interpolation.
• div with class=”greeting-container”: Basic HTML structure to contain the content and apply styles.

CSS Styles: These control the visual appearance of the component.

• They define the styling specific to this component, ensuring visual consistency.
• Styles are often scoped to the component, preventing style conflicts with other parts of the application.
• You can use standard CSS or CSS preprocessors (like Sass, Less) for more advanced styling.
• Encapsulation of styles promotes modularity and maintainability.

.greeting-container {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
}

h1 {
  color: blue;
}

In above code

• .greeting-container styles: Styles applied to the div element with the class greeting-container.
  • Sets a border, padding, text alignment, and background color.
• h1 styles: Styles specifically for the <h1>heading element within the component.
  • Sets the text color to blue.

To learn even more about Angular components and explore them in depth, check out the official Angular documentation: 

https://angular.dev/tutorials/learn-angular/1-components-in-angular