4. Components and Templates in Angular

Components and templates are at the heart of Angular applications. In this section, you will learn how to create and manage components, and how Angular’s declarative syntax helps you build dynamic views.

What are Components?

A component in Angular is a class that interacts with the user interface (UI) through an associated template. It contains:

• TypeScript Class: Handles the logic and data.
• HTML Template: Defines the UI structure.
• CSS Styles: Controls the presentation of the component.

Each component is a part of an Angular app that encapsulates the data, logic, and view. Angular’s component-based architecture allows you to break your app down into smaller, reusable pieces.

Example of a Component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

Creating a New Component

You can create components manually or using the Angular CLI, which is the recommended way. The CLI helps generate the necessary files and automatically updates your app module.

Command to Generate a New Component:

ng generate component component-name

This command will create four files:

• component-name.component.ts: The TypeScript class for your component.
• component-name.component.html: The template file where you define the view.
• component-name.component.css: Stylesheet for the component.
• component-name.component.spec.ts: A testing file for the component.

Component Interaction: Input and Output

In Angular, components can pass data to one another using @Input() and @Output() decorators. These allow parent-child communication between components.

• @Input(): To receive data from a parent component.
• @Output(): To send data or events to a parent component.

Example of Passing Data Using @Input():

@Component({
  selector: 'app-child',
  template: `<p>{{ childMessage }}</p>`,
})
export class ChildComponent {
  @Input() childMessage: string;
}

Templates in Angular

Templates in Angular use HTML enhanced with Angular’s special syntax for dynamic content rendering, event handling, and more. Angular provides several powerful directives that make it easy to create interactive UIs.

Key Template Syntax Features:

• Interpolation: Embedding dynamic values into HTML.

<h1>{{ title }}</h1>

Binding: Angular supports various types of bindings like property binding, event binding, and two-way binding.

<input [value]="name" (input)="name = $event.target.value">

Directives: Enhancing HTML

Directives in Angular add functionality to your templates. They are instructions in the DOM. Common directives include:

• Structural Directives: Like *ngIf and *ngFor for conditionally rendering parts of the UI.
• Attribute Directives: Like ngClass or ngStyle for dynamically applying styles or classes.

Example of ngFor:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Two-Way Data Binding

Two-way data binding ensures that data in the component’s class is in sync with the template. This is achieved using the [(ngModel)] directive.

Example of Two-Way Binding:

<input [(ngModel)]="username" placeholder="Enter username">
<p>Your username is: {{ username }}</p>

This section gives a solid understanding of Angular components, how to generate and manage them, and introduces template syntax and key concepts like data binding and directives.

5. Data Binding in Angular

Data binding is one of the core concepts in Angular, allowing interaction between the application’s component and its template. Angular provides different ways to bind data between the component’s logic and the user interface.

Types of Data Binding:

1. Interpolation:
   • Syntax: {{ expression }}
   • Interpolation allows you to bind data from the component class into the template.
   • Example:

<h1>Welcome, {{ userName }}!</h1>

• Here, the value of userName from the component will appear in the view.

Property Binding:

• Property binding binds values from the component to the HTML element’s properties.
• Syntax: [property]="expression"
• Example:

<img [src]="imageUrl" alt="Angular Logo">

• Here, imageUrl is a property in the component class that binds to the src attribute of the image element.

Event Binding:

• Event binding allows you to capture user interactions and handle them in the component.
• Syntax: (event)="eventHandler($event)"
• Example:

<button (click)="onClick()">Click Me!</button>

• When the button is clicked, the onClick() method in the component will execute.

Two-Way Data Binding:

• Two-way data binding keeps the component and template in sync with each other.
• Syntax: [(ngModel)]="property"
• Example

<input [(ngModel)]="userName" placeholder="Enter your name">
<p>Hello, {{ userName }}!</p>

1. • The userName property is updated as the user types in the input field.

Use of ngModel:

To enable two-way data binding, you need to import the FormsModule in your application module.

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

In the next lesson, we will continue to explore more advanced topics such as Angular Directives, Angular Services and Dependency Injection, giving you a deeper understanding of Angular’s powerful capabilities.