Concise list of Angular essentials

Question

The foundational concepts, tools, and best practices you need to know to be productive with Angular, whether you're a beginner or brushing up.

---

Angular Essentials

1. TypeScript

Angular is built on TypeScript. Understanding TS features like interfaces, classes, types, and decorators is fundamental.

---

2. Modules (NgModule)

• Organize app features.
• Root module = AppModule.
• Feature modules for separation of concerns.

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

---

3. Components

• Core building blocks of UI.
• Use the @Component decorator.
• Must declare them in a module.

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
})
export class HelloComponent {}

---

4. Templates & Data Binding

• {{}} interpolation
• [property] binding
• (event) binding
• [(ngModel)] two-way binding

---

5. Directives and blocks

• Structural: *ngIf, *ngFor
• Attribute: [ngClass], [ngStyle]
• Custom directives with @Directive
• @if, @for, @switch

---

6. Services & Dependency Injection

• Business logic & API calls go here.
• Reusable and testable logic.
• Inject with constructor-based DI.

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}
}

---

7. Routing & Navigation

• Define routes in RouterModule.
• Handle dynamic params, guards, lazy loading.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
];

---

8. HTTP Client

• Use HttpClientModule for API calls.
• Supports observables.

this.http.get('/api/data').subscribe(data => ...);

---

9. Forms (Template-Driven & Reactive)

• Template-driven: ngModel, simple forms
• Reactive: FormBuilder, Validators, reactive patterns

---

10. Lifecycle Hooks

• ngOnInit, ngOnDestroy, ngOnChanges, etc.
• Useful for subscriptions, timers, cleanup.

---

11. Pipes

• Format data in templates (| date, | uppercase)
• Create custom pipes for custom formatting

---

12. Testing (Jest or Karma + Jasmine)

• Use TestBed for unit/component tests
• Mock services and inputs

---

Recommended Tools

• Angular CLI (ng new, ng serve, etc.)
• Angular DevTools (Chrome Extension)
• ESLint + Prettier
• VSCode Angular Snippets

---

Best Practices

• Use lazy loading for feature modules
• Structure folders by feature, not type
• Avoid logic in templates
• Strongly type everything
• Use RxJS for reactive patterns

---