Hello World in Angular - Make First Change in Code

Focus: Build your first Angular App and understand how the “Hello World” works.

Creating the Angular Project

1. Start by opening the command prompt or Terminal.
2. Use Angular CLI to generate a new Angular application:

Accept the defaults or choose CSS/SCSS as per your preference.

Running the Angular App

1. Navigate to the project folder:

Then start the development server:

Browser opens at http://localhost:4200 — showing the default Angular welcome page.

Understanding the Angular App Structure

1. The instructor explains important folders:
2. src/ — where all app code lives
3. app/ — where components are defined
4. main.ts — application entry file
5. index.html — default HTML loaded in the browser
6. (common Angular real structure explained in most Angular videos)

Modifying the “Hello World” Message

1. Open src/app/app.component.html
2. Replace default Angular template code with:

Save and check the browser — the message updates automatically thanks to Angular’s live reload.

Explanation of Components

1. The instructor describes what a component is:
2. A component has 3 pieces:
3. HTML template
4. CSS styles
5. TypeScript logic
6. The app.component.ts file connects them.

Changing the Title from TS File

1. Inside app.component.ts, the instructor shows how to change the title property:

Then reflects it in the HTML using interpolation:

Browser shows dynamic text.

Auto-Reload Feature

1. Angular CLI provides hot reload by default.
2. Any file change gets reflected instantly in the browser without manual reload.