# Components Angular components are the fundamental building blocks of an application. Each component consists of a TypeScript class with behaviors, an HTML template, and a CSS selector. ## Component Definition Use the `@Component` decorator to define a component's metadata. ```ts @Component({ selector: 'app-profile', template: `

`, styles: ` img { border-radius: 50%; } `, }) export class Profile { save() { /* ... */ } } ``` ## Metadata Options - `selector`: The CSS selector that identifies this component in templates. - `template`: Inline HTML template (preferred for small templates). - `templateUrl`: Path to an external HTML file. - `styles`: Inline CSS styles. - `styleUrl` / `styleUrls`: Path(s) to external CSS file(s). - `imports`: Lists the components, directives, or pipes used in this component's template. ## Using Components To use a component, add it to the `imports` array of the consuming component and use its selector in the template. ```ts @Component({ selector: 'app-root', imports: [Profile], template: ``, }) export class App {} ``` ## Template Control Flow Angular uses built-in blocks for conditional rendering and loops. ### Conditional Rendering (`@if`) Use `@if` to conditionally show content. You can include `@else if` and `@else` blocks. ```html @if (user.isAdmin) { } @else if (user.isModerator) { } @else { } ``` **Result aliasing**: Save the result of the expression for reuse. ```html @if (user.settings(); as settings) {

Theme: {{ settings.theme }}

} ``` ### Loops (`@for`) The `@for` block iterates over collections. The `track` expression is **required** for performance and DOM reuse. ```html

{{ i + 1 }}/{{ total }}: {{ item.name }}
No items to display.

``` **Implicit Variables**: `$index`, `$count`, `$first`, `$last`, `$even`, `$odd`. ### Switching Content (`@switch`) The `@switch` block renders content based on a value. It uses strict equality (`===`) and has **no fallthrough**. ```html @switch (status()) { @case ('loading') { } @case ('error') { } @case ('success') { } @default {

Unknown status

} } ``` **Exhaustive Type Checking**: Use `@default never;` to ensure all cases of a union type are handled. ```html @switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new state like 'standby' is added } ``` ## Core Concepts - **Host Element**: The DOM element that matches the component's selector. - **View**: The DOM rendered by the component's template inside the host element. - **Standalone**: By default, components are standalone (since Angular 19, `standalone: true` is default). For older versions, `standalone: true` must be explicit or the component must be part of an `NgModule`. - **Component Tree**: Angular applications are structured as a tree of components, where each component can host child components. - **Component Naming**: Do not add suffixes the `Component` suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration.