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 {}
    
    
 
 
 
             
              
Top comments (0)