Advanced Angular Techniques

1. Dependency Injection

Dependency Injection (DI) is a design pattern that allows a class to receive its dependencies from external sources rather than creating them itself.

Note: Angular has a built-in DI framework that makes it easy to manage service instances.


@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }
}

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private dataService: DataService) { }
}

2. Lazy Loading

Lazy loading is a design pattern that postpones the loading of resources until they are needed.


const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

3. Change Detection Strategies

Angular uses a change detection mechanism to keep the view synchronized with the model. There are two strategies: Default and OnPush.


@Component({
  selector: 'app-on-push',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class OnPushComponent { }

4. Reactive Forms

Reactive forms are a way to create forms in Angular that provide greater flexibility and control. They are more scalable for complex scenarios.


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

5. Custom Directives

Custom directives allow you to create reusable components and modify the behavior of DOM elements.


@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

FAQ

What is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript.

What is the difference between Angular and AngularJS?

Angular is a complete rewrite of AngularJS, offering better performance and a component-based architecture.

Why use Lazy Loading?

Lazy loading improves the performance of your application by reducing the initial load time.