# Activity #6 
Getting Started with Angular

### **Step 1: Install Node JS**

Download the NodeJS LTS From the official website and install it to your machine

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724525843518/1c87fa10-db78-4959-a0cf-2d80d3c379ee.png align="center")

### **Step 2: Install Angular CLI**

Install the angular cli using "npm install -g @[@angular](@angular)/cli"  
\- This command installs the Angular CLI globally on your system. The Angular CLI is a command-line interface tool that helps you manage Angular projects, generate components, and streamline development tasks.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724525885336/ebc29c05-f7ab-4c18-a82a-1b5a86e96058.png align="center")

### **Step 3: Create new Angular project**

Create new angular project, name it to your liking  
"ng new my-angular-app"

\-This command generates a new Angular project called `my-angular-app`. The CLI will ask a few setup questions (e.g., whether to include Angular routing, which stylesheet format to use). It creates a project directory with the necessary Angular files, configuration, and a basic app structure.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724526085893/48766386-1746-45c9-b109-fce5838de27b.png align="center")

### **Step 4: Run the angular app**

I used ng serve to run the Angular app

\- The `ng serve` command compiles the Angular project and starts a local development server. By default, it serves the application at [`http://localhost:4200`](http://localhost:4200). It also enables live reloading, so any changes made to the code will automatically reflect in the browser.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724571915171/41f21516-bf07-48c7-95bb-0f84585c5c21.png align="center")

**npm start**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724601744289/2049db8f-04ba-46e4-9a0e-8dbeaa0ddaf3.png align="center")

### **Step 5: Make your first change**

Edit the app.component.html

\- The `app.component.html` file is the template for the main component of the Angular app. You can edit this file to change the HTML structure and content of the main page. Angular components consist of an HTML template, a TypeScript class, and optional CSS styling.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724572643881/cf33e868-53e7-4d77-abdd-6b60f4675636.png align="center")

### **Step 6: Build your app for production**

use "npm run build"

\- This command triggers the `ng build` script, which compiles your Angular app and optimizes it for production. The output is placed in the `dist/` directory, which contains the static files (HTML, CSS, and JavaScript) that can be deployed to a web server.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724574235345/3ab9c1ec-4f42-43b8-bb8d-8000af594644.png align="center")

**OUTPUT**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724572788236/8f7dd11a-6e21-47c1-ab24-7c334f1db3a9.png align="center")

Github Repository: [https://github.com/RodelDecio/angular.git](https://github.com/RodelDecio/angular.git)