Angular
Neil Haddley • September 20, 2025
A platform for building mobile and desktop web applications
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
npm i -g @angular/cli
I skipped Angular routing (I can add that later)
I select 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
I changed to the new project folder and ran "ng serve"
The app is running on localhost:4200
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.
app.component.html is the home page component's template
app.component.ts contains the home page component's class
app.component.css contains the home page component's styling (initially empty)
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
<h1>{{title}}</h1>
At runtime the {{title}} Angular expression is replaced with the value of the app component's title property.
Updated app.component.html template
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
ng generate
The new component's selector is "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.
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.
The header component is rendered and the title text is 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.
ng-content is used to render the "contents" provided by the parent.
Passing properties
Then I updated the <app-header> tag to pass the {{title}} value as a component attribute
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)
I added @Input() title: string to the header component allowing the header component 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
ng build is used to build the dist folder that will be uploaded to the web server.