Angular Components and Directives

Components

• Building blocks of Angular applications
• Represent a piece of user interface (UI)
• Consist of:
  • Template (HTML)
  • Class ( TypeScript)
  • Metadata (decorator)
• Can contain other components (nesting)
• Can communicate with each other through:
  • Property binding
  • Event binding
  • Services

Directives

• Instructions in the template that manipulate the DOM
• Can be:
  • Component directives (e.g. ngComponentOutlet)
  • Attribute directives (e.g. ngClass, ngStyle)
  • Structural directives (e.g. ngIf, ngFor)
• Used to:
  • Add or remove elements from the DOM
  • Change the appearance or behavior of elements
  • Respond to user input
• Can be custom-built or used from the Angular framework

Pipes

• Functions that transform data in the template
• Used to:
  • Format data (e.g. dates, currencies)
  • Filter data (e.g. sorting, filtering)
  • Convert data types
• Can be:
  • Built-in pipes (e.g. json, async)
  • Custom-built pipes
• Used in the template with the | symbol (e.g. {{ value | json }})

Services

• Singleton objects that provide a specific functionality
• Used to:
  • Share data between components
  • Perform complex operations
  • Interact with external systems (e.g. APIs)
• Can be:
  • Injected into components using dependency injection
  • Used as a provider for other services
• Examples: logging, authentication, data storage

Routing

• Mechanism for navigating between views in an Angular application
• Uses the URL to determine which view to display
• Consists of:
  • Routes configuration (e.g. app-routing.module.ts)
  • Route parameters (e.g. :id)
  • Route guards (e.g. authentication)
• Can be used to:
  • Create a navigation menu
  • Dynamically load components
  • Preserve application state between views

Components

• Angular applications are built using components, which represent a piece of user interface (UI)
• A component consists of a template (HTML), a class (TypeScript), and metadata (decorator)
• Components can contain other components (nesting) and communicate with each other through property binding, event binding, and services

Directives

• Directives are instructions in the template that manipulate the DOM
• There are three types of directives: component directives, attribute directives, and structural directives
• Directives are used to add or remove elements from the DOM, change the appearance or behavior of elements, and respond to user input
• Examples of built-in directives include ngClass, ngStyle, ngIf, and ngFor

Pipes

• Pipes are functions that transform data in the template
• Pipes are used to format data (e.g. dates, currencies), filter data (e.g. sorting, filtering), and convert data types
• There are built-in pipes (e.g. json, async) and custom-built pipes
• Pipes are used in the template with the | symbol (e.g. {{ value | json }})

Services

• Services are singleton objects that provide a specific functionality
• Services are used to share data between components, perform complex operations, and interact with external systems (e.g. APIs)
• Services can be injected into components using dependency injection and used as a provider for other services
• Examples of services include logging, authentication, and data storage

Routing

• Routing is a mechanism for navigating between views in an Angular application
• Routing uses the URL to determine which view to display
• A route configuration defines the routes in an application (e.g. app-routing.module.ts)
• Route parameters (e.g. :id) and route guards (e.g. authentication) can be used to customize routing behavior
• Routing can be used to create a navigation menu, dynamically load components, and preserve application state between views

Learn about the building blocks of Angular applications, including components and directives. Understand how to use them to create and manipulate the user interface.