Angular Notes

A collection of notes and references relating to Angular.

Published: 8/15/2025

Use an Angular version directly instead of requiring a global installation. This removes the need to keep a local Angular CLI version updated and makes it easy to swap between projects that use different versions of Angular.

npx -p @angular/cli@20 ng <command>

Buttons inside a HTML form will submit the form when clicked, unless they are type="button"

Idiomatic Angular#

$ suffix for observable variables. user$ = this.usersService.getUser();

Don’t use constructor, use inject#

More flexible, for example, the component is extending another such as control value accessor that already has a constructor.

This: private myService = inject(MyService); Not this: constructor(private myService: MyService) {}

Dependencies:

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

CLI Commands#

Update Angular CLI globally#

npm uninstall -g @angular/cli
npm install -g @angular/cli

Create a project#

ng new <project-name>

Create a module#

ng generate module <name>

Create a component#

ng generate component <module-name>/<component-name>

Create a service#

ng generate service services/<name>

Create a guard#

ng generate guard guards/<folder>/<name>

Generate interface#

ng generate interface interfaces/<name>

Generate environments#

ng generate environments

ng g interceptor interceptors/<name>

Articles#

2023-11-28 Routing and standalone components

https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/angular/navbars

Serve locally as custom domain url#

Update your angular.json

This is what you should do:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "customdomain.baz",
                  "port": 80
                }
            }
        }
    }
}

Update your host file if you are on mac/ linux

go to /etc/hosts

##
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1       customdomain.baz // or whatever your domain is
255.255.255.255 broadcasthost
::1             localhost