Angular Related

https://angular.dev/installation
https://code.visualstudio.com/docs/nodejs/angular-tutorial#_syntax-highlighting-and-bracket-matching

----
Node JS

Node.js is a JavaScript runtime for server-side applications and is used by most web application frameworks, including Angular.
----
Angular Introduction

Angular is a JavaScript framework used to create dynamic web applications.
Angular applications are written in TypeScript, which is a superset of the JavaScript language.
TypeScript main advantage is that it supports static data types, which makes JavaScript development more familiar to C# and Java developers.

Angular extends HTML with additional attributes called directives. Directives offer functionality to change the behavior or appearance of DOM elements.
Angular includes a router that allows developers to define and manage application states and navigation paths, making it easier to build single-page applications with complex routing
The Angular CLI (Command Line Interface) provides a set of tools for creating, building, testing, and deploying Angular applications.
----
Angular vs React

The main competitor to Angular is React.
There are some low-level differences between them.

Angular requires you to use TypeScript to be effective, for example.
If you are used to using a language like C# or Java, then TypeScript will be familiar.
React doesn’t require TypeScript (although it is supported) and leans toward mixing HTML, JavaScript, and CSS content together
in a single file, which not everyone likes.
----
Constructors

Unlike other languages, such as C#, JavaScript doesn’t use the name of the class to denote the constructor.

Template

Displaying data to the user using template.

Signals are the headline addition to Angular 16 and they are used to describe the relationships between the data values used by an application,
which helps Angular update the HTML content it presents to the user as efficiently as possible.

The @Injectable decorator has been applied to the StaticDataSource class.
This decorator is used to tell Angular that this class will be used as a service,
which allows other classes to access its functionality through a feature called dependency injection.

The bootstrap file uses the Angular browser platform to load the root module and start the application.

The declarations property tells Angular that it should load the root component,
the providers property tells Angular about the shared objects used by the application,
and the bootstrap property tells Angular that the root component is the AppComponent class.

The computed function accepts a function argument that generates a value using one or more other signals.
Angular won’t recompute the value of the computed signal unless the underlying signals change.

Pipes are classes that transform data before it is received by a directive or component.
That may not sound like an important job, but pipes can be used to perform some of the most commonly required development tasks easily and consistently.

----
mat-toolbar

To have all html tags for material like above add below package

ng add @angular/material

import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
----
console.log("firstName is Adam");
Press F12 and can see the console..
----

To install angular

1) first go to
https://nodejs.org/en

2) login mac_admin
3) sudo npm install -g @angular/cli

------------------
To install 16.0.0 version
sudo npm install --global @angular/cli@16.0.0

4) download visual studio

ng add @angular/material

------------------

npm install --save @angular/material
npm install --save @angular/animations
npm install bootstrap
npm install @fortawesome/fontawesome-free
npm install --save-dev json-server
npm install --save-dev jsonwebtoken
npm install bootstrap

npm install bootstrap
npm install @fortawesome/fontawesome-free
npm install --save-dev json-server
npm install --save-dev jsonwebtoken

npm uninstall bootstrap
npm uninstall @fortawesome/fontawesome-free
npm uninstall --save-dev json-server
npm uninstall --save-dev jsonwebtoken

npm install bootstrap@5.2.3
npm install @fortawesome/fontawesome-free@6.2.1
npm install --save-dev json-server@0.17.3
npm install --save-dev jsonwebtoken@8.5.1

ng add @angular/material@16.0.0 --defaults
ng update @angular/cli@^16 @angular/core@^16
ng add @nguniversal/express-engine@^16

ng config projects.exampleApp.architect.build.options.styles \
'["src/styles.css",'\
'"node_modules/bootstrap/dist/css/bootstrap.min.css"]'

sudo npm uninstall -g @angular/cli
sudo npm cache clean --force
https://macpaw.com/how-to/uninstall-visual-studio-mac (uninstall visual code)

F12 -- chrome console

----
Important extensions

.ts file extension means TypeScript
.spec.ts is for test file
----
New Angular Project

ng new todo --routing false --style css --skip-git --skip-tests
ng new Primer --routing false --style css --skip-git --skip-tests
ng new SportsStore --routing false --style css --skip-git --skip-tests
ng new example --routing false --style css --skip-git --skip-tests
ng new exampleApp --routing false --style css --skip-git --skip-tests

To install bootstrap
ng add @ng-bootstrap/ng-bootstrap

ng version
ng build
ng serve
npm run json (Run only in command prompt raa... not in Visual Studio)
npm run prerender

----