Angular Basics – TypeScript Foundations

Angular CLI

npm install -g @angular/cli
ng new ng‑app --strict

--strict enables the strict type‑checking options.

Component Class

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

@Component({ selector: 'app-hello', template: `<h1>Hello {{name}}</h1>` })
export class HelloComponent {
  name: string = 'Angular';
}

Input & Output

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

@Component({ selector: 'counter', template: `
  <button (click)="decrement()">-</button>
  {{count}}
  <button (click)="increment()">+</button>
` })
export class CounterComponent {
  @Input() count = 0;
  @Output() countChange = new EventEmitter<number>();
  increment() { this.count++; this.countChange.emit(this.count); }
  decrement() { this.count--; this.countChange.emit(this.count); }
}

Service with Dependency Injection

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

@Injectable({ providedIn: 'root' })
export class DataService {
  fetch<T>(url: string): Promise<T> {
    return fetch(url).then(r => r.json() as Promise<T>);
  }
}