How to Create a Hello World App in Angular

Creating a basic “Hello World” app in Angular is a great way to get familiar with the framework. Follow these simple steps to set up and modify a basic Angular application.

Step 1: Test the Default Angular App

Before diving into customizations, let’s ensure your development environment is set up properly.

1. Navigate to Your Project Folder: Open your IDE’s terminal and navigate to the directory where you downloaded the default Angular app.
2. Install Dependencies:

npm install

Run the App:

ng serve

1. This will compile and serve the app. In a browser, open http://localhost:4200 to see the default Angular web app running. If everything is set up correctly, the default Angular page should load.

Tip: You can keep ng serve running as you modify the app in the next steps.

Step 2: Understand the Angular Project Structure

Familiarizing yourself with the project files is crucial for development.

1. Navigate to the /src Directory:
   • index.html: The main HTML template for the application.
   • style.css: The global style sheet.
   • main.ts: The entry point of the Angular application.
   • favicon.ico: The site icon.
2. Explore the /app Directory:
   • app.component.ts: This is the core component of the app, containing the component’s logic, template, and style.
   • app.component.css: The styles specific to the app.component.
3. Assets and Configuration Files:
   • /assets: Stores images and other static assets.
   • angular.json: Configuration file for Angular projects.
   • package.json: Manages npm dependencies.

Understanding these files will help you as you build more complex applications.

Step 3: Create the ‘Hello World’ App

Now, let’s modify the default app to display a Hello World message.

1. Update the Title:
   • Open first-app/src/index.html and replace the <title> tag with

<title>Homes</title>

• Save your changes.

  Update the App Component:

• Open first-app/src/app/app.component.ts.
• Modify the template in the @Component decorator to

template: `<h1>Hello world!</h1>`,

Update the title in the AppComponent class:

title = 'homes';

Rebuild and Run the App: If you previously stopped the ng serve command, run it again:

ng serve

View the Changes: Open http://localhost:4200 in your browser and verify that your app now displays “Hello World!” as both the title and body content.

By following these steps, you’ve successfully created a basic Angular Hello World app. This simple project helps you understand how Angular components work and how to modify their content.

Keep Learning 🙂