Modern Angular features

 If I were mentoring a senior Angular developer in Angular 19–21, I would say this:

Don't just learn the API. Learn why Angular introduced it and when to use it. That's what interviewers expect from a senior engineer.

Below are the modern Angular features you should master.

---

1. Signals ⭐⭐⭐⭐⭐ (Highest Priority)

Signals are Angular's new reactive state management system.

Writable Signal

import { signal } from '@angular/core';

count = signal(0);

increment() {
  this.count.update(value => value + 1);
}

reset() {
  this.count.set(0);
}

Read value:

console.log(this.count());

Notice:

count()

not

count

---

2. Computed Signal ⭐⭐⭐⭐⭐

Automatically recalculates when dependencies change.

count = signal(5);

doubleCount = computed(() => this.count() * 2);

this.count.set(10);

console.log(this.doubleCount());

Output

20

No subscriptions.

No RxJS.

No manual update.

---

3. Effect ⭐⭐⭐⭐⭐

Runs whenever a signal changes.

effect(() => {
    console.log(this.count());
});

If

this.count.set(100);

Effect runs automatically.

Use for

• Logging

• Analytics

• Local Storage

• Side Effects

Never update another signal inside an effect unless you know exactly why—it can create feedback loops.

---

4. Input Signals ⭐⭐⭐⭐⭐

Old Angular

@Input()
user!: User;

Angular 19+

import { input } from '@angular/core';

user = input.required<User>();

Read

this.user()

Benefits

• Strong typing

• Reactive

• Cleaner API

---

5. Model Signal ⭐⭐⭐⭐☆

Two-way binding between parent and child.

name = model('');

Parent

<app-user [(name)]="username"></app-user>

No more boilerplate with @Input() and @Output() for simple two-way bindings.

---

6. Output API ⭐⭐⭐⭐☆

Old

@Output()

save = new EventEmitter<User>();

New

import { output } from '@angular/core';

save = output<User>();

Emit

this.save.emit(user);

---

7. Linked Signal ⭐⭐⭐⭐☆

Useful when one signal derives from another but still allows updates.

selectedUser = linkedSignal(() => {

   return users()[0];

});

A more advanced feature for keeping state synchronized.

---

8. Resource ⭐⭐⭐⭐⭐

Handles asynchronous loading.

Instead of

ngOnInit(){

this.http.get(...).subscribe(...)

}

Modern Angular

users = resource({

loader: () =>

fetch('/api/users')

});

Angular tracks

• Loading

• Error

• Value

for you.

---

9. Standalone Components ⭐⭐⭐⭐⭐

@Component({

standalone:true

})

No AppModule.

Import components directly.

---

10. Functional Interceptors ⭐⭐⭐⭐⭐

Instead of

implements HttpInterceptor

Use

export const authInterceptor:

HttpInterceptorFn=

(req,next)=>{

return next(req);

}

Cleaner.

Tree-shakable.

---

11. Functional Guards

Old

implements CanActivate

New

export const authGuard:

CanActivateFn=

()=>{

return true;

}

---

12. Template Blocks ⭐⭐⭐⭐⭐

Instead of

*ngIf

Use

@if(){

}

Instead of

*ngFor

Use

@for(){

}

Also

@switch

@case

@default

@empty

@defer

---

13. Defer Loading ⭐⭐⭐⭐⭐

@defer{

<app-chart/>

}

Loads later.

Better performance.

---

14. New Dependency Injection

Instead of

constructor(

private service:

UserService

){}

You can use

service = inject(UserService);

No constructor needed.

---

15. DestroyRef ⭐⭐⭐⭐☆

Instead of

ngOnDestroy(){

subscription.unsubscribe();

}

Use

destroyRef = inject(DestroyRef);

Works well with takeUntilDestroyed().

---

16. takeUntilDestroyed()

Instead of

private destroy$=

new Subject<void>();

Now

this.http.get(...)

.pipe(

takeUntilDestroyed()

)

.subscribe();

No manual cleanup subject required.

---

17. Typed Reactive Forms ⭐⭐⭐⭐⭐

Instead of

FormGroup

Use strongly typed forms.

loginForm = new FormGroup({

email:

new FormControl<string>(''),

password:

new FormControl<string>('')

});

Compile-time type safety.

---

18. Typed HttpClient

this.http.get<User[]>(
'/users'
)

instead of

any

Always prefer typed responses.

---

Signals vs RxJS

This is a favorite interview topic.

Signals	RxJS
Synchronous state	Asynchronous streams
Component state	HTTP, WebSockets, events
No subscribe()	Uses subscribe()
Automatic dependency tracking	Operator-based pipelines
Great for UI state	Great for async workflows

Senior recommendation

Use Signals for:

• Form UI state

• Counters

• Theme selection

• Selected item

• Sidebar open/closed

• Local component state

Use RxJS for:

• HTTP requests

• WebSockets

• Event streams

• Complex async composition

• Polling and retries

---

What interviewers expect from a Senior Angular Developer

You should be able to explain:

• Why Signals were introduced (to provide fine-grained reactivity without relying on global change detection for every update).

• When to use Signals versus RxJS.

• How standalone components simplify application architecture.

• Why template blocks (@if, @for, @defer) improve readability and performance.

• How inject() differs from constructor injection and when each is appropriate.

• How to write typed forms and typed HTTP services.

• How to avoid memory leaks using DestroyRef and takeUntilDestroyed().

A learning order I'd recommend

1. TypeScript advanced types (interfaces, generics, utility types, mapped types).

2. Standalone components and application bootstrap.

3. Signals (signal, computed, effect).

4. Signal APIs (input, output, model).

5. Template blocks (@if, @for, @defer).

6. Dependency injection with inject().

7. Typed Reactive Forms.

8. Functional guards and interceptors.

9. DestroyRef and takeUntilDestroyed().

10. RxJS integration with Signals (toSignal(), toObservable()).

If you master these topics with hands-on coding, you'll be well prepared for modern Angular 19–21 senior developer interviews.