Angular 17 is a Completely Different Framework

it's the angular Renaissance I don't know what that means no one knows what it means but it's provocative no it's not it's get the people going yes angular went through a big overhaul in the past couple of years and the new V7 release is the result of all that work the promise is a modern Dev experience and better performance so let's spend the next few minutes reviewing all the new features angular has to offer after all this is one of the most popular front end Frameworks and it is backed by a large team of very talented developers if this team can finally na that have experienced and bring it closer to the modern standards angular could become a really powerful tool moving forward so let's install the most recent CLI version and initialize a new project the main.ts file is the entry point into our app where we simply bootstrap the angular application and mount an app component to the D next I am creating a component which in angular is a plain JavaScript class annotated with a decorator the industry offers various options to define components from reacts function based approach to swell single file components angular however sticks with a more traditional class-based approach and with independent templating and styling files okay it's time now to use one of the most exciting angular features an addition which makes a huge difference when it comes to reactivity and performance managing state is a big task in spas and again the industry experimented a lot with this one during the years signals are pretty much universally accepted as the solution for the state problem these days this new implementation is lightweight and concise compared to the previous change detection strategy angular was employing the we'll use the on uni life cycle hook to Fed some data from Oban service and populate our user signal with the data available let's jump into the HTML template and look at another big addition in the framework angular has used structural directives think of ngf and ng4 for templating purposes since its early days however the entire control flow implementation had to be revised to support the newly edit fine grain signals reactivity and the team decided to make the best of this situation as a result we can now use a new buil-in control flow which stands out clearly from the rendered markup we are iterating through the list of users and rendering a name in the D note that you are forced to use the track statement so that angular can optimize them updates when the underlying list changes also inside of for construct you'll have access to helper variables like index or last besides the usual fors and ifs angular 17 introduces the defer construct which gives you full control over lazy loading parts of your application this is a big step forward towards better performance but before looking at it in more detail let's users to push data in our list back in the component file I adding a Boolean signal based on which in the template I am conditionally rendering a toggle button and a form this gives us the chance to use one of the most powerful angular features reactive forms let's bind this form to a value in the component and Define a Handler for the submit event back in the TS file we first need to import the reactive forms module in our component then let's define a form group with a required form controll finally in the save method when the form is submitted we are pushing the new value in the user signal now let's discuss the rendering strategies aimed to improve the performance of your app first it is worth mentioning that starting with v17 you can create an SSR enabled app with this simple command the real power however is brought by the new defer block with this one you can lazy load parts of your application for better initial user experience and overall improved performance there are a handful of triggers which will cause the four sections to be rendered and the block can be paired with a placeholder to display some dummy content until the real data is rendered while angular is making big steps forward I get it might not be a cup of tea if that's the case here are some more recent UI Frameworks which are making big waves in the industry until next time thank you for watching

Channel: Awesome

Views: 49,086

Keywords:

Id: zTLDv5YIpqc

Length: 3min 41sec (221 seconds)

Published: Fri Nov 10 2023