Last update: 9.1.2025 · #angular #tech #programming #front-end ## Intro I'm going to take some time this Labor day to create a small Angular app to cut my teeth on the basics again. The last time I dabbled with Angular is about six years ago while working with the Clerk of Courts and that was to embed some logic into a .NET Framework MVC application. I'm not sure it was best practices, but I'm sure it made handling state quite a bit more straightforward to me. Angular now seems to be quite standalone and self-contained compared to Vue and React. What I mean is there doesn't seem to be a lot of third-party packages needed for common functionality: global state-management, dependency injection, etc. If I recall correctly, and I'm not a front-end dev by any means, but React seemed to need a bit of this and that for functionality sakes. Anyway, I'm starting with this tutorial: https://angular.dev/tutorials/first-app Because I just built this rig, I don't have node installed :scream. So, my first step was to install node and NPM. I've been spoiled because using Mac I've been able to use NVM. The official way of doing this for Windows seems to be [nvm-windows](https://github.com/coreybutler/nvm-windows#installation--upgrades). I'm opting to run this on WSL instead of windows :shrug. ## WSL Node Version Manager Install I installed it using `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash` from https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl which downloads the install script from nvm and installs it with bash by piping the download output. Installed the latest version of node with `nvm instal --lts`. The latest version of node at this time was `v22.19.0` ## Angular I'm installing the latest version of Angular CLI (Tool to do stuff on the command line related to angular project management) with `npm install -g @angular/c cli`. Then I added the Angular Language Service stuff for autocomplete in VS code. I like Webstorm, but I need to understand it more to use it efficiently. Plus my shortcut memory is stuck on VS code(I know I can remap this). Note: This tutorial included best practices for using AI powered IDEs. Something I'll have to get back to. Typescript configuration still confuses me, but I think I can make it clearer using Angular. ### Hello World We begin by downloading a basic angular app file. I'm hardheaded, so I want to create one myself to be able to understand many of the pieces we need. So, I'm going to mosey over to CLI docs to see if I can get one strung up quickly. I started with `ng new hello-world`. Boom, it created everything I needed locally. So, lemme make sure I understand the files: - `index.html` - top-level html file. It has the root component that's rendered in the body - `styles.css` - top-level css for global styles I'm assuming - `main.ts` - where the app starts running - `app.ts` - the app-root component is declared - This is the top-lvevel component. IT incluides the code, HTML template, and styles which can be in the the same file or seperate files. - `app.css` - the stylesheet for this component - `angular.json` - describes the Angular app to the app building tools - `tsconfig.*` - files describe the app's configuration tot he TypeScript compiler Started the app with `npm start` and I got an output. YAY! ![[Pasted image 20250901161936.png]] Let's change the title of the site updating `app.ts` to read hello, bro. I ran into an issue with WSL. When the files are on the windows system and you're trying to run ng cli commands it is super slow. This seems to be the explanation https://learn.microsoft.com/en-us/windows/wsl/compare-versions#exceptions-for-using-wsl-1-rather-than-wsl-2 Putting all this into the WSL storage made it super fast in addition to reload working without having to run sudo(maybe because I'm root). Hello, bro is in action. ### Component with State Changes I guess the last part of this I can create another component with an input and update state on the page on submit. Let's give it a go. I create another directory under `app/components` called `test`. I'm going to use [reactive-forms ](https://angular.dev/guide/forms/reactive-forms)for this example. There is a difference between reactive-forms and template-driven forms. I imported the module in the `@Component` section. I then created a property in the class called input with an empty string as the default value: `input = new FormControl('');` I then created a value to be displayed in the component that reflect the submitted value. `test.component.ts` ```typescript import { Component } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; @Component({   selector: 'app-test-component',   imports: [ReactiveFormsModule],   templateUrl: './test-component.html',   styleUrl: './test-component.css', }) export class TestComponent {   input = new FormControl('');   inputValue: string | null = '';   updateInput = () => this.inputValue = this.input.value; } ``` `test-component.html` ```html <p>test-component works!</p> <label for="input">Name: </label> <input id="input" type="text" [formControl]="input"> <button type="button" (click)="updateInput()">Update Name</button> <p> Input Value: {{ inputValue }}</p> ``` I placed these both in the `app.html` and walaa! We have updating! ![[Pasted image 20250901170504.png]] Let's get into Dependency Injection, Global State Management, and more complex forms next time.