Angular

Neil Haddley • September 20, 2025

A platform for building mobile and desktop web applications

Angular JavaScript TypeScriptng-clicomponentstesting

I built an Angular application using modules.

An application has at least one (root) module.

For large applications (with many routes) I used lazy loading modules to keep bundle sizes small.

Getting started

I installed the Angular command line interface using npm

BASH

1% npm i -g @angular/cli

I created a new Angular project using "ng new"

BASH

1% ng new haddley-angular

Tap the image to open it full size

I installed the Angular CLI with npm

Tap the image to open it full size

I skipped Angular routing (I can add that later)

Tap the image to open it full size

I selected CSS (no preprocessor required)

Running the application locally

I started running the new Angular project by changing to the project directory and using "ng serve"

BASH

1% cd haddley-angular
2% ng serve

Tap the image to open it full size

I changed to the new project folder and ran "ng serve"

Tap the image to open it full size

The app was running on localhost:4200

Tap the image to open it full size

The out-of-the-box home page

App Component

ng new creates a single app component.

The app component is defined using four files:

The app.component.css file is the component's cascading style sheet.

The app.component.html file is the component's html template.

The app.component.spec.ts file is used for testing.

The app.component.ts file is the component's TypeScript code.

Tap the image to open it full size

app.component.html is the home page component's template

Tap the image to open it full size

app.component.ts contains the home page component's class

Tap the image to open it full size

app.component.css contains the home page component's styling (initially empty)

Tap the image to open it full size

The app.component.spec.ts file provides unit tests that can be run using "ng test"

App Module

ng new creates a single module.

The app module includes a reference to the App Component.

main.ts

The app module is referenced in the project's main.ts file.

Updating the app.component

I updated app.component.html to:

HTML

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

At runtime the {{title}} Angular expression is replaced with the value of the app component's title property.

Tap the image to open it full size

I updated the app.component.html template

Tap the image to open it full size

The web page updated

Adding a component

I used "ng generate" component to add a header component (in a "components" folder)

BASH

1% ng generate component components/header

Tap the image to open it full size

I ran ng generate

Tap the image to open it full size

The new component's selector was "app-header"

Selector prefix

The angular.json file contains project-specific settings.

The prefix value ("app" in this case) is added to the component name to create the selector.

Updating the app.component (again)

I updated the app component's html template to make use of the header component.

Tap the image to open it full size

I updated the app.component's template to use the new component/selector

Passing content to a component

Replacing the <h1> tags with the <app-header> tags resulted in the {{title}} value being lost.

Tap the image to open it full size

The header component was rendered and the title text was discarded

ng-content can be used to access the missing content

I updated the header component's html template and used <ng-content> to return the parent component's content.

Tap the image to open it full size

ng-content rendered the "contents" provided by the parent

Passing properties

I updated the <app-header> tag to pass the {{title}} value as a component attribute.

Tap the image to open it full size

I updated the example to provide the title value to the child component as an attribute

@Input

I made a corresponding update to the header component.

I added the @Input() title: string; property (and the import { Input } from '@angular/core'; import)

Tap the image to open it full size

I added @Input() title: string to the header component allowing it to accept the "title" attribute

Updating the tests

I updated the app component and header component tests (in line with the changes made above).

The app component and header component are shown in the test results.

ng build

I used ng build to build the dist folder that I uploaded to the web server.