Codecademy Logo

Introduction to Angular

Opinionated Framework Angular

Angular is a robust and opinionated framework designed for building scalable web applications. It uses TypeScript and follows a component-based approach, separating the interface, data, and logic.

ng new command in Angular

The Angular CLI’s ng new command bootstraps a new Angular project. This command sets up the project structure and configurations necessary for development.

ng new my-angular-app

Angular CLI commands

The Angular CLI simplifies development with several useful commands:

  • ng generate to create new components, directives, and other Angular elements.
  • ng serve compiles and hosts the application on a local server, automatically refreshing on file changes.
  • ng build compiles and optimizes the application for production.
ng generate component user-profile
ng serve
ng build

@Component decorator in Angular

The @Component decorator in Angular defines a component, specifying its selector, template, and styles. Metadata in the decorator specifies how the component should be processed and used at runtime.

@Component({
  standalone: true,
  selector: 'demo-app',
  templateUrl: './demo-app.component.html',
  styleUrl: './demo-app.component.css',
  imports: [RouterOutlet]
})
export class DemoApp {}

Standalone components in Angular

In Angular, standalone components are configured using the standalone flag. This enables simplified imports and allows the component to be used without needing explicit module management.

@Component({
  standalone: true,
  selector: 'demo-app',
  templateUrl: './demo-app.component.html',
  styleUrl: './demo-app.component.css',
  imports: [RouterOutlet]
})
export class DemoApp {}

Angular template syntax

Angular’s template syntax allows dynamic content rendering using data bindings. Two forms are interpolation and property binding.

Interpolation inserts text into the template with {{ value }}, while property binding dynamically sets element properties using [property]="value".

export class UserProfileComponent {
  userName = 'Rajesh Kumar';
  user = { profileImage: 'path/to/image.jpg' };
}
<!-- using interpolation and property binding in the component template -->
<div>Hello, {{ userName }}!</div>
<img [src]="user.profileImage">

Control-flow Structures in Angular

Angular templates use control-flow structures like @if, @for, and @switch to manage dynamic content display.

  • @if conditionally includes HTML based on a boolean expression.
    @if (a > b) {
      {{a}} is greater than {{b}}
    } @else if (b > a) {
      {{a}} is less than {{b}}
    } @else {
      {{a}} is equal to {{b}}
    }
  • @for iterates over collections to generate repeated elements.
    @for (item of items; track item.name) {
      <li>{{ item.name }}</li>
    } @empty {
      <li>There are no items.</li>
    }
  • @switch renders elements based on the value of an expression, handling multiple conditions.
    @switch (condition) {
      @case (caseA) {
        Case A.
      }
      @case (caseB) {
        Case B.
      }
      @default {
        Default case.
      }
    }

Template variables in Angular

In Angular, template variables store references to DOM elements, allowing easy access and manipulation within the template.

<input #userInput type="text" placeholder="Enter your name" value="Codey">
<h2>{{ userInput.value }}</h2>

Data binding in Angular

Data binding in Angular synchronizes data between the application model and the view. This ensures that any changes in the model are automatically reflected in the UI, eliminating the need for manual DOM updates.

Content Projection in Angular

In Angular, <ng-content> enables content projection, allowing a parent component to project content into a child component. This enhances layout flexibility by allowing developers to construct child components that are more generic.

Child component template:

<!-- menu-item.component.html -->
<div class="menu-item">
  <ng-content></ng-content>
</div>

Parent component template:

<!-- menu.component.html -->
<app-menu-item>
  <p>Projected Content</p>
</app-menu-item>

select attribute of <ng-content>

For multi-slot content projection in Angular, use multiple <ng-content> tags with select attributes to project content based on CSS selectors.

Child component template:

<!-- complex-menu.component.html -->
<div class="menu-header">
  <ng-content select=".headerContent"></ng-content> <!-- First slot -->
</div>
<div class="menu-body">
  <ng-content select=".bodyContent"></ng-content> <!-- Second slot -->
</div>

Parent component template:

<!-- menu.component.html -->
<app-menu-item>
  <div class="headerContent">Header Content</div> <!-- First slot -->
  <div class="bodyContent">Body Content</div> <!-- Second slot -->
</app-menu-item>

NgOptimizedImage directive in Angular

The NgOptimizedImage directive in Angular automatically optimizes images for different screen sizes and conditions, improving load times and resource efficiency.

import { NgOptimizedImage } from '@angular/common';


@Component({
  selector: 'app-image-display',
  standalone: true,
  imports: [NgOptimizedImage],
  template: `<img [ngSrc]="user.profilePictureUrl" width="200" height="200" alt="User Profile Picture">`,
  styleUrl: './image-display.component.css'
})

ngSrc attribute

The ngSrc attribute binds image sources dynamically within Angular templates. Ensure that the width and height of the image are specified, or use the fill attribute to make the image fill the containing element.

<!-- Dynamically binding an image source in Angular -->
<img [ngSrc]="user.profilePictureUrl" width="200" height="200" alt="User Profile Picture">
Next

Learn More on Codecademy

Free course

Intro to Angular

Learn the core concepts of Angular, including the basics of data binding and directives, in this introductory course.
Intermediate
2 hours