Angular components are created as classes with the @Component decorator. They are responsible for defining:

• Template: The HTML structure that the component will render.
• Styles: The CSS rules that style the component's template.
• Logic: The TypeScript code that handles the component's behavior, data manipulation, and interactions.

Template

The template is the HTML structure that defines how the component will be displayed. It uses Angular's template syntax to bind data to the view, handle events, and create dynamic content.

<div>
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <button (click)="onClick()">Click Me</button>
</div>

Styles

You can style your component using CSS rules within the styles property of the @Component decorator or by referencing an external CSS file.

h2 {
  color: blue;
}

Logic

The component's logic is written in TypeScript and defines how the component interacts with data, handles events, and manages its internal state.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = 'My Component';
  description = 'This is a description.';

  onClick() {
    // Handle click event logic
  }
}

Summary

• Angular components are the core building blocks of Angular applications.
• They encapsulate UI elements, logic, and data.
• Components are created using the @Component decorator and have a template, styles, and logic.
• Components can interact with each other and communicate through properties and services.