50 Most Useful Angular Snippets

Component & Template Basics

1. Creating a Component

ng generate component component-name

2. Basic Component Setup

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {}

3. Interpolation in Template

<p>{{ title }}</p>

4. Property Binding

<img [src]="imageUrl" alt="Image" />

5. Event Binding

<button (click)="onClick()">Click Me</button>

6. Two-Way Data Binding

<input [(ngModel)]="name" />

---

Directives & Structural Elements

7. ngIf Usage

<p *ngIf="isVisible">Visible content</p>

8. ngFor Loop

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

9. ngSwitch Example

<div [ngSwitch]="value">
  <p *ngSwitchCase="'a'">A</p>
  <p *ngSwitchCase="'b'">B</p>
  <p *ngSwitchDefault>Other</p>
</div>

---

Services & Dependency Injection

10. Creating a Service

ng generate service my-service

11. Service Example

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return ['Angular', 'TypeScript', 'Snippets'];
  }
}

12. Injecting Service in Component

constructor(private myService: MyService) {}

13. Using HTTP GET Request

this.http.get('url').subscribe(data => console.log(data));

---

Forms

14. Reactive Form Setup

form = this.fb.group({
  name: ['', Validators.required]
});

15. Template-Driven Form Validation

<input name="email" ngModel required email />

16. Form Submission

<form (ngSubmit)="onSubmit()"></form>

---

Pipes

17. Using Built-In Pipes

{{ price | currency:'USD' }}

18. Custom Pipe Example

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

---

Routing

19. Defining Routes

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

20. Navigating Programmatically

this.router.navigate(['/home']);

21. Accessing Route Parameters

this.route.snapshot.paramMap.get('id');

---

Lifecycle Hooks

22. OnInit Hook

ngOnInit(): void {
  this.loadData();
}

23. OnDestroy Hook

ngOnDestroy(): void {
  this.subscription.unsubscribe();
}

---

View & DOM Access

24. @ViewChild Access

@ViewChild('myInput') inputRef!: ElementRef;

25. Element Ref Usage

this.inputRef.nativeElement.focus();

---

Async & Observables

26. Async Pipe in Template

<p>{{ data$ | async }}</p>

27. Subscribing to Observables

this.service.getData().subscribe(data => (this.data = data));

28. BehaviorSubject Example

const subject = new BehaviorSubject<number>(0);
subject.next(10);

29. Using RxJS map Operator

this.obs.pipe(map(val => val * 2)).subscribe(console.log);

---

Change Detection & Performance

30. TrackBy Function for ngFor

trackById(index: number, item: any): number {
  return item.id;
}

31. ChangeDetectionStrategy OnPush

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})

---

Event Emitters & Parent-Child Communication

32. @Output Event Emitter

@Output() clicked = new EventEmitter<void>();

this.clicked.emit();

33. Parent Listening to Child Event

<app-child (clicked)="onChildClicked()"></app-child>

---

Angular Modules & Lazy Loading

34. Creating a Module

ng generate module feature

35. Lazy Loading Module in Routing

{ path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }

---

Angular CLI & Tooling

36. Running Angular Development Server

ng serve

37. Building Angular Project

ng build --prod

---

TypeScript & Angular Utilities

38. Interface Declaration

interface User {
  id: number;
  name: string;
}

39. Using Enums

enum Status {
  Active,
  Inactive,
  Pending
}

40. Optional Chaining

user?.address?.street

---

Angular Material Snippets

41. Adding Material Button

<button mat-button>Click Me</button>

42. Importing Material Module

import { MatButtonModule } from '@angular/material/button';

---

Styling & Class Binding

43. Class Binding

<div [class.active]="isActive"></div>

44. Style Binding

<div [style.background-color]="bgColor"></div>

---

HTTP & Interceptors

45. Adding HTTP Interceptor

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const cloned = req.clone({ headers: req.headers.set('Auth', 'token') });
    return next.handle(cloned);
  }
}

---

Guards & Resolvers

46. CanActivate Guard

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  return this.authService.isLoggedIn();
}

47. Using Resolver

resolve(route: ActivatedRouteSnapshot): Observable<Data> {
  return this.dataService.getData();
}

---

Internationalization (i18n)

48. Using Angular i18n

<h1 i18n="site title">Welcome</h1>

49. Translating Text in Component

constructor(private translate: TranslateService) {}
this.translate.instant('HELLO');

---

Standalone Components (Angular 15+)

50. Creating a Standalone Component

@Component({
  standalone: true,
  selector: 'app-standalone',
  template: '<p>Standalone Component</p>',
  imports: [CommonModule]
})
export class StandaloneComponent {}