A less-shown feature of #Angular signals.

The dependency on the multiplicator signal inside the "untrack()" isn't tracked the effect isn't triggered on changes.

Angular's new `defer` block is really cool.

Now you can lazy load parts of your application easily and finer granular than just over routes. The #Angular compiler creates "Lazy Chunk Files" for you with all bundled you use (components, pipes, directives...)

Directive Composition API

Available since #Angular v15.0.0

🔹 Streamlines directive application.
🔹 Boosts reusability & DX!

Key Points:

1️⃣ Simplified Integration:

• Use hostDirectives for easier merging of directive functionalities.

2️⃣ Encapsulation & Reusability:

• E.g., Interactive product cards now centralize logic within the component, not the template.

3️⃣ Extended Functionalities:

• Enhance apps by extending built-in directives or external libraries.

4️⃣ Advanced Interactions:

• Pass data or emit values with ease using expanded host directive declarations.

5️⃣ Compilation Phase:

• Host directives are statically applied, ensuring proper integration.

⚠️ Performance Watch:

Avoid overuse to prevent component bloat and performance issues.

Use directive composition strategically for efficient, high-performing apps. Handle with care!

Real-World Usage:

• Hover-to-zoom on product images.
• Drag-and-drop data cards.
• Click-to-expand for trip details.
• Touch-to-rotate 3D models.

⚠️ Be very careful using this! ⚠️

takeUntilDestroyed() in #Angular v16

Unsubscribing from #RxJS observable.

• Context:
Always pass destroyRef if using takeUntilDestroyed() outside an injection context.

• Injection Context:
Code running before a class (e.g., a component) is instantiated.

Examples: class constructor & class field declarations.

✅ Will Work ✅

• Using inject directly within a class field & chaining with takeUntilDestroyed().

• Using takeUntilDestroyed() within a constructor.

• Explicitly injecting DestroyRef and using it with takeUntilDestroyed().

❌ Won’t Work ❌

• Using takeUntilDestroyed() within ngOnInit without DestroyRef.

• In a Guard or Interceptor DestroyRef.onDestory() in most cases is never called. Since Injector is not destroyed.

What is your preferred way of lazy loading in Angular?

Option 1 - Promise then()
Option 2 - async/await
Option 3 - RxJS defer + retry

🎙 Exciting News! 🎙

Get ready for an electrifying episode of the Angular Master Podcast! We're thrilled to announce our upcoming episode featuring a special guest straight from Lyon, France – Younes Jaaidi!

In this episode, we'll cover a wide range of topics with Younes:

✅ How Younes started his journey in programming.
✅ The importance of testing in Angular development.
✅ Dive into various types of tests in Angular, from unit tests to end-to-end tests.
✅ Best practices for mocking dependencies and services.
✅ Common challenges in testing large Angular applications.
✅ Exploring test-driven development (TDD) in Angular.
✅ Tips for handling Angular forms and user interactions.
✅ Strategies for optimizing Angular test execution.
✅ Debugging and troubleshooting tips for failing tests.
✅ Maintaining a healthy test suite as your Angular project evolves.
✅ The integration of Continuous Integration (CI) and Continuous Deployment (CD) in testing workflows.

But that's not all! Younes is also the mastermind behind the "Pragmatic Angular Testing - Master Class." We'll get an exclusive sneak peek into what participants can expect from this workshop, covering everything from Test-Driven Development to choosing the right tests and implementing pragmatic testing strategies.

Are you excited yet? We sure are! Don't miss this episode, and stay tuned for the release date.

And speaking of workshops, remember to join us for the Pragmatic Angular Testing - Master Class, available both in-person and online. Testing is a vital aspect of frontend development, and Younes will equip you with practical techniques to implement meaningful, maintainable tests for your Angular applications.

But here's the kicker! You can listen to our podcast on all major streaming platforms and catch it on the NG Poland Conf YouTube channel. Stay tuned for more updates, and we look forward to seeing you at NG Poland and JS Poland 2023. 👏🚀

https://bit.ly/amp49-apple
https://bit.ly/amp49-spotify
https://bit.ly/amp49-google
https://bit.ly/amp49-youtube

RxJS Glossary & Semantics - 20 terms you need to understand! (p.1)

When people talk about #RxJS You feel like it's an alien language?

Consumer:
• The entity that subscribes to an Observable to receive values and notifications.

Producer:
• Generates values for an Observable; it can be either shared among multiple subnoscriptions or unique for each subnoscription.

Subnoscription:
• Represents the connection between a Consumer and an Observable, allowing the Consumer to receive values and notifications.

Observable:
• A core RxJS type that represents a lazy collection of future values or events.

Observer:
• An object with optional methods to handle the next value, error, and completion notifications from an Observable.

Subscribe:
• The action of connecting an Observer to an Observable, initiating the flow of values and notifications.

Finalization:
• The process of cleaning up resources when a Subnoscription is completed or errored.

Unsubnoscription:
• The action of terminating a Subnoscription, stopping the flow of values and notifications.

Observation:
• The process of reacting to values and notifications from an Observable, which occurs only during an active Subnoscription.

Observation Chain:
• A series of Observers linked together, where each Observer notifies the next in the chain.

Next/Error/Complete:
• The three types of notifications that an Observable can send to an Observer.

RxJS Glossary & Semantics - 20 terms you need to understand! (p.2)

Multicast/Unicast:
• Describes whether multiple Consumers share a single Producer (Multicast) or each Consumer has its own Producer (Unicast).

Cold/Hot Observable:
• A Cold Observable creates a new Producer for each Subnoscription, whereas a Hot Observable shares a single Producer among all Subnoscriptions.

Push/Pull System:
• RxJS Observables push values to Consumers, which is the opposite of pull systems where Consumers request values.

Operator & Operator Function:
• Functions that transform or modify Observables or the values they emit.

Operation:
• A specific action or transformation applied to values in an Observable stream, often set up by operators.

Stream:
• A sequence of values or events flowing from a Producer to a Consumer.

Source:
• An Observable that provides values to another Observable.

Observable Inputs:
• Various types that can be easily converted to Observables.

Notifier:
• An Observable used to trigger actions in another Observable, often used for coordination between Observables.

RxJS Glossary & Semantics - 20 terms you need to understand! (p.3 extended ^_^)

Lazy:
- An observable won't push a value until there is a subnoscription. A common mistake is to forget to subscribe and wonder why nothing is happening.

Memory Leak:
- If you forget to finalize, or to unsubscribe, or put subnoscriptions within subnoscriptions---RxJS observables will live forever and may even cause unexpected behavior because they are still alive when you expected them to be gone.