Component & Template Basics
1. Creating a Component
ng generate component component-name
2. Interpolation in Templates
<p>{{ title }}</p>
3. Property Binding
<img [src]="imageUrl" />
4. Event Binding
<button (click)="onClick()">Click Me</button>
5. Two-Way Data Binding
<input [(ngModel)]="name" />
Structural Directives
6. ngIf Example
<p *ngIf="isVisible">Visible content</p>
7. ngFor Example
<ul> <li *ngFor="let item of items">{{ item }}</li> </ul>
8. ngSwitch Usage
<div [ngSwitch]="value"> <p *ngSwitchCase="'a'">A</p> <p *ngSwitchCase="'b'">B</p> <p *ngSwitchDefault>Other</p> </div>
Services & Dependency Injection
9. Creating a Service
ng generate service my-service
10. Injecting a Service
constructor(private myService: MyService) {}
11. HTTP GET Request
this.http.get('url').subscribe(data => console.log(data));
Forms
12. Reactive Form Setup
form = this.fb.group({ name: ['', Validators.required] });
13. Template-Driven Form Validation
<input name="email" ngModel required email />
14. Submitting a Form
<form (ngSubmit)="onSubmit()">...</form>
Pipes
15. Using Built-In Pipes
{{ price | currency:'USD' }}
16. Creating a Custom Pipe
@Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } }
Routing
17. Defining Routes
const routes: Routes = [ { path: 'home', component: HomeComponent } ];
18. Navigating Programmatically
this.router.navigate(['/home']);
19. Route Parameters
this.route.snapshot.paramMap.get('id');
Lifecycle Hooks
20. OnInit Lifecycle
ngOnInit(): void { this.loadData(); }
21. OnDestroy Cleanup
ngOnDestroy(): void { this.subscription.unsubscribe(); }
Utility Snippets
22. ViewChild Access
@ViewChild('myInput') inputRef!: ElementRef;
23. Using async Pipe
<p>{{ data$ | async }}</p>
24. TrackBy for Performance
<li *ngFor="let item of items; trackBy: trackById"></li>
25. Emit Event from Child Component
@Output() clicked = new EventEmitter<void>();
State Management & Observables
26. Subscribing to Observables
this.service.getData().subscribe(data => this.data = data);
27. Using BehaviorSubject
const subject = new BehaviorSubject<number>(0); subject.next(1);
28. RxJS map Operator
this.obs.pipe(map(val => val * 2)).subscribe(console.log);
Advanced Angular
29. Lazy Loading Modules
{ path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
30. Standalone Components (Angular 15+)
@Component({ standalone: true, imports: [CommonModule], selector: 'app-standalone', template: '<p>Standalone Component</p>' }) export class StandaloneComponent {}
Top comments (0)