Generated by All in One SEO v4.9.5.1, this is an llms.txt file, used by LLMs to index the site.

# Angular Training - Tutorials and Updates

Expertise on the Angular framework and modern Web development, authored by a Google Developer Expert (GDE) and Microsoft MVP. ## Core Resources - [Angular Live Training](https://courses.angulartraining.com/live-courses) : Professional workshops and certification programs for developers and teams. - [Online Courses](https://courses.angulartraining.com/courses): Video courses and online exercises fro self-training. - [Angular Certification Exams](https://www.angulartraining.com/angular-certification.html) : Become a certified Angular developer. - [Newsletter](https://www.angulartraining.com/daily-newsletter/) : Insights, tips, and tutorials on the Angular ecosystem and modern Web development. - [Code Reviews](https://www.angulartraining.com/daily-newsletter/code-review) : Architectural guidance and expert consulting provided by Alain Chautard GDE

## Sitemaps

- [XML Sitemap](https://www.angulartraining.com/daily-newsletter/sitemap.xml): Contains all public & indexable URLs for this website.

## Posts

- [One more async pipe syntax trick](https://www.angulartraining.com/daily-newsletter/one-more-async-pipe-syntax-trick/) - We've covered a few different async pipe syntax tricks earlier in this newsletter, as well as why it's important to use the async pipe to automate your subscriptions/unsubcriptions from Observables. Today, let's see another interesting syntax that can be very helpful when a template has multiple subscriptions, such as: @if (firstName$ | async; as firstName)
- [Async pipe syntax tricks](https://www.angulartraining.com/daily-newsletter/async-pipe-syntax-tricks/) - Let's cover some syntax tricks that can make a huge difference when using the async pipe.
- [@let for local variables in Angular views](https://www.angulartraining.com/daily-newsletter/let-for-local-variables-in-angular-views/) - Angular 18.1 brought a new feature to our Angular templates: the ability to create local variables. Just like the new control-flow blocks @if, @for, and @switch, the new syntax uses the @ character with a new keyword: @let. Here is an example: The above code displays 21 as the value of the Angular expression. Why
- [Trigger options for @defer](https://www.angulartraining.com/daily-newsletter/angular-17-trigger-options-for-defer/) - We introduced the new @defer block to lazy-load components on the screen. We saw that @defer includes several config options to display errors, placeholder, and loading templates. Today, let's focus on the possible triggers for such lazy loading. idle This is the default option. Will load the contents of that block once the browser is
- [Lazy-loading with @defer](https://www.angulartraining.com/daily-newsletter/angular-17-lazy-loading-with-defer/) - Today, let's cover how to fully customize lazy-loading with Angular using @defer. What's great about @defer is that it no longer relies on the Angular router. You can lazy-load any standalone component anywhere, anytime, and on your terms, as you can decide the trigger to load that component. Let's start with a basic example: The
- [Binding Router Information to Component Inputs](https://www.angulartraining.com/daily-newsletter/angular-16-preview-binding-router-information-to-component-inputs/) - Passing parameters to routes is a frequent task with Angular. Before Angular 16, we had to inject the ActivatedRoute service and retrieve the parameters from that service using the snapshot or params properties. Now, we can get those values automatically bound to the component inputs using the following router config: If you're using the RouterModule.forRoot()
- [Angular file naming conventions (and how to fix them)](https://www.angulartraining.com/daily-newsletter/angular-file-naming-conventions-and-how-to-fix-them/) - In a recent and surprising move, the Angular team decided to remove the file suffixes it had been using since Angular 2, such as: dashboard.component.ts or user.service.ts. The rationale is that IDEs have become good enough to find what we need, no matter the file name. And that the new convention is closer to React
- [Extending Signals Forms with a custom directive](https://www.angulartraining.com/daily-newsletter/extendings-signals-frosm-with-a-custom-directive/) - I decided to do something different for this newsletter: a video tutorial (about 12 minutes long) instead of a blog post. If you like that format, please let me know. I might use this once or twice per month from now on if you like it. The goal of the video is to re-enable form
- [How to enable zoneless in Angular apps?](https://www.angulartraining.com/daily-newsletter/how-to-enable-zoneless-in-angular-apps/) - Zoneless is the official default change-detection mode in Angular 21+, but there's a lot of confusion (and misleading AI-generated content) out there, so I thought I'd clarify what that means and what you need to change on your apps to enable Zoneless change detection. Because here is the thing: Zoneless is not magical. If you
- [Angular 21 is available!](https://www.angulartraining.com/daily-newsletter/angular-21-is-available/) - Angular 21 has been released, and I'm going to divide the new features into different categories, since a lot of the new features are experimental and not recommended for production use yet. What's stable and production-ready: Angular’s MCP Server, now with more tools — allowing LLMs to use new Angular features from day one. The most interesting
- [Aliasing content for projection](https://www.angulartraining.com/daily-newsletter/aliasing-content-for-projection/) - We have discussed content projection before, as well as multi-slot content projection, a technique where we can pass multiple pieces of content from one component to another. For instance, this can be useful when we want to customize a header, body, and footer of a card or a modal component. We need several different templates to pass to that
- [Errors, arrow functions, and local variables](https://www.angulartraining.com/daily-newsletter/errors-arrow-functions-and-local-variables/) - This week, we’re using the newsletter's 3-2-1 format. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: Getting a reported error in production that you can't reproduce, and you wish you had access to the user's console logs? Well, Rollbar can do that
- [ng-conf keynote news](https://www.angulartraining.com/daily-newsletter/ng-conf-keynote-news/) - This week, I want to share the latest updates from ng-conf, which took place last week in Baltimore, Maryland, USA. The entire keynote is available to watch for free on Youtube. I selected the highlights by topic below - you can click on each to get to that specific topic in the video recording: Introduction
- [Angular AI and debugging tools](https://www.angulartraining.com/daily-newsletter/angular-ai-and-debugging-tools/) - This week, we’re using the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: How to use the Angular Devtools browser extension and the ng namespace functions for debugging. Also, how to use the recently added Signal Graph in the Angular
- [Server-side rendering: SSR or SSG, what's the difference?](https://www.angulartraining.com/daily-newsletter/server-side-rendering-ssr-or-ssg-whats-the-difference/) - I've covered server-side rendering in the past, but recently realized that people get confused about SSR and SSG. What's the difference? SSR stands for Server-Side Rendering, and it does what it says: when requested, an Angular route is rendered on the server before being sent to the client as HTML syntax. Then, the browser loads Angular's
- [Dates, pipes, and coupons!](https://www.angulartraining.com/daily-newsletter/dates-pipes-and-coupons/) - This week, we're using the 3-2-1 format of the newsletter again. I'm posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: Still using Moment.js for date formatting? Take a look at date-fns as a possible alternative. If you're using the date pipe anywhere, including
- [Signal Forms Preview + AI event](https://www.angulartraining.com/daily-newsletter/signal-forms-preview-ai-event/) - This week, we’re using the 3-2-1 format of the newsletter again. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: There are a lot of in-browser free tools to help improve your Angular applications, such as Lighthouse, the Angular DevTools extension (now improved
- [ngModel, model(), and 2-way bindings in general](https://www.angulartraining.com/daily-newsletter/ngmodel-model-and-2-way-bindings-in-general/) - This week, we’re back to the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: Data bindings are one of the older features of Angular, and they were a revolution back when Angular JS was released. Especially 2-way
- [What's new in Angular 20.2?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-20-2/) - Another month, another minor version of our favorite front-end framework! Zoneless This time around, Zoneless change detection becomes stable (more about Zoneless here), so you can remove Zone.js from the equation if you've followed the rules to make sure Angular will detect your changes properly with OnPush-compatible components. Animations The @angular/animations package is deprecated and
- [Visualizing internal dependencies with Madge](https://www.angulartraining.com/daily-newsletter/visualizing-internal-dependencies-with-madge/) - When working on large Angular projects, managing dependencies between files and modules can become a significant challenge. Madge is a developer tool that visualizes and analyzes module dependencies in JavaScript applications, making it an excellent companion for Angular developers. Here is how to give it a try: Install madge: npm install -g madge In the
- [Injection context, Angular talks, and more!](https://www.angulartraining.com/daily-newsletter/injection-context-angular-talks-and-more/) - This week, we're back to the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three (maybe four) articles to revisit: Have you ever used ElementRef in Angular? It's a way to access DOM elements natively, which can come in handy when
- [Angular Newsletter Survey](https://www.angulartraining.com/daily-newsletter/angular-newsletter-survey/) - It's been quite some time since I last asked for feedback about the newsletter, and since we're in the midst of summer and things tend to be a bit slower during that time of year, I thought now would be a good time to ask for your feedback. Here is the feedback form for you,
- [What's new in Angular 20.1?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-20-1/) - Angular 20.1 was just released by the Angular team, with a lot of good tools for improved developer experience: Developer Tools Signal Dependency Graphs: The Angular devtools extension includes an experimental feature to visualize the dependencies between signals in a graph. You can also inspect a signal and jump directly to its definition in the
- [Angular Performance tools and suggestions](https://www.angulartraining.com/daily-newsletter/angular-performance-tools-and-suggestions/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: This series shows how simple template changes can impact performance: part 1 - part 2 - part 3. Two quick updates: Angular v20.1 is coming soon (the
- [State Management, React, and Gemini](https://www.angulartraining.com/daily-newsletter/state-management-react-and-gemini/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: Even though Signals are changing the state management landscape in Angular, it's still a good idea to know the basics of state management libraries to make an informed decision.
- [HTTP interceptors in Angular, using functions](https://www.angulartraining.com/daily-newsletter/http-interceptors-in-angular-using-functions/) - In the past few years, Angular has started replacing some class-based features, such as guards and interceptors, with new function-based syntaxes. What's interesting about interceptors is that the old, dependency injection-based approach is not deprecated and remains valid, though it's a bit more verbose and less convenient. That said, I just updated this 2019 tutorial
- [Angular Profiling in Chrome's Performance Dev Tools](https://www.angulartraining.com/daily-newsletter/angular-profiling-in-chromes-performance-dev-tools/) - Angular 20 introduced a new custom track in Google Chrome for extended information about events, change detection cycles, bindings, and more. Here is what the track looks like - it can get toggled open or closed: In the example above, we can see that a browser interaction triggered change detection in the AppComponent, which is
- [Angular 20 is available, and FrontEnd Nation is next week](https://www.angulartraining.com/daily-newsletter/angular-20-is-available-and-frontend-nation-is-next-week/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three updates worth knowing about: Angular 20 is officially available! You can watch this video from Google/IO about what's new in Angular and tune in at 9 am US/Pacific tomorrow on
- [Angular at Google I/O 2025](https://www.angulartraining.com/daily-newsletter/angular-at-google-i-o-2025/) - I'm writing this post from Google I/O, the annual conference where Google announces updates about all its products and services. This year, AI was everywhere and dominated most sessions, yet we received a good update from the Angular team about what to expect for Angular 20 and later this year: First, a few confirmed items
- [Angular Performance, NgRx, and v20](https://www.angulartraining.com/daily-newsletter/angular-performance-ngrx-and-v20/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Two updates worth knowing about AND three short articles to revisit: I just released two new Angular courses on LinkedIn Learning: Angular State Management with NgRx, a brand new version of
- [Tips on types, @defer, and more!](https://www.angulartraining.com/daily-newsletter/tips-on-types-defer-and-more/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three short articles to revisit: TypeScript is one of the best tools in the Angular toolbox, especially when using types properly. You can (and most likely must) use types with generics
- [Angular Can I Use, Global Summit, and more!](https://www.angulartraining.com/daily-newsletter/2291-2/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three short articles to revisit: Whether you use RxJs Subjects or Angular Signals for reactivity, using the right visibility modifier in TypeScript can help you expose your application state in a
- [Selectorless update, more conferences, and free videos!](https://www.angulartraining.com/daily-newsletter/selectorless-update-more-conferences-and-free-videos/) - In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three (or four) Angular updates to know about: The Angular team started teasing its new "selector-less" RFC with some examples of what this could look like. The goal is to get
- [ngOnChanges lifecycle hook](https://www.angulartraining.com/daily-newsletter/ngonchanges-lifecycle-hook/) - ngOnChanges is an Angular lifecycle hook that is called whenever one or more of the bound input properties of a component changes. This hook helps update the component's state or view in response to changes to the input properties. To use it, implement the OnChanges interface as follows: The above ngOnChanges method will run every
- [ngOnInit lifecycle hook](https://www.angulartraining.com/daily-newsletter/ngoninit-lifecycle-hook/) - A few days ago, we talked about the ngOnChanges lifecycle hook. We saw that every time an @Input() changes, Angular will trigger ngOnChanges. ngOnInit is similar but runs only once; after all @Input() receive their initial value. The official documentation puts it like this: The above definition might surprise you because there is a widespread
- [Tree houses and Angular Day!](https://www.angulartraining.com/daily-newsletter/tree-houses-and-angular-day/) - This week, I'm attending the Microsoft Global MVP summit in the Pacific Northwest of the US, and I thought it would be a good idea to get some inspiration by writing from one of the tree houses on the Microsoft Redmond campus. So here is the view from where I'm writing this newsletter today: I'm
- [Major Angular conferences back this fall!](https://www.angulartraining.com/daily-newsletter/major-angular-conferences-back-this-fall/) - This week, we’re back to using the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three short articles to revisit: Do you know there are several types of RxJs subjects? And when to use each kind? I cover 3 of them
- [Angular 19.2, @defer, and the resource API](https://www.angulartraining.com/daily-newsletter/angular-19-2-defer-and-the-resource-api/) - This week, we’re back to using the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three short articles to revisit: You probably know about lazy-loading, but have you considered using the @defer block with its prefetching and different trigger options? These
- [Angular 19.2 is almost there, CSS tricks, and more!](https://www.angulartraining.com/daily-newsletter/angular-19-2-is-almost-there-css-tricks-and-more/) - As usual, we’re using the 3-2-1 format of the newsletter this week. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: CSS animations can be tricky as the language constantly evolves with new features and new ways to do what could be done
- [A debugging quest and a free Angular weekend!](https://www.angulartraining.com/daily-newsletter/a-debugging-quest-and-a-free-angular-weekend/) - As often, I'm using the updated newsletter format this week. I’m posting a few interesting updates to know about and one question to ponder: Two Angular updates: Gérôme Grignon just released the Angular Debug Quest, a GitHub repo where you can practice fixing common Angular app bugs in one place. The project is open to
- [The Angular documentary is out!](https://www.angulartraining.com/daily-newsletter/the-angular-documentary-is-out/) - Big news this week: The Angular documentary is now available for free on YouTube! It's a 1-hour video going through the origins of the framework and its evolution over time, featuring many of the Angular community members who contributed to the framework's history. On a similar note, I found the TypeScript origins documentary fascinating, and
- [Signals and what's ahead for Angular in 2025](https://www.angulartraining.com/daily-newsletter/signals-and-whats-ahead-for-angular-in-2025/) - As usual, we’re using the 3-2-1 format of the newsletter this week. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three articles to revisit: Content projection is an essential and easy technique to create reusable components. For more complex scenarios, you can also use multi-slot content
- [Angular 19.1 is available!](https://www.angulartraining.com/daily-newsletter/angular-19-1-is-available/) - This week, we're using the 3-2-1 format of the newsletter once more. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three short articles to revisit: HTTP interceptors can be used in several ways to assist with authentication, refactoring code, caching data, and more! Read more about
- [RxJs and Signals interoperability](https://www.angulartraining.com/daily-newsletter/rxjs-and-signals-interoperability/) - Angular 16 introduced several features related to the brand-new Angular Signals, which include two functions enabling RxJs interoperability. toObservable() The name says it all. toObservable() takes a Signal and returns its data as an Observable: This new Observable gets updated every time the underlying Signal value is updated. We can subscribe to it using the
- [Change detection, data formatting, and a free Signals Workshop!](https://www.angulartraining.com/daily-newsletter/change-detection-data-formatting-and-a-free-signals-workshop/) - Happy New Year! Let's get back to the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder – all good knowledge to kickstart 2025 the right way: Three short articles to revisit: Change detection is a tricky topic that keeps evolving as
- [Happy holidays! Ideas of Angular resolutions for 2025](https://www.angulartraining.com/daily-newsletter/happy-holidays-ideas-of-angular-resolutions-for-2025/) - This week, we get back to the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder - all ideas of good practices to adopt in 2025: Three short articles to revisit: eslint is a nice and easy way to ensure you (and
- [Running initialization code when Angular loads + router data updates](https://www.angulartraining.com/daily-newsletter/running-initialization-code-when-angular-loads-router-data-updates/) - I’m posting a few essential articles to revisit, updates to know about, and one question to ponder this week: Three articles to revisit and associated updates with Angular 19 When we need to initialize an application with server data (environment variables, for instance), we can use Angular's APP_INITIALIZER. For more information, revisit this tutorial about
- [Angular 19: Standalone updates](https://www.angulartraining.com/daily-newsletter/angular-19-standalone-updates/) - Angular 19 is a massive release with lots of improvements and new features. I covered all signal-related updates earlier. Today, let's focus on what's changed with standalone features in the framework. First, standalone is the new default! In Angular 19, you don't need the standalone: true option in your decorators, that's the default value now.
- [What do you want from this newsletter in 2025?](https://www.angulartraining.com/daily-newsletter/what-do-you-want-from-this-newsletter-in-2025/) - There are only a month and a few days left in 2024, and my goal is to keep publishing weekly updates until the end of the year. By the time you read this, it will be Thanksgiving in the United States, a time of the year when we are thankful and spend time with our
- [What's new with Signals in Angular 19?](https://www.angulartraining.com/daily-newsletter/whats-new-with-signals-in-angular-19/) - Angular 19 is now available with many different updates. A video recap (23 minutes long) of all these features is available on YouTube. There is a lot to unpack, so this week, my focus is on all signal-related updates. First, signal-based input, output, and view query functions are all stable APIs as of v19, which
- [Angular 19 released next week!](https://www.angulartraining.com/daily-newsletter/angular-19-released-next-week/) - This week, we get back to the new format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder: Three short articles to revisit: If you subscribe to Observables within another subscription, you'll want to read this as it's an anti-pattern. The solution is to
- [RxJs tips and new resource API](https://www.angulartraining.com/daily-newsletter/rxjs-tips-and-new-resource-api/) - In the new format of this weekly newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder this week: Three short articles to revisit: If you haven't adopted the takeUntilDestroyed operator, read this short tutorial about it. It's even better than using the async pipe with @let
- [Standalone, SSR, and more!](https://www.angulartraining.com/daily-newsletter/standalone-ssr-and-more/) - In the new format of this weekly newsletter, I'm posting a few essential articles to revisit, updates to know about, and one question to ponder this week: Three short articles to revisit: Standalone components as they're about to become the default in Angular 19. No more standalone: true will be needed, true will be the
- [Dependency Injection Priority and Hierarchy](https://www.angulartraining.com/daily-newsletter/dependency-injection-priority-and-hierarchy/) - Yesterday, we covered the different options to configure our providers with the providedIn syntax. Today, let's look at how Angular resolves dependency injection using hierarchical injectors. Let's assume we have a ButtonComponent that needs a LoginService. Angular is going to check the injector of ButtonComponent to see if a LoginService is available there (since all
- [ngOnInit vs. constructor in Angular](https://www.angulartraining.com/daily-newsletter/ngoninit-vs-constructor-in-angular/) - Today's post is all about clarifying when to use a constructor and when to use ngOnInit to initialize data in our Angular components. From a chronological standpoint, the constructor is called first. Then, once all component inputs are initialized, Angular is going to call ngOnInit. From that definition, it makes sense to use ngOnInit only
- [ngOnDestroy lifecycle hook](https://www.angulartraining.com/daily-newsletter/ngondestroy-lifecycle-hook/) - After covering ngOnChanges and ngOnInit earlier, let's talk about ngOnDestroy. The ngOnDestroy lifecycle hook is called when an Angular component/directive/pipe is destroyed. I'll refer to components only in this post, but everything you read also applies to directives and pipes. This can happen when the component is removed from the DOM, or the application is
- [Dependency Injection: ElementRef](https://www.angulartraining.com/daily-newsletter/dependency-injection-elementref/) - We use dependency injection daily to inject services in our Angular "objects," such as components, directives, pipes, and other services. Angular does offer other kinds of injectables, though, and one of those is the ElementRef. Its primary purpose is to give us direct access to the native DOM element of a component or a directive.
- [Signals: effect()](https://www.angulartraining.com/daily-newsletter/signals-effect/) - After talking about how to create Signals, how to update them, and how to derive a Signal value from other Signals, let's look at how we can register side effects out of any number of Signals. Enter effect(). The behavior of effect() is almost the same as computed(), with one major difference: computed() returns a
- [Debugging with the ng namespace](https://www.angulartraining.com/daily-newsletter/debugging-with-the-ng-namespace/) - Angular 9 introduced the ng namespace variable, which is available in development mode but not exposed when the application is running in production mode. We can debug an application using that global namespace without any breakpoint or dev tools extension. Here's how. First, select a DOM element Using your browser dev tools, select a DOM
- [Build size budgets](https://www.angulartraining.com/daily-newsletter/build-size-budgets/) - As mentioned earlier in this newsletter, the size of your Javascript matters a lot, as our code has to be downloaded first, then parsed and interpreted by a browser, which will get slower and slower as the size of your app increases. This is why we want optimized production builds. And this is also why
- [What's an injection context?](https://www.angulartraining.com/daily-newsletter/whats-an-injection-context/) - In the past few months, the introduction of the inject() function and the takeUntilDestroyed operator shared something important: While these features are based on functions, these functions have to run within an Angular injection context, or you'll get errors from the framework. That's because Angular relies on dependency injection for almost everything. As a result,
- [Debugging with the JSON pipe](https://www.angulartraining.com/daily-newsletter/debugging-with-the-json-pipe/) - We have all used console.log at some point to debug our code. With Angular, there is an interesting alternative to display debugging information on our web page temporarily: The JSON pipe. The primary usage is as follows: myData | json The above code will output your data as a JSON string in the span element,
- [How to avoid memory leaks with RxJs observables?](https://www.angulartraining.com/daily-newsletter/how-to-avoid-memory-leaks-with-rxjs-observables/) - This post covers a concise, elegant, and overall the most error-proof way to avoid memory leaks by using the async pipe.
- [Change detection for Angular components](https://www.angulartraining.com/daily-newsletter/change-detection-for-angular-components/) - Angular comes with two component change detection strategies: default and onPush. Default is used by default: Angular will check if your component needs to be refreshed every time something happens in the browser. Zone.js triggers such change detection by notifying Angular when a DOM event happens (someone clicked on a button) or a setTimeout completes,
- [ngFor local variables](https://www.angulartraining.com/daily-newsletter/ngfor-local-variables/) - We use the ngFor directive so often that it's easy to forget or even ignore some of its most powerful features. For instance, it's fairly common to access the index of an item in the array we're working with, but there are five more local variables that can be used: index: number: The index of
- [Special Angular team event and more performance tips](https://www.angulartraining.com/daily-newsletter/special-angular-team-event-and-more-performance-tips/) - For the second consecutive week, I want to experiment with a slightly different newsletter format inspired by James Clear’s 3-2-1 weekly newsletter. I aim to give you three short articles about Angular, two quick Angular ecosystem updates, and one question to make you think differently about the code you work with every day. Three short articles
- [Updates, debugging, and performance](https://www.angulartraining.com/daily-newsletter/updates-debugging-and-performance/) - This week, I want to experiment with a slightly different newsletter format inspired by James Clear's 3-2-1 weekly newsletter. My goal is to give you three quick updates about the Angular ecosystem, two short topics to revisit, and one question to make you think differently about the code you work with daily. Three updates to
- [Structural directives shorthand syntax](https://www.angulartraining.com/daily-newsletter/structural-directives-shorthand-syntax/) - Have you ever wondered what's behind the following syntax? Whenever I teach Angular, people end up asking me: "Why is there a * before ngIf and ngFor? If I don't use the *, the IDE seems to be OK with it." Well, yes and no. If you wanted to remove the *, then you would
- [Lazy-loading for better Angular performance](https://www.angulartraining.com/daily-newsletter/lazy-loading-for-better-angular-performance/) - Before we continue our series on standalone components, it is important to talk about the most important tool at our disposal to create more performant Angular applications: Lazy-loading. When we use lazy-loading, instead of building our application as one single bundle of code that gets downloaded as soon as our user accesses the app in
- [An Angular Upgrade Service?](https://www.angulartraining.com/daily-newsletter/an-angular-upgrade-service/) - Earlier this month, I polled people on LinkedIn to know which version of Angular they're currently using at work. Here are the results: First, I was pleasantly surprised that most of them (58%) are fully up-to-date or just one major version behind. What's more worrying is that 24% of them use a non-supported version. So
- [Syntax tricks for Angular HTML attribute bindings](https://www.angulartraining.com/daily-newsletter/syntax-tricks-for-angular-html-attribute-bindings/) - What's great about Angular is that the framework provides many different features out of the box. Some are well documented and widely known, while others are more obscure and less commonly used, though very useful. For instance, there's a ngClass directive to dynamically set classes to an element based on conditions: In the above example,
- [How to use Jest for Angular Unit Tests?](https://www.angulartraining.com/daily-newsletter/how-to-use-jest-for-angular-unit-tests/) - Karma is deprecated, and the Angular team is working on official support for Jest and Web Test Runner. Today, I want to highlight how to set up your Angular project for Jest since it's prevalent in the Javascript ecosystem (React, etc.). It's super fast and 100% browserless, making running tests on a continuous integration server
- [How to use toSignal() outside of an injection context?](https://www.angulartraining.com/daily-newsletter/how-to-use-tosignal-outside-of-an-injection-context/) - If you've ever tried to convert an Observable into a Signal using the toSignal() function, you might have encountered the following error NG0203: toSignal() can only be used within an injection context: This happens when you create an Observable outside of an injection context, which can happen if you want to download data when the
- [How to migrate Angular syntax to the latest features?](https://www.angulartraining.com/daily-newsletter/how-to-migrate-angular-syntax-to-the-latest-features/) - I posted about how to update your version of Angular a while back. Still, with the ongoing updates in the framework, such as standalone components, the new control flow syntax, and the inject() function, there are quite a few new options that aren't required but can still be adopted widely. For instance, if you want
- [When you don't need template-driven or reactive forms](https://www.angulartraining.com/daily-newsletter/when-you-dont-need-template-driven-or-reactive-forms/) - A common misconception shared by many Angular developers is that if you have a form, you need to use template-driven or reactive forms to handle it. The truth is, in most cases, simple forms don't need any of that. Instead, you can use template reference variables. My favorite example is a login form: The two
- [How to create custom pipes?](https://www.angulartraining.com/daily-newsletter/how-to-create-custom-pipes/) - Earlier this month, we covered how to create custom directives. Today, let's tackle how to create custom pipes. Pipes help format data such as strings, dates, numbers, etc. The first thing to do is to use the Angular CLI: ng generate pipe [name] or ng g p [name] It's also possible to generate standalone pipes with the --standalone option: ng
- [FormGroup: All you need to know](https://www.angulartraining.com/daily-newsletter/formgroup-all-you-need-to-know/) - Recently, during an Angular Accelerator coaching call, my client asked what is the point of using FormGroup. I then realized I had never written about FormGroup, so here is a post to fix that. When using reactive forms, we always have at least one FormGroup, which happens to be the entire form. This doesn't mean
- [What's new in Angular 18.1?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-18-1/) - Last week, I covered the new @let syntax to create local variables in our HTML templates. Let's review some other notable updates from Angular 18.1. toSignal() custom equality function Remember the toSignal function to convert an Observable into a Signal? This function now supports an equal parameter to pass a custom equality function. You can
- [3 pieces to discover or read again this summer](https://www.angulartraining.com/daily-newsletter/3-pieces-to-discover-or-read-again-this-summer/) - It's early July, and in several countries, it's a time for vacation, relaxation, and even celebration, like for us in the United States, with the 4th of July holiday to celebrate the country's declaration of independence. As a result, it's a good time to reflect on the content published during the first half of the
- [Debugging without breakpoints](https://www.angulartraining.com/daily-newsletter/debugging-without-breakpoints/) - I covered the Angular Devtools extension in a newsletter entry last year, and this browser extension keeps getting better and better. For instance, with Angular 17, an injector tree view feature was added. With the addition of signals to the framework, we get even better insights and access to our data in a static way
- [Tutorial: Architecting forms with Signals](https://www.angulartraining.com/daily-newsletter/tutorial-architecting-forms-with-signals/) - In today's post, I want to showcase several Angular framework features in one example. More specifically, we'll use standalone components, signals with model() and input(), as well as forms. Our goal is to build a reusable date-range picker component to select two dates: To do so, let's create a standalone component with two HTML date
- [Talks on Signals, SSR, and Angular 18](https://www.angulartraining.com/daily-newsletter/talks-on-signals-ssr-and-angular-18/) - I'm giving several talks at free conferences and events this week, so I thought I would share those with you in case you're interested. As always, all of these are free for you to enjoy. Two of those events already have a recording available on YouTube: Server-side rendering with Angular (30-minute talk at Angular Global
- [Auto-filtering a dropdown list with datalist](https://www.angulartraining.com/daily-newsletter/auto-filtering-a-dropdown-list-with-datalist/) - At times, we developers are so focused on Angular and TypeScript that we forget that even the basics, such as HTML and CSS, are always evolving. In that spirit, I've covered some hidden gems of HTML in the past. For instance, I've seen numerous consulting clients use a specific library for fancy auto-filter or auto-complete
- [What's new in Angular 18?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-18/) - The Angular team announced the release of Angular 18 earlier today. You can read the official announcement for in-depth updates. In the meantime, I thought I would summarize the top 6 highlights of this new version here: Control flow syntax is now stable (no more dev preview), including useful warnings when not using the track
- [Signals: Effect cleanup](https://www.angulartraining.com/daily-newsletter/signals-effect-cleanup/) - You're probably familiar with ngOnDestroy for Angular components/pipes/directives, which cleans things up when an Angular object is destroyed. A typical use case is to unsubscribe from RxJs subscriptions (though there are better-suited tools for this now) or cancel a timer. Angular Signals introduced the effect() function to run side-effects, including RxJs Observables or timers. As
- [Signals custom equality functions](https://www.angulartraining.com/daily-newsletter/signals-custom-equality-functions/) - Angular Signals are growing almost every day with new features and new ways of building Angular applications. If you're still unsure about signals and want to catch up, you can watch this Angular Signals workshop recording on Youtube or sign up for my continuously updated Angular Signals course. Today, let's explore how Angular determines if
- [How to use Angular Router State?](https://www.angulartraining.com/daily-newsletter/how-to-use-angular-router-state/) - The Angular Router supports passing custom state information with every navigation. Here is an example of using routerLink with some attached state: As you can see, state is an @Input of the routerLink directive. You can pass any number of objects you want to that state. Such a state gets added to the browser's history.state
- [What's an Angular view?](https://www.angulartraining.com/daily-newsletter/whats-an-angular-view/) - As Angular developers, we're used to thinking of our application as made up of different components. The funny thing is that from the perspective of the Angular team (and compiler), an Angular application is made up of views. What's the difference? The Angular documentation says it best: A view is the smallest grouping of display
- [Understanding Angular/Typescript types](https://www.angulartraining.com/daily-newsletter/understanding-angular-typescript-types/) - First, some news: I'm running a public 5 half-day online Angular class during the week of April 22nd. It's the perfect class if you're new to Angular or have some experience and want to ensure you know about all the fundamentals. It's the ideal class to prepare for the Angular Level 1 certification exam. On
- [Recap of ng-conf 2024](https://www.angulartraining.com/daily-newsletter/recap-of-ng-conf-2024/) - Ng-conf 2024 wrapped up a few hours ago, and the event was filled with great news for Angular enthusiasts. First, the forecast for the following few versions looks very bright: The Angular team went on to reveal more of these expected features by showing what they're currently working on: For the first time, the team
- [Code challenge #3 solution](https://www.angulartraining.com/daily-newsletter/code-challenge-3-solution/) - Before I dive into the solution of code challenge #3, I wanted to mention that my next FREE workshop is scheduled for April 4th. It will be all about getting into RxJs from scratch, and you can register here. I'll start from the basics and move on to more advanced topics, such as subjects and
- [Code challenge #3: RxJs Wizardry](https://www.angulartraining.com/daily-newsletter/code-challenge-3-rxjs-wizardry/) - It's been a few months since our last code challenge, where the goal is to have you look at some code that isn't working and make you improve your Angular skills along the way. In this code challenge #3, we have two select dropdowns that have to work together so that when we select a
- [viewChild() and contentChild() for signal-based queries](https://www.angulartraining.com/daily-newsletter/viewchild-and-contentchild-for-signal-based-queries/) - After introducing model() for signal-based 2-way bindings, let's dive into viewChild() and contentChild() for signal-based queries. In case you're not familiar with Angular queries, they existed before Angular 17.2 as the @ViewChild and @ContentChild decorators. ViewChild is a way to get a reference on an HTML within the current component's template. For instance, if we
- [model() for signal-based 2-way data bindings](https://www.angulartraining.com/daily-newsletter/model-for-signal-based-2-way-data-bindings/) - Angular 17.2 brought more features to the signal-based components approach, where almost everything in our components will become signals. We've already covered that inputs can be signals since Angular 17.1. As an Angular developer, you've probably used ngModel in the past to create two-way data bindings. You might have created your own 2-way bindings using
- [All about environment variables with Angular](https://www.angulartraining.com/daily-newsletter/all-about-environment-variables-with-angular/) - Angular apps created with the Angular CLI used to have automatic environment creation built-in for new projects. While this automation was removed in recent years to simplify the learning curve of Angular, it is still possible to add support for different environments using the command: ng generate environments Before we generate such environments, it's important
- [5 tips for Strictly Typed Reactive Forms](https://www.angulartraining.com/daily-newsletter/5-tips-for-strictly-typed-reactive-forms/) - Forms can be a very complex part of any web application, and today, I will cover some useful tips and tricks for using Reactive Forms with strict types. Use nonNullable: true to restore default values on reset Form controls and groups are nullable by default in Angular, which means that the following example of FormControl
- [What's new in Angular 17.1?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-17-1/) - Angular 17.1 brings new features to the framework and goes one step further towards signal-based components with the introduction (as a developer preview) of Signal inputs. What's a Signal input? Instead of using the @Input decorator, we can now use the input() function from @angular/core. This function creates an input value that is received as
- [Two ways to update Angular Signals](https://www.angulartraining.com/daily-newsletter/three-ways-to-update-angular-signals/) - Yesterday, I wrote about some best practices around exposing a Signal in our Angular applications. Let's now take a look at the two different ways a Signal can be updated. set() The easiest way to update a Signal is the set() method. Nice and easy for basic data types such as strings or booleans: update()
- [Need your input + some goodies](https://www.angulartraining.com/daily-newsletter/need-your-input-some-goodies/) - Welcome to the first edition of the Weekly Angular Newsletter! With this new weekly format comes the option to do things differently, such as more in-depth tutorials, code challenges, or audio/video content. As a result, I would like to collect your input by filling out this form. That way, I'll know what content works best
- [Last post of the year!](https://www.angulartraining.com/daily-newsletter/last-post-of-the-year/) - Congratulations for making it to the end of year one of the Daily Angular Newsletter! This is the 260th entry of the year, which means I managed to publish something every single working day of the year. That was a lot of work, so In 2024, I'm moving to a weekly format, which means we
- [Ideas to improve your Angular skills in 2024](https://www.angulartraining.com/daily-newsletter/ideas-to-improve-your-angular-skills-in-2024/) - The number one impediment I've seen over the years for Angular developers to grow with the framework is that they're stuck with an older version of Angular at work and can't use any of the modern features of Angular 16 and 17, for instance. This tends to happen because of dependencies, which makes this newsletter
- [Angular 16 and 17 top features](https://www.angulartraining.com/daily-newsletter/angular-16-and-17-top-features/) - This year, Angular has had two major versions with really major changes. This post highlights the top three features of Angular 16 and 17 worth getting into before we start 2024, with links to all relevant newsletter entries so far so you can revisit and explore those: Angular Signals (dev preview in 16, officially released
- [Most popular posts of 2023](https://www.angulartraining.com/daily-newsletter/most-popular-posts-of-2023/) - Happy holidays! As we get closer to the end of the year, this week will be all about recaps from what we covered in this newsletter in 2023. That way, you can revisit important topics covered so far as we prepare for 2024. Also, in 2024, the newsletter will start a weekly cadence instead of
- [Angular Component Testing with Cypress](https://www.angulartraining.com/daily-newsletter/angular-component-testing-with-cypress/) - Great news! Thanks to all your contributions, I'm happy to organize another coffee-fueled 2-hour workshop in January, which will be about testing Angular components with Cypress! The date is January 18th, 2024, at 9 am US/Pacific (time zone converter here). Like last time, the workshop will be on Zoom, and we'll have a few hands-on
- [Animated Route Transitions with Angular 17](https://www.angulartraining.com/daily-newsletter/animated-route-transitions-with-angular-17/) - Yesterday, we covered how to generate CSS animations for our Angular applications. Today, let's see how to use such animations as route transitions when navigating from one route to the next: The first thing we need to do is add the right providers for animations and transitions along with our routing config: Then, we can
- [CSS Animation Generator](https://www.angulartraining.com/daily-newsletter/css-animation-generator/) - The end of the year is getting closer and closer, and I realized I haven't covered anything CSS-related in this newsletter yet! Let's fix this today with a tool that makes generating CSS animations super easy: CSS generator. As you can see in the animation, you only need to select a type of animation, tweak
- [Typescript enums and why I avoid them](https://www.angulartraining.com/daily-newsletter/typescript-enums-and-why-i-avoid-them/) - As an Angular coach, I review a lot of Angular applications. One thing that I see in a lot of code bases is the use of Typescript enums to store a bunch of constants: The above code creates a new type CompassDirection with four possible values: CompassDirection.North, CompassDirection.East, etc. Each constant gets assigned a numerical
- [Dynamic forms with FormArray](https://www.angulartraining.com/daily-newsletter/dynamic-forms-with-formarray/) - We've covered reactive and template-driven forms in the past. One of the nice features of reactive forms is the FormArray class. You can use FormArray for a form where the number of inputs is dynamic and can increase or decrease: To achieve the above, we create a FormArray in our component and add a method
- [Typescript Cheatsheet: Type](https://www.angulartraining.com/daily-newsletter/typescript-cheatsheet-type/) - A few months back, I shared a cheat sheet for Typescript Control Flow. Today, I want to share a cheat sheet on types, which are the main reason why Typescript is so useful. A few interesting features that aren't too well known: The keyof operator and the Type[Property] illustrated in the Mapped Types section One
- [Prefetching with the @defer block](https://www.angulartraining.com/daily-newsletter/prefetching-with-the-defer-block/) - We've covered how to use @defer to lazy-load blocks of code in our Angular v17+ applications. We also touched on the different trigger options as well as the ability to create custom triggers with when. Yet there's more to uncover with the prefetch option: The above code would display my-component when the user interacts with
- [Code challenge #2 Solution](https://www.angulartraining.com/daily-newsletter/code-challenge-2-solution/) - In yesterday's code challenge, our application wasn't displaying any data. There were two reasons for that problem: HttpClient was not provided in the application The change detection strategy OnPush wasn't compatible with the data flow of the application I'm including links to previous newsletter entries for deeper dives on the different topics involved in that
- [Code challenge #2: DI or not DI?](https://www.angulartraining.com/daily-newsletter/code-challenge-2-di-or-not-di/) - One of the cool things about teaching Angular, running an Angular certification program, and interacting with hundreds of developers (and code bases) all around the world is that I get to see a lot of good ideas but also a lot of repeated mistakes. Today, I want to share a small code challenge inspired by
- [Angular Signals Workshop Next Week](https://www.angulartraining.com/daily-newsletter/angular-signals-workshop-next-week/) - It's official! I'm running an Angular Signals Workshop next Thursday, December 14th, at 9 am US/Pacific time (12 pm US/Eastern - 6 pm Central European time). Registration and attendance are free by using this link, but your support is appreciated by buying me a coffee if you feel so inclined. Of course, the more support
- [Local variables and the new block syntax](https://www.angulartraining.com/daily-newsletter/local-variables-and-the-new-block-syntax/) - Earlier this year, I mentioned how the async pipe can become much more useful if we use a local variable instead of multiplying subscriptions to an Observable. In this example, we store the data we get from a subscription in the user variable: While that syntax still works as is, you might want to use
- [Using FormBuilder or FormControl?](https://www.angulartraining.com/daily-newsletter/using-formbuilder-or-formcontrol/) - When creating reactive forms with Angular, we have two options available. The most documented one is to inject the FormBuilder service and use it to generate your form's structure: FormBuilder makes perfect sense for forms that contain lots of elements. This service gives us methods that are factories for the following syntax, which is a
- [How to cache HTTP requests with a service worker?](https://www.angulartraining.com/daily-newsletter/how-to-cache-http-requests-with-a-service-worker/) - In the past few weeks, we've talked about how to cache data with HTTP interceptors, with Subjects, and with shareReplay. While all these options work, they are intrusive and need additional code for your application. Another option doesn't require touching your application code; it only requires additional configuration, and that's using a service worker. What's
- [Customized Deferred Loading with "when"](https://www.angulartraining.com/daily-newsletter/customized-deferred-loading-with-when/) - Last month, I introduced the defer block and its trigger options to perform lazy-loading of a template block with various options. One of the most flexible ways to user defer is to use the when condition because it allows us to load some code based on a boolean value - which means we have complete
- [Make types from JSON samples](https://www.angulartraining.com/daily-newsletter/make-types-from-json-samples/) - First, a quick announcement: I'm running a donation-based online Angular Signals Workshop on December 14th and January 18th. If you're interested, feel free to show your interest here, and remember that you don't have to pay anything if you don't want to or can't. Earlier this year, I shared how to generate type definitions for
- [ng-conf 2024 early bird pricing ends soon](https://www.angulartraining.com/daily-newsletter/ng-conf-2024-early-bird-pricing-ends-soon/) - I've already mentioned that ng-conf is the only conference I wouldn't miss for any reason, and ng-conf 2024 will be no exception to that rule. I want to bring your attention to the fact that the conference is scheduled early next year: March 20-21, 2024 (it was in June 2023). Early bird pricing ends on
- [ShareReplay Code Challenge #1 Solution](https://www.angulartraining.com/daily-newsletter/sharereplay-code-challenge-1-solution/) - What was wrong with yesterday's code example? Here it is as a reminder: Since the developer used the shareReplay operator, the intent was to cache the result of the HTTP request so that we do not make that request repeatedly. The problem is that if several components call the getData() method, they all get a
- [routerLinkActive directive](https://www.angulartraining.com/daily-newsletter/routerlinkactive-directive/) - Have you ever wondered how to highlight a specific HTML element, such as a link or a button, when a particular URL is selected? Something similar to this: The good news is that there is a specific directive for this called routerLinkActive. Here is how you can use it: The value set to routerLinkActive is
- [Code Challenge #1: shareReplay](https://www.angulartraining.com/daily-newsletter/code-challenge-1-sharereplay/) - One of the cool things about teaching Angular, running an Angular certification program, and interacting with hundreds of developers (and code bases) all around the world is that I get to see a lot of good ideas but also a lot of repeated mistakes. Today, I want to share a small code challenge inspired by
- [Short video recaps of Angular 17 features](https://www.angulartraining.com/daily-newsletter/short-video-recaps-of-angular-17-features/) - In case you missed it, the Angular team has created a playlist of all Angular 17 features in (mostly) short videos with highlights and examples. Those are, of course, similar to the content covered in the newsletter last week, but here are some direct links to the shortest and most interesting videos: New Control Flow
- [Vote for the future of this newsletter in 2024](https://www.angulartraining.com/daily-newsletter/vote-for-the-future-of-this-newsletter-in-2024/) - There's only a month and a half left in 2023, and my goal is to keep publishing daily updates till the end of the year, except on public US holidays (such as Thanksgiving and Black Friday later this week). In 2024, I'm thinking about slowing the cadence down to weekly or even monthly emails, and
- [Angular 17: Signals, Server-side rendering, and Standalone](https://www.angulartraining.com/daily-newsletter/angular-17-signals-server-side-rendering-and-standalone/) - We're not done with Angular 17 updates! Here are a few more updates on Signals, Standalone, and Server-side rendering. Signals Signals have graduated from developer preview and are now officially part of the framework, except the effect function that is still being tweaked by the Angular team. A big step for Angular Signals. Standalone With
- [Angular 17: Simplifying style(s)](https://www.angulartraining.com/daily-newsletter/angular-17-simplifying-styles/) - A major focus of the Angular team over the past two years has been to improve the developer experience by removing some of the common annoyances in the framework (better error messages, for instance). This is often referred to as "quality of life" improvements, and the Angular 17 feature I want to cover today is
- [How to update your Angular CLI?](https://www.angulartraining.com/daily-newsletter/how-to-update-your-angular-cli/) - We touched on many Angular 17 updates so far, and if you want to test those out on a fresh new project, you'll need to upgrade your Angular CLI to v17. Here is the most straightforward command to upgrade your global Angular CLI to the latest version: npm install -g @angular/cli@latest That's it! The -g
- [Angular 17: New devtools injector tree view](https://www.angulartraining.com/daily-newsletter/angular-17-new-devtools-injector-tree-view/) - Another Angular 17 update is the release of a new DevTools panel called Injector Tree. It's a good option to visualize both your element hierarchy and injector hierarchy, and it is accessible as a third tab in the Angular DevTools browser extension available for Chrome, Firefox, and Edge: When we click on that tab, a
- [Angular 17: New esbuild builder with Vite](https://www.angulartraining.com/daily-newsletter/angular-17-new-esbuild-builder-with-vite/) - Who doesn't like faster builds? Since Angular 2, the Angular team has consistently worked on making our builds quicker and faster. Angular 16 included a developer preview of a new build system based on esbuild and Vite. With Angular 17, this feature is now enabled by default for new apps, with reported speed improvements of
- [The Angular renaissance is on!](https://www.angulartraining.com/daily-newsletter/the-angular-renaissance-is-on/) - With a new logo and a new website released just before a new version (v17 will be released on Wednesday, November 8th), Angular is more than ever in the middle of a remarkable transformation: There is a lot to unpack from yesterday's live event (you can watch a recording here), and I will cover all
- [Copy and paste in JavaScript](https://www.angulartraining.com/daily-newsletter/copy-and-paste-in-javascript/) - Sometimes, it's helpful to copy and paste some text programmatically. There are different options in Javascript, and the only one that works consistently is the following: You can see an example of the above code in action on Stackblitz here. The only caveat is that such code can be triggered from an event listener, such
- [RxJs eslint plugin for Angular](https://www.angulartraining.com/daily-newsletter/rxjs-eslint-plugin-for-angular/) - Last month, I discussed eslint and how to use that tool to parse your code and receive feedback on best practices and possible improvements. Today, I want to mention an eslint plugin explicitly written for RxJs with Angular: eslint-plugin-rxjs-angular. This plugin adds three possible validation rules: All rules are optional, and it doesn't make sense
- [Special Angular Event Next Week](https://www.angulartraining.com/daily-newsletter/special-angular-event-next-week/) - If you follow the Angular team on social media (Youtube channel or Twitter/X), you probably saw that the team scheduled a special live event for next week. The team went as far as changing their logo on these channels to tease us: In the past few months, we have all noticed what has become known
- [Async pipe, Signals, and Change Detection](https://www.angulartraining.com/daily-newsletter/async-pipe-signals-and-change-detection/) - Yesterday, we covered what markForCheck() can do in terms of change detection and why it could be needed at times. Regarding best practices, I often mention using the async pipe or Signals to improve change detection and performance in our apps. Why is that? That's because both the async pipe and Signals have some extra
- [ChangeDetectorRef.markForCheck()](https://www.angulartraining.com/daily-newsletter/changedetectorref-markforcheck/) - The following method call is either something you're either very familiar with or something you've never heard about: ChangeDetectorRef.markForCheck() If you've never heard about it, congratulations! It means you've been using Angular in a way that doesn't require you to mess with change detection, and that's an excellent thing. On the other end of the
- [Perf and template syntax – Example 3](https://www.angulartraining.com/daily-newsletter/perf-and-template-syntax-example-3/) - Yesterday, we looked at the pros and cons of our second code example. Today, let's cover the pros and cons of our third and final example: Example #3 - Signal {{data.name}} This last example is very interesting for a few reasons. First, if you follow Angular best practices, you might be
- [Perf and template syntax - Example 1](https://www.angulartraining.com/daily-newsletter/perf-and-template-syntax-example-1/) - Yesterday, I sent you 3 different examples of Angular binding syntaxes and asked you to take a look at them and identify the pros and cons of each one. Today, let's cover the pros and cons of our first example: Example #1 – Array of data The only pro of
- [Perf and template syntax – Example 2](https://www.angulartraining.com/daily-newsletter/perf-and-template-syntax-example-2/) - Yesterday, we looked at the pros and cons of our first code example. Today, let's cover the pros and cons of our second example: Example #2 - Observable {{data.name}} This code is calling a method in a template, too, and that's a lot worse than in example #1. Here's
- [Performance and template syntax](https://www.angulartraining.com/daily-newsletter/performance-and-template-syntax/) - Today, I'd like to challenge you with a small exercise. Take a minute to examine the three following code examples and decide which option performs best. Note how similar those three options are from a syntax standpoint, yet they yield very different results performance-wise: Example #1 - Array of data {{data.name}}
- [Everything you need to know about Arrow Functions](https://www.angulartraining.com/daily-newsletter/everything-you-need-to-know-about-arrow-functions/) - Arrow functions have become the standard syntax in modern JavaScript. They offer a concise way to write functions, making your code lighter and more readable. Let's explore arrow functions and their various syntax options with code examples. Basic syntax Two things to note: Parentheses are required when using multiple function parameters. In a one-liner arrow
- [Angular Change Detection Illustrated](https://www.angulartraining.com/daily-newsletter/angular-change-detection-illustrated/) - I see a lot of confusion around Angular change detection. I compared the OnPush and Default strategies in a past post, but let's illustrate them with visuals. Default Change Detection An event happening anywhere in the DOM tree will have Angular check the entire tree for changes: OnPush Change Detection If a hierarchy of components
- [Creating a library with Angular](https://www.angulartraining.com/daily-newsletter/creating-a-library-with-angular/) - You're probably used to creating Angular applications, but what about Angular libraries? First, it's essential to define what an Angular library is. A library is a collection of components/pipes/directives or services bundled together that can be shared and used in multiple code repositories. As a result, Angular libraries are designed to be published on npm
- [Angular 17 is coming soon...](https://www.angulartraining.com/daily-newsletter/angular-17-is-coming-soon/) - Angular 17 tentative release date is set for November 8, 2023. Be ready for a few good surprises along the way, but for now, I can share that the new control flow features will be available with that version. There was a control flow RFC a few months back. The Angular team received valuable feedback
- [Backticks, double quotes, and single quotes](https://www.angulartraining.com/daily-newsletter/backticks-double-quotes-and-single-quotes/) - When working with strings in Javascript, we have three options: Backticks, double quotes, and single quotes. Today, let's look at when to use each of these and the pros and cons of each approach. Single-quotes Single quotes are the least exciting option because they have primarily cons: Double-quotes Double quotes get the job done most
- [Fine-tuning your eslint configuration](https://www.angulartraining.com/daily-newsletter/fine-tuning-your-eslint-configuration/) - Last week, we introduced eslint and how it can help improve our code by identifying places where we have dead code or don't follow best practices. Sometimes, we "break" some of these rules on purpose or decide to adopt a different convention, which is perfectly fine. In that case, instead of giving up on eslint
- [Improve your code with eslint](https://www.angulartraining.com/daily-newsletter/improve-your-code-with-eslint/) - eslint is a popular linter that parses your code and outputs a list of warnings and errors to help you improve. The library is designed to lint JavaScript code, and there are extra plugins for TypeScript and Angular so we can get even more specific feedback for our components and services. Here is an example
- [Typescript Cheatsheet: Control Flow](https://www.angulartraining.com/daily-newsletter/typescript-cheatsheet-control-flow/) - A few weeks back, I shared a cheat sheet for Typescript classes. Today, I want to share a cheat sheet on control flow, which will change in Angular templates very soon. Note the different type narrowing options, such as: if ("property" in object), which can come in handy instead of creating extra types. Type guards
- [Typescript Cheatsheet: Classes](https://www.angulartraining.com/daily-newsletter/typescript-cheatsheet-classes/) - A few weeks back, I shared a cheat sheet for Typescript interfaces. Today, I want to share a cheat sheet on classes, which can be complemented with my past entry on Typescript visibility modifiers, as their behavior in Angular has specificities related to HTML templates. Note the common syntax section with the different options for
- [Directive Composition API](https://www.angulartraining.com/daily-newsletter/directive-composition-api/) - In the past few weeks, we've covered different examples of directives, such as the CDK Listbox directive and the CDK Drag and Drop directive. I have mentioned that directives are underused in Angular applications these days, and one way to use more directives is to adopt the directive composition API. Let's consider our previous example
- [JavaScript rest operator](https://www.angulartraining.com/daily-newsletter/javascript-rest-operator/) - This is the final post in our JavaScript series on destructuring. Let's focus on the rest operator, which materializes with three little dots ... as follows: One way to put it is that the rest operator means "everything else goes into a new array." This syntax also works with objects, with the "rest of the
- [Array destructuring with JavaScript](https://www.angulartraining.com/daily-newsletter/array-destructuring-with-javascript/) - In our last post, we saw how to implement object destructuring. A similar feature is available for arrays and replaces the following syntax: With destructuring, we can simplify that code into: The only difference with object destructuring is the usage of square brackets [] instead of curly ones {}. Default values are supported, too: And
- [Object destructuring with JavaScript](https://www.angulartraining.com/daily-newsletter/object-destructuring-with-javascript/) - Here is something I see very often while reviewing Angular code for the Angular certification program: While the above code works, it is very lengthy and repetitive. It also increases your code base's size, negatively impacting performance. Instead, we can use a modern JavaScript syntax introduced with ES6/ES2015 called object destructuring: The above line of
- [How to handle drag-and-drop with Angular?](https://www.angulartraining.com/daily-newsletter/how-to-handle-drag-and-drop-with-angular/) - Drag and drop features can dramatically improve the UX of a web application. Implementing drag and drop with Javascript seems intimidating, which is why we have the Angular CDK (Component Development Kit). Let's say we have a list of items we want to be able to reorder using drag and drop: Thanks to the CDK
- [State Management: Effect](https://www.angulartraining.com/daily-newsletter/state-management-effect/) - Let's get back to our series on state management with this post. So far, we covered that state management libraries give us a global State that gets updated using Actions and Reducers. I haven't told you yet that typical Redux Reducer functions are meant to be synchronous. In other words, you're not supposed to make
- [Increasing binding specificity](https://www.angulartraining.com/daily-newsletter/increasing-binding-specificity/) - Let's say we want to trigger an action when the user hits enter on their keyboard. We could do something like this, capturing the keydown event and then decide what to do based on the entered key: While the above works, it's pretty verbose. Instead, we can make our binding more specific by doing the
- [State Management: Selector](https://www.angulartraining.com/daily-newsletter/state-management-selector/) - We know how to create a State and dispatch actions to update its value. Now let's see how to receive updates when the State gets updated. Most state management libraries provide what is known as Selectors. A Selector query function runs against our State and returns an Observable. For instance, with NgXs, a Selector can
- [Using the CDK ListBox for custom list selection](https://www.angulartraining.com/daily-newsletter/using-the-cdk-listbox-for-custom-list-selection/) - The Angular CDK is an important toolkit for building Angular applications. We've already covered how to display an overlay using the CDK. Today, let's create a custom list selection feature using CDK ListBox. Often, HTML dropdowns are too basic to allow for meaningful customization of what gets rendered in the dropdown. This has led to
- [State Management: Action and Reducer](https://www.angulartraining.com/daily-newsletter/state-management-action-and-reducer/) - Now that we've covered what's the global State and what's the Store service, let's take a look at how we can update that State. In our introduction to state management, we introduced Actions. Actions are simple objects with a name/type describing what we're trying to do. An optional payload contains the parameters for that Action.
- [State Management: State and Store](https://www.angulartraining.com/daily-newsletter/state-management-state-and-store/) - After introducing state management concepts last week, let's dive deeper and get into two essential concepts of state management libraries: Store and State. I'm using NgXs for these examples because the library's syntax is the most straightforward and consistent with how Angular works, using Typescript decorators to configure the different classes. The example we will
- [5 useful pipes from ngx-pipes](https://www.angulartraining.com/daily-newsletter/5-useful-pipes-from-ngx-pipes/) - ngx-pipes is a library with over 80 different pipes to choose from. Here is a list of 5 of my favorites: timeAgo: An excellent alternative to Moment for duration formatting, which means turning a date/time into: "a few seconds ago" or "last week," for instance. ucFirst: Uses an uppercase letter for the first word in
- [Lazy-loading with defer (new RFC)](https://www.angulartraining.com/daily-newsletter/lazy-loading-with-defer-new-rfc/) - We've talked about lazy loading and performance a few times in this newsletter. The Angular team is working on a new feature that will expand the scope and flexibility of lazy-loading in Angular using a new primitive with a syntax similar to the one introduced in the control flow RFC: The above code would lazy-load
- [Migrating Angular Material to v15+](https://www.angulartraining.com/daily-newsletter/migrating-angular-material-to-v15/) - This is a guest post by Duncan Faulkner. You can read his first post on Angular Material here. This is the third and final post in this series. Note: This post will cover upgrading to Angular Material version 15 from Angular Material 14—all changes affected version 15. Once the migration to Angular Material 15 is complete,
- [Introduction to State Management](https://www.angulartraining.com/daily-newsletter/introduction-to-state-management/) - When you work with Angular for quite some time, you realize that you implement similar services repeatedly. Most likely, you end up with services with BehaviorSubjects to store some data, and you have components that subscribe to these subjects exposed as read-only Observables. If you're not at that point yet, I suggest you stop reading
- [The Angular Accelerator is live!](https://www.angulartraining.com/daily-newsletter/the-angular-accelerator-is-live/) - I've been thinking for a long time about a way to bridge a gap in the training industry, which is mainly dominated by two options these days: Corporate training or conference workshops: You attend a live session with a trainer for one or more days and touch on many topics quickly, but you can't practice
- [What is the Ivy engine?](https://www.angulartraining.com/daily-newsletter/what-is-the-ivy-engine/) - You've probably heard about the Ivy engine if you've been working with Angular for some time. Ivy is the code name of Angular's current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the
- [Use Lighthouse to improve your Angular applications](https://www.angulartraining.com/daily-newsletter/use-lighthouse-to-improve-your-angular-applications/) - As Angular developers, we tend to focus on component architecture, modules, TypeScript, and the best framework use. Most of the time, those things differ from what matters to end users. End users usually want: Performance - 60% of the web's traffic happens on smartphones that don't always have fast internet connections. Accessibility - Is your
- [ngx-mask for user input masking](https://www.angulartraining.com/daily-newsletter/ngx-mask-for-user-input-masking/) - HTML forms are evolving but still lacking a little in masking, which really means "suggesting the proper format to the user. For instance, if I need to capture a US phone number in a specific format, I'd like to use a mask that looks like this: We could use a placeholder, but the placeholder disappears
- [Angular 16.2: NgComponentOutlet input bindings](https://www.angulartraining.com/daily-newsletter/angular-16-2-ngcomponentoutlet-input-bindings/) - Another feature of Angular 16.2 is using input bindings with component outlets. You might not be familiar with ngComponentOutlet in the first place, so let's explain what the directive does. Let's consider the following template syntax: The above code would load a dynamic component into the ng-container. Assigning a new component type to componentTypeExpression would
- [What's new in Angular 16.2? Lifecycle methods](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-16-2-lifecycle-methods/) - Angular keeps evolving at a steady pace, and Angular 16.2 brought a couple of interesting features to the table. The first feature is an addition to the Signals API that was part of a specific RFC for Signal-based components. The new feature consists of two functions: afterNextRender A function that allows registering a callback to
- [Angular Material Theme Generator](https://www.angulartraining.com/daily-newsletter/angular-material-theme-generator/) - As we started covering Angular Material with a few different posts, today, I want to address one of the common objections to Angular Material: Sometimes, people don't like the look and feel of the library and fear that it won't match their business requirements. While it is true that the default themes picked by the
- [Accessing route information with Angular](https://www.angulartraining.com/daily-newsletter/accessing-route-information-with-angular/) - The Angular router comes with many interesting features, such as lazy-loading, guards, resolvers, or nested routes. One of these features is the ability to access route parameters and route information within the component displayed by the router. This can be done by injecting the ActivatedRoute service in our component. This ActivatedRoute contains a lot of
- [Using the Angular Material Slider](https://www.angulartraining.com/daily-newsletter/using-the-angular-material-slider/) - This is the second guest post by Duncan Faulkner. You can read his first post on Angular Material here. This is the second post in this series. The mat-slider was recently rewritten in Angular 15 as part of a refactoring towards MDC (Material Design Components for the Web). The most notable change to the mat-slider
- [Angular Developer Survey](https://www.angulartraining.com/daily-newsletter/angular-developer-survey/) - Every once in a while, the Angular team publishes a survey to collect feedback from developers worldwide. Here is the link to this year's survey. The link can be found at the top of the Angular website. The survey takes a few seconds to complete. Your feedback is essential as the Angular team uses that
- [RxJs Websockets for 2-way communication](https://www.angulartraining.com/daily-newsletter/rxjs-websockets-for-2-way-communication/) - Earlier this year, I covered the different types of RxJs subjects. There is another kind of Subject that I haven't touched on yet: WebSocketSubject. What is a websocket? It's a mechanism to establish and maintain a two-way connection between a client and a server on the web. This means that with websockets you can: Receive
- [Hidden gems of HTML](https://www.angulartraining.com/daily-newsletter/hidden-gems-of-html/) - As front-end developers, we have been used to frameworks and libraries that enhance HTML, CSS, and Javascript. We adopt component libraries or individual third-party components from NPM as if participating in an all-you-can-eat buffet. However, this will break our apps in the future if we're not careful. In this newsletter, we've covered that dialogs can
- [Analyzing your bundle size](https://www.angulartraining.com/daily-newsletter/analyzing-your-bundle-size/) - We covered build budgets and how they can help keep your application performant by detecting when a new dependency dramatically increases the size of your build output. If you want to look at your build bundle and determine which dependency/module is the biggest, there's another tool at your disposal: The Webpack Bundle Analyzer. To install
- [Asynchronous form validation with Angular](https://www.angulartraining.com/daily-newsletter/asynchronous-form-validation-with-angular/) - We've already covered how to write custom form data validators with Angular. We also covered how to display custom validation feedback to the user. Today, let's take a look at how to perform asynchronous validation of our form data, which is useful when we need to make an HTTP request to a server to validate
- [Getting Started with Angular Material](https://www.angulartraining.com/daily-newsletter/getting-started-with-angular-material/) - This is a guest post by Duncan Faulkner. He is an Angular developer for a fintech company based in the UK. A software engineer with over twenty years of experience, Duncan has been working with Angular since the early betas, written blog posts for ng-conf and several short books on Angular Material. He's also the
- [What you need to know about ngModules](https://www.angulartraining.com/daily-newsletter/what-you-need-to-know-about-ngmodules/) - Angular modules (ngModules) are a source of confusion for Angular developers. This short guide will clarify what they are and how to think about ngModules in general. Why ngModules? Angular uses a Typescript compiler and a template compiler that turns our HTML templates into Javascript instructions to render the DOM in a browser. The Typescript
- [All ng-conf 2023 videos available for free](https://www.angulartraining.com/daily-newsletter/all-ng-conf-2023-videos-available-for-free/) - I talked about ng-conf 2023 quite a bit back in June and just wanted to let you know that all videos from the conference are now available online for FREE. All you have to do is enter your email address here. Here are my top 5 recommendations from the conference: Clean up your old Angular
- [Using setters with @Input()](https://www.angulartraining.com/daily-newsletter/using-setters-with-input/) - Following our theme of lifecycle methods with ngOnChanges and ngOnInit, I want to give you another interesting trick to be notified when an @Input value changes. We're already familiar with that syntax: But what if instead of applying @Input on a class property, we used it on a setter: The input works the same as
- [Displaying an overlay with Angular](https://www.angulartraining.com/daily-newsletter/displaying-an-overlay-with-angular/) - We covered how to display a dialog in two lines of code earlier. Today, I want to illustrate how we can show an overlay on any portion of the screen using the Angular CDK. First, it's important to mention that Angular CDK is NOT part of Angular Material, and you can use the CDK independently
- [Best practices for using visibility modifiers](https://www.angulartraining.com/daily-newsletter/best-practices-for-using-visibility-modifiers/) - Yesterday, we talked about Typescript visibility modifiers in the context of Angular classes. Today, I want to focus on best practices and common scenarios that involve such visibility modifiers. First, it's very common to have Angular services that use RxJs Subjects. Subjects are somewhat dangerous because they can be used to emit data to all
- [Typescript visibility modifiers](https://www.angulartraining.com/daily-newsletter/typescript-visibility-modifiers/) - Angular is mostly about Typescript classes, and Typescript classes have modifiers that alter the visibility of class members: public, protected, private, and readonly. Here is what you need to know about them. Everything is public by default If you don't use a modifier on a class member, it is public by default. Any other class
- [ngSwitch directive](https://www.angulartraining.com/daily-newsletter/ngswitch-directive/) - The ngSwitch directive is a good alternative to ngIf if you have to handle more than two scenarios. It works similarly to a switch statement in traditional programming languages, allowing you to define a set of cases and associate each case with a specific template block to be rendered. For instance: One of my favorite
- [RxJs Timer for recurring tasks](https://www.angulartraining.com/daily-newsletter/rxjs-timer-for-recurring-tasks/) - You're probably familiar with setTimeout (to run some code after a given timeout) and setInterval (to run some code at a given time interval). Both are "native" Javascript functions and can be used with Angular. That said, recurring code execution is asynchronous, and asynchronous work is often done with RxJs in Angular apps. As a
- [Typescript Cheatsheet: Interfaces](https://www.angulartraining.com/daily-newsletter/typescript-cheatsheet-interfaces/) - TypeScript is a crucial part of writing Angular apps, and the language has numerous tips, tricks, and syntaxes that can make our life easier. Today, I want to share this cheatsheet from the official Typescript website: That cheat sheet has many interesting features; even the "Common Syntax" section has quite a few things that most
- [How to create custom directives?](https://www.angulartraining.com/daily-newsletter/how-to-create-custom-directives/) - I've touched on when it makes sense to create custom directives , how to use bindings in directives, and how to get creative with Angular selectors. Today, let's tackle how to create custom directives. The first thing to do is to use the Angular CLI: ng generate directive [name] or ng g d [name] It's
- [Localized pricing now available for all courses and exams](https://www.angulartraining.com/daily-newsletter/localized-pricing-now-available-for-all-courses-and-exams/) - Subscribers of this newsletter are located on all continents worldwide. Still, I'm based in one of the most expensive states (California) of one of the most expensive countries (USA) in the world, which means that sometimes, people complain about the prices of my services. Good news! I decided to apply purchase parity pricing (PPP) on
- [RxJs trick: Emitting from an Observable into a Subject](https://www.angulartraining.com/daily-newsletter/rxjs-trick-emitting-from-an-observable-into-a-subject/) - Using a Subject to emit data is something we do a lot in Angular applications, and more often than not, what we try to emit is the result of an HTTP request, such as: While the above works perfectly well, it's important to know that the subscribe method of an Observable takes either a function
- [How to create custom form controls with Angular?](https://www.angulartraining.com/daily-newsletter/how-to-create-custom-form-controls-with-angular/) - When working with lots of forms, you'll likely use similar controls repeatedly: A country selection dropdown, a state selection dropdown, a date-range picker with specific constraints, etc. Instead of duplicating our code, which is never a good idea, Angular allows us to create custom form controls that integrate with Angular's form validation mechanism. This feature
- [How to run code in an injection context?](https://www.angulartraining.com/daily-newsletter/how-to-run-code-in-an-injection-context/) - Yesterday, I introduced an injection context, and we saw a few locations where we could inject dependencies. This can be limiting in scenarios where we call a method that creates and returns an Observable outside of an injection context, as we can't always initialize observables in a constructor. Does that mean we cannot use the
- [Pluralizing text with the i18nPlural pipe](https://www.angulartraining.com/daily-newsletter/pluralizing-text-with-the-i18nplural-pipe/) - Pluralizing is as natural in human language as it is painful to handle programmatically. Let's say we want to address the following scenarios in an app that displays the number of posts: If we have zero, display "No post." If we have one, display "1 post." If we have more than one, say 5, display
- [Combining multiple Observables with ngrxLet](https://www.angulartraining.com/daily-newsletter/combining-multiple-observables-with-ngrxlet/) - Last month, I explained how to use ngrxLet to render a loading template. Earlier this year, I also covered how ngrxLet can be a great alternative to the async pipe. All in all, ngrxLet is a fantastic directive that keeps improving. For instance, we can also use it to combine multiple different Observables into one
- [How to use HTTP interceptors?](https://www.angulartraining.com/daily-newsletter/how-to-use-http-interceptors/) - Angular HTTP interceptors can intercept and modify HTTP requests and responses. They can be used for a variety of purposes, such as: Logging the details of HTTP requests and responses, such as the URL, headers, and body. This can be helpful for debugging and troubleshooting. Authentication: Authenticate requests before they are sent to the server
- [Browser dev tools for LocalStorage](https://www.angulartraining.com/daily-newsletter/browser-dev-tools-for-localstorage/) - Last week, I introduced localStorage and sessionStorage. I also suggested a few options to get notifications when such storage gets updated. Today, I will cover how we can visualize and debug storage data. In Google Chrome, open the dev tools (right-click on the webpage, then "inspect" or press Ctrl + Shift + I). Once the
- [ng-class for dynamic styling](https://www.angulartraining.com/daily-newsletter/ng-class-for-dynamic-styling/) - This is a guest post by Tomas Kotlar. Thanks for your contribution, Tomas! Remember than anyone can reach out to me to contribute or suggest post ideas. ngClass, as defined by the Angular documentation, is a built-in attribute directive that dynamically modifies the behavior of other HTML elements. Common use cases Conditional Styling Let's consider
- [Best practice: Using types with the HttpClient](https://www.angulartraining.com/daily-newsletter/best-practice-using-types-with-the-httpclient/) - Here is an example of code I see way too often when people submit their code to our Angular certification exam: While I could almost live with the above code, the following example makes me angry (especially because I tell people NOT to do that in bold uppercase characters in my instructions): What's the problem
- [What is ng-container?](https://www.angulartraining.com/daily-newsletter/what-is-ng-container/) - Yesterday, we covered ng-template and touched on different scenarios when it makes sense to use ng-template. Let's now introduce a close relative of ng-template called ng-container. There are a lot of similarities between those two elements, which can both be used to use structural directives such as ngIf or ngFor, with the bonus that ng-container
- [Notifications from LocalStorage with Signals](https://www.angulartraining.com/daily-newsletter/notifications-from-localstorage-with-signals/) - Yesterday, we saw that LocalStorage can be used as a persistent cache to store our data in the browser. Earlier, we covered that services are a cache of their own but have one instance per app/browser tab, which means that applications opened in multiple tabs can have an inconsistent state since they each have their
- [LocalStorage and SessionStorage](https://www.angulartraining.com/daily-newsletter/localstorage-and-sessionstorage/) - Last week, we covered the lifecycle of Angular applications and how services can be used as a cache for our data. I mentioned that Angular apps are independent applications running in a browser tab and that closing such a tab "kills" the application and frees the memory used by our app - thus losing any
- [Using precise types with Typescript](https://www.angulartraining.com/daily-newsletter/using-precise-types-with-typescript/) - Typescript has a lot to offer when it comes down to... types. Which makes perfect sense, right? Let's take a few examples based on the following interface: The following variable is meant to store the id of a User in our application. The type of that id is a number, so this declaration is accurate:
- [Using services to cache data](https://www.angulartraining.com/daily-newsletter/using-services-to-cache-data/) - Yesterday, we saw that services are singletons that are created once for all and stay in memory as long as the application is open. This makes our services the best place to store data that can be shared between multiple different components. Such services can use BehaviorSubjects or Signals to cache that data and replay
- [Lifecycle of Angular applications](https://www.angulartraining.com/daily-newsletter/lifecycle-of-angular-applications/) - The lifecycle of an Angular application is something that many aspiring Angular developers struggle with. People often ask me questions such as: How long does this component/service/directive stay in memory? How do I save the data before I navigate to the next page/view/component? What happens if I open that same app in another browser tab?
- [Using setters for better @Input](https://www.angulartraining.com/daily-newsletter/using-setters-for-better-input/) - When using @Input in our components, we can implement ngOnChanges to be notified whenever an input value has changed: The above code works and would run whenever id or name are updated by the parent component. The problem is that this syntax can quickly become heavy when there are several @Inputs in your component. Instead,
- [Use functions for readable RxJs operator chains](https://www.angulartraining.com/daily-newsletter/use-functions-for-readable-rxjs-operator-chains/) - When you have complex RxJs operator chains, a good idea is to refactor them into simple functions. This can also favor code reuse for simple scenarios such as the following example. Say we have a User object with the following shape: We receive that object through an Observable; all we want from it is the
- [Angular style guide](https://www.angulartraining.com/daily-newsletter/angular-style-guide/) - People often ask me the best way to organize their files/folders. While it's mostly a matter of personal preference or a team decision, the recommendations of the Angular style guide are always good to follow. For instance, when it comes down to folders, here's what the official style guide says (the highlight is mine, as
- [ngFor trackBy for improved performance](https://www.angulartraining.com/daily-newsletter/ngfor-trackby-for-improved-performance/) - We all use the ngFor directive on a daily basis. The directive is used to repeat a template as many times as needed based on an array of data we want to render. We covered how the directive exposes useful local variables in the past. To help Angular perform DOM updates when items in the
- [Prefer template-driven forms](https://www.angulartraining.com/daily-newsletter/prefer-template-driven-forms/) - International readers might not know that today is a public holiday in the United States as the country celebrates its birth and Independence. As a result, I'll make today's post very short but still useful. Over the past couple of newsletters, I explained that template-driven forms are perfectly fine in most cases. A few years
- [Reactive or template-driven forms?](https://www.angulartraining.com/daily-newsletter/reactive-or-template-driven-forms/) - People are often conflicted when it comes down to forms with Angular. Should we use template-driven forms or reactive forms? Here's a simple answer: If your form is dynamic (meaning: if the user selects this option, then add/enable or remove/disable other form elements) or will rely on RxJs for reactivity (meaning: auto-complete features or on-the-fly
- [Reactive forms Observables](https://www.angulartraining.com/daily-newsletter/reactive-forms-observables/) - Last week, I gave you a simple decision framework to decide when to use reactive or template-driven forms. As a matter of fact, the only reactive (meaning RxJs-friendly) piece of reactive forms is that FormGroup, FormArray, and FormControl all extend the AbstractControl class and, as a result, expose two different Observables: Those two can be
- [Running unit tests on continuous integration servers](https://www.angulartraining.com/daily-newsletter/running-unit-tests-on-continuous-integration-servers/) - We talked about unit testing a couple of times last week. One of the main benefits of unit tests is that they run quickly and provide immediate feedback. As a result, we get the best return on investment when running those unit tests on a continuous integration (CI) server after each commit. Two challenges come
- [Angular Accelerator Program](https://www.angulartraining.com/daily-newsletter/angular-accelerator-program/) - Since I started this newsletter at the beginning of the year, quite a few people have inquired about one-on-one coaching/training from me. Several people have also asked for more preparation content for the Angular certification exams. As a result, I'm about to launch the beta test of an Angular Accelerator program, and you can show
- [How to pass multiple pieces of content from one component to another?](https://www.angulartraining.com/daily-newsletter/how-to-pass-multiple-pieces-of-content-from-one-component-to-another/) - Yesterday, we saw that we could use content projection to pass an HTML template from one component to another. But what if we want to pass multiple different templates? We can use multi-slot content projection. Here's what we want to achieve: In our reusable dialog component, we will have multiple ng-content elements. Each ng-content will
- [Passing custom content to a component with content projection](https://www.angulartraining.com/daily-newsletter/passing-custom-content-to-a-component-with-content-projection/) - If you're creating a component library or working on components meant to be as generic and reusable as possible, then content projection should be a major part of your Angular toolkit. Let's take the example of a pop-up window/dialog component: The main idea of content projection is that the parent component (most likely a container
- [RxJs retry() operator](https://www.angulartraining.com/daily-newsletter/rxjs-retry-operator/) - Some weeks ago, I posted about how to handle errors in RxJs. In some cases, it might be a good idea to retry an Observable when it fails, especially for HTTP requests. The retry operator has the following marble diagram: In the above marble diagram, we retry the Observable 2 times. Since all attempts fail
- [How to unit test an Angular service?](https://www.angulartraining.com/daily-newsletter/how-to-unit-test-an-angular-service/) - Yesterday, we covered how to unit test an Angular pipe. Services are a bit more complex to test because they usually have dependencies that need to be injected. Let's consider this example: All the service does is rely on the HttpClient to make requests to a server. In a unit test, we don't want to
- [Rollbar: Error tracking and reporting](https://www.angulartraining.com/daily-newsletter/rollbar-error-tracking-and-reporting/) - Whenever we deploy a web application to production, one of the challenges is that our code will run on several different machines in different locations. When a user reports an error, we cannot access their browser console or stack trace unless the user is techy enough to share that information with us. Of course, we
- [Updates from ng-conf 2023](https://www.angulartraining.com/daily-newsletter/updates-from-ng-conf-2023/) - I'm writing this message up in the air over the desertic landscapes of Nevada as I'm flying back to California from ng-conf 2023. It has been two days filled with lots of information, and I will unpack some of the major announcements in more detail in the following newsletters. For now, I'll focus on some
- [New control flow RFC](https://www.angulartraining.com/daily-newsletter/new-control-flow-rfc/) - One of the major announcements on day 1 of ng-conf was the control flow request for comments (RFC). We're all familiar with ngFor, ngIf, ngSwitch, and their syntaxes can get tricky at times. Now what if ngIf was replaced with: And what if the new syntax supported much more than ngIf, such as else if
- [What's new in Angular 16.1?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-16-1/) - Angular 16.1 was released just in time for ng-conf 2023 (side note: If you're in Salt Lake City, feel free to come to meet me and say hi - you'll get a sticker and a $20 coupon for my video courses or certification exams). There are three new features in Angular 16.1: Transform option for
- [How to improve performance with pure pipes](https://www.angulartraining.com/daily-newsletter/how-to-improve-performance-with-pure-pipes/) - Earlier in this newsletter, we saw that calling a method in a component template is an anti-pattern. The antidote to that anti-pattern is to use a pure pipe. By default, all pipes we use in Angular are pure. Custom pipes are also pure by default. The only way to make a pipe impure is to
- [How to create a copy of anything in Javascript?](https://www.angulartraining.com/daily-newsletter/how-to-create-a-copy-of-anything-in-javascript/) - Modern Javascript developers are used to the following syntax to create a copy of an object: let copy = {...object}; While this approach works fine, it creates a shallow copy of the object, not a fully-fledged clone that also duplicates nested objects and arrays. As a result, Javascript developers have learned another trick to perform
- [Using a loading template with ngrxLet](https://www.angulartraining.com/daily-newsletter/using-a-loading-template-with-ngrxlet/) - A while back, I wrote about how ngrxLet is an improved version of the async pipe. I also covered how to use skeleton loaders with Angular. Today, let's look at how we can use these two tools to display a "loading" template while an observable is waiting for data. As a reminder, here is how
- [Standalone components cheatsheet](https://www.angulartraining.com/daily-newsletter/standalone-components-cheatsheet/) - I wrote a few entries about standalone components in this newsletter. Today, I wanted to send you a Standalone Components Cheatsheet that lists everything you need to know about standalone components in Angular: This PDF was written for the upcoming ng-conf conference. You can download it here.
- [RxJs of() and from()](https://www.angulartraining.com/daily-newsletter/rxjs-of-and-from/) - So far, we have covered several RxJs operators and information about Subjects, but what about Observables themselves? There are a few utility functions that create Observables out of existing data. Such Observables immediately return the data and complete upon subscription. Here is an example of such an Observable created with the of() function: And an example created
- [How to create a generic error handler with Angular?](https://www.angulartraining.com/daily-newsletter/how-to-create-a-generic-error-handler-with-angular/) - Earlier in this newsletter, we covered how to handle errors with RxJs Observables. What about errors in the rest of the application? Javascript has a primary try/catch mechanism, but this doesn't help handle errors in a generic, unified way. Fortunately enough, Angular has an ErrorHandler interface that can be implemented by global error handler services
- [Anti-pattern: Not using production builds to deploy production code](https://www.angulartraining.com/daily-newsletter/anti-pattern-not-using-production-builds-to-deploy-production-code/) - This is one of the most common mistakes I see with my training/consulting clients. When deploying code to production, they would use the command: ng build. Instead, you want to use: ng build --configuration=production Why is that? Because a production build is optimized in several ways: The code gets minified and obfuscated, which means it
- [HostBinding and HostListener](https://www.angulartraining.com/daily-newsletter/hostbinding-and-hostlistener/) - A few months back, I suggested that Angular developers don't use enough directives and use too many components. This is because components quickly become second nature when writing Angular code, while directives are less common and, as a result, can feel more complex at first. The critical difference between components and directives is that components
- [Error Handling in RxJs](https://www.angulartraining.com/daily-newsletter/error-handling-in-rxjs/) - A few days ago, we saw that we could be notified of any error when subscribing using a specific callback function or that we could receive the same information using the tap operator. There is another option available using a specialized operator called catchError and illustrated below under its deprecated name catch: How does catchError
- [RxJs TapObserver](https://www.angulartraining.com/daily-newsletter/rxjs-tapobserver/) - In my last post, I covered how we can define multiple callback functions when subscribing to an Observable (next, error, complete). I mentioned that those callbacks are available when we call the subscribe() method, which goes against our philosophy of avoiding subscriptions as much as possible because they can lead to memory leaks. In previous
- [Signals: computed()](https://www.angulartraining.com/daily-newsletter/signals-computed/) - After introducing how to create Signals and how to update them, let's take a look at one more exciting feature that helps replace the need for RxJs Observables. How to emit a new Signal value when one or more Signals get updated? That's what computed() does. In my Signals course, I illustrate computed() with the
- [Ng-conf 2023 is coming up soon](https://www.angulartraining.com/daily-newsletter/ng-conf-2023-is-coming-up-soon/) - If you're considering attending a tech conference and have never done so before, I would suggest going to ng-conf 2023 in Salt Lake City this June (also available online if you can't travel to beautiful Utah): You know what I'm talking about if you have attended ng-conf before. It is the largest Angular conference in
- [Anti-pattern series: Using too many services](https://www.angulartraining.com/daily-newsletter/anti-pattern-series-using-too-many-services/) - While services and dependency injection are good, just like many good things in life, they can be over-used and become somewhat of an anti-pattern. Why? Because of how change detection works in Angular. Angular has two modes for change detection: The default mode and the onPush mode. onPush is an optimization that works if and
- [RxJs subscribe callback functions](https://www.angulartraining.com/daily-newsletter/rxjs-subscribe-callback-functions/) - At this point, it is safe to assume that most Angular developers know about the following syntax. That's how we subscribe to an Observable to receive its data: If you've been reading this newsletter for long enough, you already know that there are better ways to subscribe to Observables and that there are no excuses
- [Skeleton loaders with Angular](https://www.angulartraining.com/daily-newsletter/skeleton-loaders-with-angular/) - Skeleton loaders are grey-shaded shapes that indicate when a part of the screen is loading. Here is an example of skeleton loaders for Facebook: ngx-skeleton-loader is a small component library that does just that. It gives us access to different skeleton loaders ready to be used in our applications: What's nice about that library is
- [Anti-pattern series: Not unsubscribing from Observables](https://www.angulartraining.com/daily-newsletter/anti-pattern-series-not-unsubscribing-from-observables/) - We covered this in our newsletter before: Observables can cause memory leaks if we don't unsubscribe from them. Before Angular 16, there were a few different techniques available to unsubscribe automatically, the best of those being the async pipe (and yes, it's possible to use the async pipe 100% of the time if you use
- [Angular 16 Preview: TakeUntilDestroyed](https://www.angulartraining.com/daily-newsletter/angular-16-preview-takeuntildestroyed/) - Angular 16 will be released next week, and this new version will be big. I will cover most of the new features of Angular 16 for the next few days. One of the simple but handy features shipped with Angular 16 is a new operator for RxJs Observables: takeUntilDestroyed. We have covered several techniques to
- [mergeMap RxJs operator](https://www.angulartraining.com/daily-newsletter/mergemap-rxjs-operator/) - A few months back, we covered the switchMap operator from RxJs. Today, let's look at a similar operator called mergeMap: The marble diagram isn't as obvious as it is for other operators, so let's clarify what mergeMap does: It takes values from an observable and maps them to another observable Then it allows us to
- [Angular at Google I/O](https://www.angulartraining.com/daily-newsletter/angular-at-google-i-o/) - This a very short post today as I spent most of my day at Google I/O, the annual conference where Google announces all sorts of updates ranging from AI to Android to Web, including Angular. The Angular team had a few talks on Angular 16, all of which are now available on YouTube so that
- [Signals: Why and when do we need them?](https://www.angulartraining.com/daily-newsletter/signals-why-and-when-do-we-need-them/) - With the release of Angular 16, Signals are now available as a developer preview, which means we can start learning about Signals, testing them, and possibly adopting them. The end goal of Signals is simple: Improve change detection in the Angular framework by removing the need for Zone.js. A signal-based application will be able to
- [Angular Signals are in the works!](https://www.angulartraining.com/daily-newsletter/angular-signals-are-in-the-works/) - This is probably the most significant change coming to the framework since the release of Angular v2 many years ago. A new feature called Signals is being prototyped in Angular, and we can follow the entire discussion on GitHub. Where do signals come from? They are the answer from the Angular team to several different
- [Anti-pattern series: Calling a method in a template](https://www.angulartraining.com/daily-newsletter/anti-pattern-series-calling-a-method-in-a-template/) - If you're calling a method/function in the HTML template of any of your components, try the following experiment: Add a console.log("here") inside that method. Then, interact with your application by clicking around, entering information in a form, etc. What you'll see in your console is something like this: Why is this happening? Angular's change detection
- [Angular Documentation Tricks](https://www.angulartraining.com/daily-newsletter/angular-documentation-tricks/) - If you use Angular, you're most likely familiar with the Angular website: https://angular.io. But did you know that you access the documentation of a previous framework version by using the version number as a prefix, such as https://v14.angular.io? Even better, you can get a glimpse of the future with https://next.angular.io or take a look at
- [RxJs concatWith operator](https://www.angulartraining.com/daily-newsletter/rxjs-concatwith-operator/) - Our operator of the week is concatWith (the new name for concat since RxJS v7). This operator takes any number of Observables, subscribes to them one after the other, in sequence, and then returns the values emitted by the first Observable, then the second one, then the third one, etc. Unlike forkJoin, which runs these
- [Angular 16 is now available!](https://www.angulartraining.com/daily-newsletter/angular-16-is-now-available/) - Angular 16 is now available! You can watch a quick summary video from the Angular Team (in less than 7 minutes). We've already covered quite a few of the new features in this newsletter: A developer preview of Angular Signals (with my video course to learn everything about them) Required Inputs TakeUntilDestroyed operator to automate
- [NG16 Preview: Helpers to convert class guards to functional](https://www.angulartraining.com/daily-newsletter/ng16-preview-helpers-to-convert-class-guards-to-functional/) - As covered a few newsletters ago, Route guards are meant to be functions with Angular 15+. Angular 16 removes the support for class guards. Does that mean we have to migrate our old class guards manually? Of course not! The Angular team has our back, and the Angular CLI will remove the deprecated interfaces automatically
- [Angular 16 Preview: Required Inputs](https://www.angulartraining.com/daily-newsletter/angular-16-preview-required-inputs/) - The @Input decorator plays an essential role in the Angular framework as such inputs for presentation components allow us to fine-tune application performance by using the onPush change detection strategy. Earlier in this newsletter, we also talked about how inputs justified the existence of the ngOnInit lifecycle hook. Inputs are about to become even better
- [How to create your own two-way data binding with Angular?](https://www.angulartraining.com/daily-newsletter/how-to-create-your-own-two-way-data-binding-with-angular/) - If you've ever used [(ngModel)] with Angular, you know what two-way data binding is. The idea is to have a variable that works simultaneously as an Input and an Output. In today's post, we will see how to implement such a two-way data binding on our own so that we can use the [()] syntax
- [Anti-pattern: Subscription within a subscription](https://www.angulartraining.com/daily-newsletter/anti-pattern-subscription-within-a-subscription/) - Welcome to this new series on Angular anti-patterns. I intend to cover one anti-pattern per week for a few weeks, starting with one of the most common ones: Subscribing to an Observable within another Observable subscription. Here's an example where we get a country and then the currency for that country: Why is this a
- [keyValue pipe](https://www.angulartraining.com/daily-newsletter/keyvalue-pipe/) - The keyValue pipe turns any object into an array of key-value pairs, which can be helpful for debugging purposes or working with an object with a dynamic shape. Here's an example: In this example, we're using the keyValue pipe to iterate over the properties of user and display them. The item variable represents each key-value
- [RxJs takeUntil and takeWhile operators](https://www.angulartraining.com/daily-newsletter/rxjs-takeuntil-and-takewhile-operators/) - Our Rxjs operators of the week are takeUntil and takeWhile. These operators are the opposite of skipWhile covered last week: They let the values from the source Observable pass through until a condition is met. takeUntil is based on a second Observable and stops emitting values when that second Observable emits for the first time,
- [Angular profiler for performance tuning](https://www.angulartraining.com/daily-newsletter/angular-profiler-for-performance-tuning/) - The Angular dev tools introduced in our previous newsletter include a second tab called Profiler: The Profiler has a single record button. We can hit it, play with our application, then stop the recording. This turns the UI into a profiler view of what happened during the recording. In the example below, we can see
- [Angular DevTools Extension](https://www.angulartraining.com/daily-newsletter/angular-devtools-extension/) - Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications (v12 minimum). It's available for Chrome, Firefox, and Edge. The extension comes with a tree view of the component hierarchy of our application. You can expand and collapse components to inspect their properties, inputs, and outputs. Hovering a component in
- [Angular 16 is coming soon!](https://www.angulartraining.com/daily-newsletter/angular-16-is-coming-soon/) - It's official; Angular 16 will be released on May 3rd. The first release candidate version is available, and yes, it includes the base API for Signals! Signals will be in developer preview only for now, but we can expect the feature to be shipped and fully available with Angular 17, which is exciting news. Other
- [RxJs skipWhile operator](https://www.angulartraining.com/daily-newsletter/rxjs-skipwhile-operator/) - Our RxJS operator of the week is skipWhile. This operator will ignore values emitted by an Observable as long as a given condition is true. Its marble diagram looks like this: The above example shows us that as long as the emitted values are less than 5, they get skipped. What are some everyday use cases for skipWhile?
- [How to change the locale of your Angular application?](https://www.angulartraining.com/daily-newsletter/how-to-change-the-locale-of-your-angular-application/) - A locale is a combination of country and language, such as fr-CA for French spoken in Canada or en-US for English spoken in the US. Locales matter when you want to create an application that works all around the globe. For instance, let's take the following sentence in American English for the US: On 04/01/2023,
- [How to internationalize your Angular application?](https://www.angulartraining.com/daily-newsletter/how-to-internationalize-your-angular-application/) - ngx-translate is much more flexible because it relies on pipes, directives, and services to translate our text at runtime instead of build-time.
- [Partial utility type in Typescript](https://www.angulartraining.com/daily-newsletter/partial-utility-type-in-typescript/) - Typescript is excellent for type safety as it prevents us from making mistakes when declaring new objects. That said, an object is sometimes created by aggregating data from different sources (different API calls, for instance). For instance, say we have the following interfaces: We have to create an instance of the Question object, but let's
- [RxJs startWith operator](https://www.angulartraining.com/daily-newsletter/rxjs-startwith-operator/) - startWith is an operator that does something straightforward: It takes an existing Observable and makes it emit a default value immediately. Its marble diagram looks like this: What are some everyday use cases for startWith? Here is an example where I want to display a loader while data is being loaded from a service: The
- [Using a resolver function or a title strategy to change the page title](https://www.angulartraining.com/daily-newsletter/using-a-resolver-function-or-a-title-strategy-to-change-the-page-title/) - Before we get into today's topic: The Angular Team's Request for Comments (RFC) for Angular Signals is now open to the public. Feel free to take a look and give your feedback. Yesterday, we saw how to change an application's title using the router config. Today, let's cover more complex scenarios when we need a
- [Named router outlets](https://www.angulartraining.com/daily-newsletter/named-router-outlets/) - Using the Angular Router is one of the best ways to emulate multiple pages/screens in an Angular application. However, we might sometimes want even more flexibility by having the equivalent of "sub-pages" where sibling elements on a web page can display dynamic content based on the current URL. Something like this where three different divs
- [Changing the page title using Angular Router](https://www.angulartraining.com/daily-newsletter/changing-the-page-title-using-angular-router/) - This is a quick post to showcase a recent addition to the framework that is useful and very simple to implement. We can now have a title property in every route config: The provided title is set as the page title (in your browser tab) when the user navigates from one page to the next.
- [Subject, BehaviorSubject, and ReplaySubject](https://www.angulartraining.com/daily-newsletter/subject-behaviorsubject-and-replaysubject/) - We introduced RxJs Subjects a few weeks back. BehaviorSubject The most common type of Subject used with Angular is BehaviorSubject. Why is that? Because a BehaviorSubject has two exciting features that a plain Subject does not have: It starts with a default value, which means it is never empty. When we subscribe to a behavior
- [Resolver function for the Angular Router](https://www.angulartraining.com/daily-newsletter/resolver-function-for-the-angular-router/) - The last router function of our guard series is resolve. It is the replacement for class-based resolvers. A resolver function runs after all guards have run and before the destination component is rendered. Such a function is typically used to preload component data before rendering it on the screen. For instance, in this example: heroResolver
- [RxJs share and shareReplay operators](https://www.angulartraining.com/daily-newsletter/rxjs-share-and-sharereplay-operators/) - Last week, we covered the difference between hot and cold Observables in RxJs. Today, let's talk about how we can make a cold Observable hot. Why would we want that? Say our Observable is an HTTP request we want to trigger before any component subscribes to it. We saw that Observables from the HttpClient are
- [canMatch Router Guard](https://www.angulartraining.com/daily-newsletter/canmatch-router-guard/) - After introducing guards and the most common guard functions (canActivate, canActivateChild, and canDeactivate), we will cover one slightly different guard that can run when trying to access a route. canMatch was introduced in Angular 15.1. When canMatch returns false, Angular will continue looking at other routes that would match that path instead of preventing any
- [Route guards - canActivate, canActivateChild, canDeactivate](https://www.angulartraining.com/daily-newsletter/route-guards-canactivate-canactivatechild-candeactivate/) - Yesterday, we introduced how route guards can control whether or not a user can navigate to a new URL in our application. The main guard to achieve that behavior is canActivate. This guard will run every time the user tries to access a path and only allow the user to proceed if the guard function
- [How to use Angular route guards?](https://www.angulartraining.com/daily-newsletter/how-to-use-angular-route-guards/) - The Angular router has 5 different route guards that can be used to control user navigation in the browser. Such guards can be used in scenarios such as: Preventing users from navigating to parts of an application without authorization Preventing users from leaving a form before it is saved or completed Making sure the user
- [Path mapping to simplify verbose imports](https://www.angulartraining.com/daily-newsletter/path-mapping-to-simplify-verbose-imports/) - When an Angular application contains several modules or sub-folders, it can become challenging to maintain the readability of your Typescript imports. For instance: import {something} from '../../../../../shared/shared.service' It's always better to rely on your IDE to write those paths for you using autocompletion (usually ctrl + space). Still, imports don't have to be that long.
- [Hot and cold RxJs Observables](https://www.angulartraining.com/daily-newsletter/hot-and-cold-rxjs-observables/) - You've probably heard about cold and hot observables in RxJs. What does that mean, and what's the difference? It's pretty straightforward: A cold observable creates a new "task" for each subscriber. For instance, observables returned by the Angular HttpClient are cold. If we subscribe to the same observable three times, we're firing three different HTTP
- [The inject() function](https://www.angulartraining.com/daily-newsletter/the-inject-function/) - Next in our dependency injection series is the inject() function. You're probably familiar with injecting services using class constructors as follows: We can also use the inject function to do the same: The inject function can be used in 3 different places. We can use it when initializing the field of an "Angular" class (component/service/pipe/directive/module)
- [Conditional Dependency Injection](https://www.angulartraining.com/daily-newsletter/conditional-dependency-injection/) - Yesterday, we saw how to use our component (and module) hierarchy to configure dependency injection with Angular. Today, let's look at how we can make dependency injection conditional. For instance, say we have a LoginService for production that requires features unavailable at dev time or that we do not want to use during the development
- [Dependency Injection and Provider Config](https://www.angulartraining.com/daily-newsletter/dependency-injection-and-provider-config/) - As Angular developers, we use and create services fairly often. So, in today's post, let's demystify the following syntax and see what the different options for it are: When a service is provided in the root injector (providedIn: 'root'), it means that such a service can be injected into any component of your application, and
- [How to decide which RxJs operator to use?](https://www.angulartraining.com/daily-newsletter/how-to-decide-which-rxjs-operator-to-use/) - There are more than 120 operators in RxJs, and with so many options, it can be challenging to decide which one we should use. We covered a few of them in this newsletter so far and mentioned websites such as Rxmarbles to learn more about these operators. Luckily, Rxjs.dev has an interesting feature called the
- [Image optimization directive - NgOptimizedImage](https://www.angulartraining.com/daily-newsletter/image-optimization-directive-ngoptimizedimage/) - The Angular team has always focused on improving the framework by making everything faster, from the compiler to our runtime code that gets optimized, minified, and tree-shaked. The Image optimization directive was added to Angular 15 in that same spirit. What it does: Intelligent lazy loading: Images invisible to the user on page load are
- [Standalone Application and Router config](https://www.angulartraining.com/daily-newsletter/standalone-application-and-router-config/) - With this daily post, let's get back to the new Angular standalone features. So far, we have seen how to create standalone components, add dependencies, and lazy-loading of standalone components. Since the primary goal of standalone components is to have less NgModules, what about creating an Angular application with no NgModule at all? Enter the
- [What's new in Angular 15.2?](https://www.angulartraining.com/daily-newsletter/whats-new-in-angular-15-2/) - Angular 15.2 was released a few days ago. The main addition to this release is a new Angular CLI schematic to migrate your existing code to standalone components: ng generate @angular/core:standalone This schematic isn't documented on the Angular website yet, as it's still in its early stages. It looks like it has three options so
- [RxJs Subjects: When and why?](https://www.angulartraining.com/daily-newsletter/rxjs-subjects-when-and-why/) - Our RxJs topic for this week is going to be Subjects. Angular has multiple services and classes (such as FormControl) that give us access to Observables that we can subscribe to. But what if we want to create our own Observable to emit data? While there is an Observable constructor and Observable creation functions such
- [Lazy-loading standalone components](https://www.angulartraining.com/daily-newsletter/lazy-loading-standalone-components/) - Now that we've covered both standalone components and lazy-loading Angular modules, we can introduce the concept of lazy-loading a standalone component, which wasn't possible before Angular 14. From a syntax standpoint, the only difference is that we use loadComponent instead of loadChildren. Everything else remains the same in terms of route configuration: Now, one of
- [What are standalone components?](https://www.angulartraining.com/daily-newsletter/what-are-standalone-components/) - Since Angular 14, any Angular feature (component, pipe, or directive) can be created as "standalone." This week, we will dive into what standalone components are, what feature they bring to the table, and how to use them. One quick note before we start: Whenever you see the words "standalone components," it really means "standalone components/pipes/directives."
- [Adding dependencies to standalone components](https://www.angulartraining.com/daily-newsletter/adding-dependencies-to-standalone-components/) - Now that we've introduced standalone components, you might have tested them and quickly realized that if you start using directives such as *ngIf, or other components, your code doesn't compile anymore. That's because those template dependencies (used only in the HTML template of your component) are not imported in Typescript (yet), so Angular cannot compile
- [RxJs debounceTime operator](https://www.angulartraining.com/daily-newsletter/rxjs-debouncetime-operator/) - This week's RxJs operator is very commonly used for form validation: debounceTime. debounceTime is going to delay emitted values for a given amount of time (in milliseconds) and emit the latest value after that period has passed without another source emission. I know it's not super easy to describe with words. A marble diagram for
- [Using validation functions that work with both template-driven and reactive forms](https://www.angulartraining.com/daily-newsletter/using-validation-functions-that-work-with-both-template-driven-and-reactive-forms/) - Yesterday, we looked at how to write a validation function that works with reactive forms. Template-driven forms have a somewhat similar approach that also uses a validator function but requires a wrapper directive that implements the Validator interface like this one (example here): The easiest solution to write a validation function that works with both
- [Custom form validation functions](https://www.angulartraining.com/daily-newsletter/custom-form-validation-functions/) - Let's continue our dive into Angular form validation capabilities. So far, we have seen how to display custom feedback to the user based on basic HTML validation features. Today, let's see how to customize the validation itself. The good news is that all we need is a function. That function takes a FormControl as a
- [Implementing custom feedback to form validation with Angular](https://www.angulartraining.com/daily-newsletter/implementing-custom-feedback-to-form-validation-with-angular/) - Yesterday, we saw that Angular uses six different CSS classes (actually, eight - I didn't mention ng-pending, which is the temporary state when async validation is being performed, and ng-submitted, which applies to the form element only). Today, let's see how we can customize the feedback displayed to the user beyond CSS classes. The nice
- [Basic form validation with Angular](https://www.angulartraining.com/daily-newsletter/basic-form-validation-with-angular/) - Validating user input in HTML forms can be a tedious task. In this new series, we'll look at how Angular can help us implement painless form validation. First, it's essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be
- [Using Stackblitz as an Angular playground](https://www.angulartraining.com/daily-newsletter/using-stackblitz-as-an-angular-playground/) - The easiest way to get an Angular development environment up and running these days is to use Stackblitz. I mention Stackblitz today because a few readers have sent me links to Github repos that they use when they want to test some of the ideas of this newsletter. While Github is perfectly fine, creating a
- [Creating a dialog in two lines of code](https://www.angulartraining.com/daily-newsletter/creating-a-dialog-in-two-lines-of-code/) - The theme of our week so far is that we don't always need to think just in terms of components. We saw that directives and CSS selectors can be powerful tools to keep in mind. Today, I'm going to show how modern HTML and template reference variables can do a lot of work for us
- [The power of Angular selectors](https://www.angulartraining.com/daily-newsletter/the-power-of-angular-selectors/) - Yesterday, we saw how using directives instead of components can increase code reusability by not tying our code logic to a specific HTML template. Now, if we want to write some code once and for all and make it work for all HTML elements in our app that match some specific conditions, we have another
- [RxJs distinctUntilChanged operator](https://www.angulartraining.com/daily-newsletter/rxjs-distinctuntilchanged-operator/) - This week, our RxJs operator of choice is distinctUntilChanged, another of these few operators with a name that is explicit enough. distinctUntilChanged ignores unchanged values that get emitted several times: This operator is beneficial when using RxJs to filter out data based on filters selected by the end user in the UI. For instance, it's
- [When to create a directive vs. a component?](https://www.angulartraining.com/daily-newsletter/when-to-create-a-directive-vs-a-component/) - Most Angular applications are composed of a majority of components and just a few directives if any. Today, I'd like to show you an example where a directive makes much more sense than a component. Consider the following component template: We have created a component tied to one single HTML element (button), and all the
- [RxJs forkJoin operator](https://www.angulartraining.com/daily-newsletter/rxjs-forkjoin-operator/) - Our weekly RxJs operator is forkJoin. This operator can be applied to any number of Observables. When all these Observables complete, forkJoin emits the last value from each one of them. A common use case for forkJoin is when we need to trigger several HTTP requests in parallel with the HttpClient then receive all of
- [How to generate DTOs for data objects?](https://www.angulartraining.com/daily-newsletter/how-to-generate-dtos-for-data-objects/) - Yesterday, we saw how to use json2ts to generate type definitions for our Angular applications. In addition, we saw that interfaces are optimal for performance reasons. Yet, the caveat with interfaces is that they can't act as a Data Transfer Object (DTO) on their own to change the data you're dealing with, nor do they
- [How to generate type definitions for TypeScript?](https://www.angulartraining.com/daily-newsletter/how-to-generate-type-definitions-for-typescript/) - This week, we have been looking at union types and the downsides of using any or unknown when we don't have any accurate type information. Today, let's look at how to generate type information out of any JSON data. The first tool I want to mention is json2ts.com, a website where you can copy-paste any
- [Union types in TypeScript](https://www.angulartraining.com/daily-newsletter/union-types-in-typescript/) - Yesterday, we talked about any, unknown, and the pros and cons of using such types. Today, let's focus on union types, an alternative to enums that are more performant and flexible to describe custom types. Let's assume we need to support different currencies in our application. Since currencies are mostly a code/symbol, we could take
- [How to learn more about RxJs operators?](https://www.angulartraining.com/daily-newsletter/how-to-learn-more-about-rxjs-operators/) - In the past weeks, we covered a few different RxJs operators in this newsletter. RxJs is the most difficult thing to learn about Angular, and that's because the technology is a mix of concepts that are not always obvious on their own: asynchronous data and callbacks, functional programming, streams, etc. My favorite resource to learn
- [TypeScript: any vs. unknown](https://www.angulartraining.com/daily-newsletter/typescript-any-vs-unknown/) - TypeScript has some abstract types that can be helpful in Angular applications. Most people have encountered the type any at some point, and it has become a typical anti-pattern in several projects where developers decided: "I don't want to bother using proper types for this object, so I'll use any". Here is why any is
- [How to mock your entire backend server?](https://www.angulartraining.com/daily-newsletter/how-to-mock-you-entire-backend-server/) - This is the last post in our series on mocking data for testing purposes. So far, we have seen how to generate mock data using Mockaroo and then how to incorporate such fake data in our Angular application. Today, let's push this one step further and use that same JSON data to mock our entire
- [How to generate mock data for my application?](https://www.angulartraining.com/daily-newsletter/how-to-generate-mock-data-for-my-application/) - Testing Angular applications can be difficult because our front-end code depends almost entirely on back-end data, and setting up different database scenarios takes a lot of time and effort. Sometimes, we don't even have enough data to test in the first place. This is why I want to introduce Mockaroo. Mockaroo is a website where
- [Container vs. Presentation Components](https://www.angulartraining.com/daily-newsletter/container-vs-presentation-components/) - One of the fundamental concepts of component architecture in Angular applications is to find the right balance between container and presentation components. Let's define what those are: Presentation components are reusable, simple pieces of UI. Think buttons, dialogs, cards, nav bars, etc. Container components are the exact opposite: They're not reusable. They're tied to a
- [How to use mock data in your Angular application?](https://www.angulartraining.com/daily-newsletter/how-to-use-mock-data-in-your-angular-application/) - Our last newsletter covered how to generate mock data for our Angular applications with Mockaroo. Today, we'll cover how to use that data in our apps so it can: Act as a temporary backend implementation so you can build your Angular components before the backend API is ready. Use that data as mocks for your
- [How to update my version of Angular?](https://www.angulartraining.com/daily-newsletter/how-to-update-my-version-of-angular/) - Yesterday, we mentioned why it's essential to keep your version of Angular as up-to-date as possible. Today, we're going to see how to do that. A concise answer would be to use the instructions at https://update.angular.io because that's where all the information is. You can select your current version, the one you want to upgrade
- [RxJs withLatestFrom operator](https://www.angulartraining.com/daily-newsletter/rxjs-withlatestfrom-operator/) - Our weekly RxJs operator is withLatestFrom, a rare example of an operator with a name that says it all. Here's the marble diagram for withLatestFrom: This operator takes two or more Observables and turns them into one single Observable that emits a new value whenever the source Observable emits something new. The important thing to
- [Angular Release Schedule](https://www.angulartraining.com/daily-newsletter/angular-release-schedule/) - Angular is constantly evolving. Let's talk about how often Angular is released and the release schedule of the framework.
- [RxJs tap operator](https://www.angulartraining.com/daily-newsletter/rxjs-tap-operator/) - The tap operator is one of the simplest RxJs operators because it doesn't change anything to the data coming into your observable: Why would we need a function that doesn't do anything? We saw a first very important example that enabled us to use the async pipe earlier. At least three important use cases are:
- [ngrxLet: A better version of the async pipe](https://www.angulartraining.com/daily-newsletter/ngrxlet-a-better-version-of-the-async-pipe/) - The ngrxLet directive solves all of the shortcomings of the async pipe with a straightforward syntax.
- [Date pipe default format and timezone](https://www.angulartraining.com/daily-newsletter/date-pipe-default-format-and-timezone/) - This post covers how to change the default date pipe format dates with Angular.
- [How to generate documentation for Angular applications?](https://www.angulartraining.com/daily-newsletter/how-to-generate-documentation-for-angular-applications/) - Let's see how to automate documentation generation for Angular applications.
- [RxJs combineLatest operator](https://www.angulartraining.com/daily-newsletter/rxjs-combinelatest-operator/) - combineLatest has a name that says it all: The operator combines the latest values from two or more observables into one observable. This marble diagram is the perfect illustration of that behavior (click on the image to access an interactive version): There are several possible use cases for that operator. The most common usage is
- [How to do advanced date formatting?](https://www.angulartraining.com/daily-newsletter/how-to-do-advanced-date-formatting/) - This week, we covered basic date formatting with the date pipe and the dateFormat function. While those tools work perfectly well for most basic scenarios, there are times when we want to do more complex date manipulation, such as: Adding/subtracting days to a date Displaying a duration, such as: "Last update: 2 days ago" Comparing
- [Formatting functions in Angular](https://www.angulartraining.com/daily-newsletter/formatting-functions-in-angular/) - We mentioned the default config options for the date pipe in Angular yesterday. Did you know we can also format dates in our Typescript code using a formatDate function? This function has the same signature as the date pipe, which makes perfect sense because... That's the function used by the pipe itself (source code here):
- [The debugger keyword](https://www.angulartraining.com/daily-newsletter/the-debugger-keyword/) - Yesterday, we covered how to use the JSON pipe with a tag to debug JSON data on a web page. Today, I want to cover one more debugging technique that is another time saver: The debugger keyword. Whenever you want to add a breakpoint in your web application, add the Javascript instruction: debugger; Then
- [RxJs switchMap operator](https://www.angulartraining.com/daily-newsletter/rxjs-switchmap-operator/) - A common mistake made in Angular applications is to nest observable subscriptions in the following manner: observable1.subscribe(data => { observable2.subscribe(otherData => { // Do something with otherData }); }); The above syntax is not recommended because it is hard to read and can lead to subtle bugs and unexpected side effects. For instance, that syntax
- [Exported Directives](https://www.angulartraining.com/daily-newsletter/exported-directives/) - Yesterday, we talked about Template Reference Variables. Today, I want to show you how a directive can be accessed with a Template Reference Variable. You've probably seen that syntax before: That syntax is possible because the NgForm directive is exported using the following syntax (actual Angular source code here): @Directive({ exportAs:
- [Template Reference Variables](https://www.angulartraining.com/daily-newsletter/template-reference-variables/) - Welcome to the very first edition of my daily Angular Newsletter! As promised, I'll keep it nice and short. Today's topic is Template Reference variables. I usually call that feature “the hashtag syntax” because that's how it's used: Here’s how I could use that reference variable to get the value

## Pages

- [Angular Courseware](https://www.angulartraining.com/daily-newsletter/angular-courseware/) - Lease our Angular courseware to teach Angular by yourself.
- [Code Review](https://www.angulartraining.com/daily-newsletter/code-review/) - Get a code review from our experts. Instead of hiring a full-time resource to revamp your code, why not ask for a code review first?
- [Video Courses](https://www.angulartraining.com/daily-newsletter/video-courses/) - Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but appear to the user like native mobile applications. In this course, we're going to see how to build PWAs with Angular. > More information NgRx has quickly become the go-to solution for state management in large
- [Frequently Asked Questions](https://www.angulartraining.com/daily-newsletter/frequently-asked-questions/) - What services do you provide? Angular Training is here to help development team succeed with Angular. As a result, services provided cover a wide range of options: On-site training at your office for 2 to 5 days Code reviews to make sure that your codebase is scalable and won't fail in the future Mentoring of
- [Trainer profiles](https://www.angulartraining.com/daily-newsletter/trainer-profiles/) - Alain Chautard is a Google Developer Expert in Web Technologies / Angular. He started working with Angular JS in 2011. Since then he has worked with all Angular versions on a daily basis, both as a developer and as a technical trainer. He is the organizer of the Sacramento Angular Meetup group, co-organizer of
- [Connect.tech talks, slides and links](https://www.angulartraining.com/daily-newsletter/connect-tech/) - The best kept secrets of Angular CLI Slide deck URL: https://docs.google.com/presentation/d/1xxcLhqa7l5Pbudr_Ii6xjKoyWvDUYKvQjwx0KD34oMQ/edit?usp=sharing Official documentation for Angular CLI: https://github.com/angular/angular-cli/wiki Hidden gems in the user stories: https://github.com/angular/angular-cli/wiki/stories Watch the talk here: https://www.recallact.com/presentation/best-kept-secrets-angular-cli How do Angular components communicate? Slide deck URL: https://docs.google.com/presentation/d/1cEbSZfFb_93-yFT18tozzFly2YDVCWK_sRCTQAD7aiA/edit?usp=sharing Blog post on how to pass data to a component (modal window example): https://medium.com/angular-training/how-to-pass-custom-content-to-an-angular-component-83a77da9f5be Source code for all
- [Sacramento Angular Training](https://www.angulartraining.com/daily-newsletter/sacramento-angular-training/) - Upcoming classes: October 23rd - October 27th. 5-day Angular class - Rancho Cordova, CA More info

## Categories

- [Uncategorized](https://www.angulartraining.com/daily-newsletter/category/uncategorized/)
- [TypeScript](https://www.angulartraining.com/daily-newsletter/category/typescript/)
- [Angular](https://www.angulartraining.com/daily-newsletter/category/angular/)
- [Template Syntax](https://www.angulartraining.com/daily-newsletter/category/angular/template-syntax/)
- [Components](https://www.angulartraining.com/daily-newsletter/category/angular/components/)
- [RxJs](https://www.angulartraining.com/daily-newsletter/category/rxjs/)
- [Directives](https://www.angulartraining.com/daily-newsletter/category/angular/directives/)
- [Operators](https://www.angulartraining.com/daily-newsletter/category/rxjs/operators/)
- [Debugging](https://www.angulartraining.com/daily-newsletter/category/angular/debugging/)
- [Pipes](https://www.angulartraining.com/daily-newsletter/category/angular/pipes/)
- [JavaScript](https://www.angulartraining.com/daily-newsletter/category/javascript/)
- [Date formatting](https://www.angulartraining.com/daily-newsletter/category/date-formatting/)
- [Tools](https://www.angulartraining.com/daily-newsletter/category/tools/)
- [NgRx](https://www.angulartraining.com/daily-newsletter/category/ngrx/)
- [Testing](https://www.angulartraining.com/daily-newsletter/category/testing/)
- [Performance](https://www.angulartraining.com/daily-newsletter/category/performance/)
- [Architecture](https://www.angulartraining.com/daily-newsletter/category/angular/architecture/)
- [Forms](https://www.angulartraining.com/daily-newsletter/category/angular/forms/)
- [Standalone](https://www.angulartraining.com/daily-newsletter/category/angular/standalone/)
- [Subjects](https://www.angulartraining.com/daily-newsletter/category/rxjs/subjects/)
- [Routing](https://www.angulartraining.com/daily-newsletter/category/angular/routing/)
- [Dependency Injection](https://www.angulartraining.com/daily-newsletter/category/angular/dependency-injection/)
- [i18n](https://www.angulartraining.com/daily-newsletter/category/i18n/)
- [Anti-patterns](https://www.angulartraining.com/daily-newsletter/category/angular/anti-patterns/)
- [Signals](https://www.angulartraining.com/daily-newsletter/category/angular/signals/)
- [CLI](https://www.angulartraining.com/daily-newsletter/category/angular/cli/)
- [Best practices](https://www.angulartraining.com/daily-newsletter/category/angular/best-practices/)
- [HTTP](https://www.angulartraining.com/daily-newsletter/category/http/)
- [CDK](https://www.angulartraining.com/daily-newsletter/category/angular/cdk/)
- [Material](https://www.angulartraining.com/daily-newsletter/category/angular/material/)
- [HTML](https://www.angulartraining.com/daily-newsletter/category/html/)
- [State Management](https://www.angulartraining.com/daily-newsletter/category/state-management/)
- [NgXs](https://www.angulartraining.com/daily-newsletter/category/state-management/ngxs/)
- [Server-side rendering](https://www.angulartraining.com/daily-newsletter/category/angular/server-side-rendering/)
- [Code Challenge](https://www.angulartraining.com/daily-newsletter/category/angular/code-challenge/)
- [CSS](https://www.angulartraining.com/daily-newsletter/category/css/)
- [Zoneless](https://www.angulartraining.com/daily-newsletter/category/angular/zoneless/)