Angular Basics Explained in Plain Simple Language

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

# Create a new project
ng new my-app

# Go into the project
cd my-app

# Start the development server
ng serve

# Open http://localhost:4200

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
Hello, {{ name }}!
`
})
export class AppComponent {
  name = 'Angular';
}

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

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <h2>{{ title }}</h2>
      <p>{{ body }}</p>
    </div>
  `,
  styles: [`
    .card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; }
  `]
})
export class CardComponent {
  title = 'My Card';
  body = 'This is a simple card component.';
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button (click)="handleClick()">{{ label }}</button>`
})
export class ButtonComponent {
  @Input() label = 'Click me';
  @Output() clicked = new EventEmitter<void>();

  handleClick() {
    this.clicked.emit();
  }
}

<h1>Hello, {{ name }}!</h1>
<p>You are {{ age }} years old.</p>

// In the component:
export class AppComponent {
  name = 'Angular Learner';
  age = 25;
}

<input [(ngModel)]="username" placeholder="Enter your name">
<p>Hello, {{ username }}!</p>

// In the component:
export class AppComponent {
  username = '';
}

<button (click)="increment()">Click me</button>
<p>Count: {{ count }}</p>

// In the component:
export class AppComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back!
</div>

<ng-template #loggedOut>
  Please log in.
</ng-template>

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item }}
  </li>
</ul>

// In the component:
items = ['Angular', 'React', 'Vue'];

<!-- ngClass -->
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">
  Styled box
</div>

<!-- ngStyle -->
<p [ngStyle]="{ color: textColor, fontSize: fontSize + 'px' }">
  Hello
</p>

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private items = ['Angular', 'React', 'Vue'];

  getItems() {
    return this.items;
  }

  addItem(item: string) {
    this.items.push(item);
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-item-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="add()">Add AngularJS</button>
  `
})
export class ItemListComponent {
  items: string[] = [];

  constructor(private dataService: DataService) {
    this.items = dataService.getItems();
  }

  add() {
    this.dataService.addItem('AngularJS');
    this.items = this.dataService.getItems();
  }
}

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' }
];

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>