Creating Your First Angular Application

Angular is a powerful front-end framework used to build dynamic, scalable, and maintainable web applications. This guide will walk you through setting up and building your first Angular application from scratch.

By the end of this tutorial, you will have a fully functional Angular application running in your browser.

1. Prerequisites

Before starting, ensure that you have the following installed:

• Node.js and npm – Angular requires Node.js for package management. Download and install from Node.js official website.

• Angular CLI (Command Line Interface) – A tool that simplifies Angular development.

To install Angular CLI globally, run the following command:

npm install -g @angular/cli

Once installed, verify the versions:

node -v
npm -v
ng version

2. Creating a New Angular Project

To create a new Angular application, follow these steps:

1. Open a terminal and navigate to the desired directory.

2. Run the following command to generate a new Angular project:

ng new my-angular-app

3. The CLI will prompt you with configuration options:

   • Would you like to add Angular routing? – Select Yes if you plan to use navigation.

   • Which stylesheet format would you like to use? – Choose CSS, SCSS, or another preferred styling format.

This command sets up an Angular project with the necessary dependencies.

4. Navigate into the project folder:

cd my-angular-app

5. Start the development server:

ng serve

6. Open a browser and go to http://localhost:4200. You should see the default Angular welcome page.

3. Understanding the Project Structure

After creating the project, the folder structure includes:

• src/ – The source code of your application.

  • app/ – Contains the main components, services, and modules.

  • assets/ – Stores static files like images and fonts.

  • environments/ – Holds environment-specific configurations.

• angular.json – Configuration file for Angular CLI.

• package.json – Lists project dependencies.

• tsconfig.json – TypeScript configuration file.

4. Creating Your First Component

Angular applications are built using components, which define the UI and behavior of different sections of the app.

Generating a Component

To create a new component, run:

ng generate component my-first-component

or

ng g c my-first-component

This generates four files inside src/app/my-first-component/:

• my-first-component.component.ts – Component logic.

• my-first-component.component.html – Template file (UI structure).

• my-first-component.component.css – Stylesheet for the component.

• my-first-component.component.spec.ts – Unit test file.

Updating the Component Code

Modify my-first-component.component.ts to include a title property:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.css']
})
export class MyFirstComponent {
  title = 'Hello, Angular!';
}

Edit my-first-component.component.html to display the title:

<h2>{{ title }}</h2>
<p>Welcome to your first Angular component.</p>

Using the Component in the Main App

To display this component, insert its selector (app-my-first-component) inside app.component.html:

<h1>My First Angular Application</h1>
<app-my-first-component></app-my-first-component>

Now, restart the Angular development server:

ng serve

Visit http://localhost:4200, and your new component should be visible.

5. Adding User Interaction with Event Binding

To make the component interactive, modify my-first-component.component.ts:

export class MyFirstComponent {
  title = 'Hello, Angular!';

  changeTitle() {
    this.title = 'Title Updated!';
  }
}

Update my-first-component.component.html:

<h2>{{ title }}</h2>
<button (click)="changeTitle()">Change Title</button>

Clicking the button will update the title dynamically.

6. Styling Your Angular Component

Modify my-first-component.component.css to add styles:

h2 {
  color: blue;
}
button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

Angular supports component-specific styles, ensuring encapsulated styling.

7. Routing in Angular

If you enabled routing during setup, Angular provides src/app/app-routing.module.ts.

To create a new route:

1. Open app-routing.module.ts and add a path for MyFirstComponent:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyFirstComponent } from './my-first-component/my-first-component.component';

const routes: Routes = [
  { path: 'first', component: MyFirstComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. Modify app.component.html to include navigation:

<a routerLink="/first">Go to First Component</a>
<router-outlet></router-outlet>

3. Restart the server and visit http://localhost:4200/first to see your component through routing.

8. Conclusion

Congratulations! You have successfully:

• Installed Angular and created a new project.

• Generated and used a custom component.

• Added event handling for user interaction.

• Styled your component using CSS.

• Implemented routing for navigation.

This is just the beginning of Angular development. Next, explore topics like services, forms, HTTP requests, and state management.