Angular


Uncategorized

Updated Jul 29th, 2023

Docs here

Notes on Traversy Media Crash Course

Video | Code

ng serve is the command to run the dev server. 4 different files for each component.

Lots of dependencies installed including things like built-in testing

using the cli to create new component seems like a big win as it automatically creates all the necessary files (folder and four individual files).

no need to import components

can use inline styles with the [ngStyle] directive. Can also add conditional styles with the [ngClass] directive.

similar to passing props to components in React

@Input() text: string;

event emitter
@Output() btnClick

then catch inn component

(btnClick)=”toggleAddTask”

Creates an interface called Task

Creating a service to interact with the server using the cli too via the ng generate service/services

but we can bring in an Observable for rxjs library.

uses json server by creating a db.json file and a script to run the fake dev server on port 5000. Weill actually see requests in the network tab.

With forms submit we can emit an event and we bring in Output and the EventEmitter

this.addOnTask

$event gets you the event. What is the dollar sign in angular?

In the service you return an Observable

When multiple components need access to state. Instead of prop drilling (a React concept). Create a UI Service by bringing in Observable and Subject from rxjs. Keep a boolean in a higher component and let other components subscribe to it.

 color="{{ showAddTask ? 'red' : 'green' }}"

export class UIService

TypeScript sidenote: when a function doesn’t return anything you can specify that in the function definition with :void after the parenthesis.

*ngIf=”showAddTask”

Implements the router by scratch.

<a routerLink="/">Go Back</a>

Sources

Brad Traversy 2-hour crash course from 2021 here is great. He builds the same to-do-ist/task-tracker app in the three major frameworks.

Fireship of course. (Angular is back with a vengeance – April 2023), (Angular in 100 Seconds), (20 minute tic-tac-toe PWA with Angular 8) and some older videos as well.

Spring 2023 Theo says here Data Flow is getting bearable with data flows via signals. Angular comes with stability. Signals lets you work outside of state management, lets you work around them, and has given angular hope.

Joshua Morony says here in Early 2023 that angular is in demand in the job market.