Parth Raval

Posted on Jun 5

30 Most Useful Angular Snippets

#angular #javascript #beginners #programming

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 {}