NEW TECH UPDATES

Sometimes in Angular you have a collection of items and need to display a different component for different items in the same collection. Thankfully, Angular offers a directive called  ngSwitch  that gives us flexibility in how components render themselves. In this short article I'll show you an example from my game development project and how I used  ngSwitch  to work around it. The Problem In my particular case I’m  building a text-based adventure game  in Angular. I have a central region where story text will go, but not all text is equal. Some pieces of text will represent commands the player types in, some will represent story narrative, and some items representing general system status information. I want these different types of text to be formatted differently, as pictured below: The problem is that when you use  ngFor  to loop over a collection in Angular, the element the  ngFor  directive is on is the one that will be repeated. This makes it harder to

An in-depth guide into manual control of change detection in Angular Read an updated version of this article  here . This post comes as a response  to this tweet by Shai . He asks whether it makes sense to use  NgDoCheck  lifecycle hook to manually compare values instead of using the recommend approach with the  async  pipe. That’s a very good question that requires a lot of understanding of how things work under the hood: change detection, pipes and lifecycle hooks. That’s where I come in 😎. In this article I’m going to show you how to manually work with change detection. These techniques give you a finer control over the comparisons performed automatically by Angular for input bindings and async values checks. Once we have this knowledge, I’ll share with you my thoughts on the performance impact of these solutions. I work as a developer advocate at  ag-Grid . If you’re curious to learn about data grids or looking for the ultimate Angular data grid solu