Angular

framework

Maintenance / Updating Dependencies

When updating Angular using the ng update commands, automatic migrations will run. For upgrade steps, see this Website on Updating Angular. See Angular Migrations

Angular Data Binding

• Use [] to bind from source to view
• Use () to bind from view to source
• Use [()] to bind in a two-way sequence of view to source to view

CSS Overrides

Component specific CSS gets a specific attribute assigned to ensure it on gets applied to the current component. If you want to override classes outside of your own component, a global styles.scss has to be used.

@Input setters fallacy

Don’t forget to add a set to the setter! Otherwise it will not be called. Troubleshooted this on 2022-11-14

assignment$ = new ReplaySubject<UserUnitAssignmentDTO>(1);
@Input() set assignment(assignment: UserUnitAssignmentDTO){
  this.assignment$.next(assignment);
}

Avoid open Observable subscriptions

destroy$ = new Subject<void>();
ngOnDestroy(): void {
  this.destroyed$.next();
  this.destroyed$.complete();
}
 
// subscription is only open until destroy$ lives
this.route.params
  .pipe(takeUntil(this.destroy$))
  .subscribe(value => { ... });