Tutorials Logic, IN +91 8092939553 info@tutorialslogic.com
FAQs Support
Navigation
Home About Us Contact Us Blogs FAQs
Tutorials
All Tutorials
Services
Academic Projects Resume Writing Interview Questions Website Development
Compiler Tutorials

Getting Started with Angular

Prerequisites

  • Node.js 20.19+nodejs.org
  • Basic knowledge of HTML, CSS, and JavaScript/TypeScript
  • A code editor — VS Code is recommended

Install Angular CLI

Install & Create Project
# Install Angular CLI globally
npm install -g @angular/cli

# Verify installation
ng version

# Create a new project (standalone by default in Angular 21)
ng new my-app

# Navigate into the project
cd my-app

# Start the dev server
ng serve --open

Angular 21 Project Structure

Project Structure
my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # Root standalone component
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.config.ts         # App-level providers (replaces AppModule)
│   ├── main.ts                   # Bootstrap entry point
│   └── index.html
├── angular.json                  # CLI workspace config
├── tsconfig.json                 # TypeScript config
└── package.json

The Root Component (Angular 21)

Root Component & Bootstrap
import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-root',
    standalone: true,
    template: `
        <h1>Hello, {{ name() }}!</h1>
        <button (click)="changeName()">Change Name</button>
    `,
    styles: [`h1 { color: #dd0031; }`]
})
export class AppComponent {
    name = signal('Angular');

    changeName() {
        this.name.set('World');
    }
}
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        // provideHttpClient() — auto-provided in Angular 21
    ]
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
    .catch(err => console.error(err));

Essential CLI Commands

CommandDescription
ng new app-nameCreate a new Angular project
ng serveStart dev server (localhost:4200)
ng buildBuild for production (output to dist/)
ng generate component nameGenerate a new standalone component
ng generate service nameGenerate a new service
ng generate pipe nameGenerate a new pipe
ng testRun unit tests (Vitest in Angular 21)
ng lintRun linting
ng updateUpdate Angular and dependencies
ng versionShow Angular CLI version

Ready to Level Up Your Skills?

Explore 500+ free tutorials across 20+ languages and frameworks.