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