Video details

Getting Started with Standalone Components in Angular

Angular
08.24.2022
English

Join the Angular team's very own Jessica Janiuk as she guides us through the getting started with the brand new Standalone Components feature in Angular.
Join the conversation online: Angular Twitter → https://twitter.com/angular Jessica's Twitter → https://twitter.com/thepunderwoman

Transcript

Hey, friends. I'm Jessica, and I'm standing here alone today to tell you about our latest feature. Standalone Components angular applications are composed of components, and until now, developers have had to create or update an existing Ng module in order to use a freshly created component. Ng modules have been used to specify which components, directives, and pipes are available to use in templates. The new Standalone API makes it possible to write Angular components, directives, and pipes without creating an associated Ng module. Standalone components are self contained and directly manage their template dependencies. This makes Ng modules optional for many practical development tasks. The focus shifts from Ng modules to components. Components are becoming the central concept in Angular. Let's discuss the benefits of this new approach. Making Ng modules optional reduces the friction of creating a new component. There's just less code to write and less files to open and modify. But this is more than just a syntax change. We lower the number of concepts a developer needs to understand. This is essential for simplifying the Angular learning journey. Most importantly, the selfcontained components can be packaged, reused, and lazy loaded on their own. This enables a range of use cases that were just very hard or even impossible to achieve before. To get a feel for these new APIs, let's create an application for a local dogfriendly community. It can be used to arrange the walkmydog help among neighbors. This application has a list and the details view. Let's start by scaffolding our application using the Angular CLI. I'm using the Ng new command in the terminal window. We'll use inline templates and styles for this example. That's why we use the inline flag. I'm going to add the routing so we can navigate between pages. Regular CSS will do for our sample application. We'll also need some data to display, so let's quickly generate some services with mock data. Using the Ng Generate command, I'm going to switch to the code editor, open up the generated Dogs service TS file, and just paste some sample data that I've prepared before. With all the preparations done, I can create the very first standalone component. It will display a list of dogs that could get some fresh air. Angular CLI will be helpful to quickly scaffold the component code. Notice that I'm passing the new standalone option to the Ng generate. Schematic such a dashing option in our generated component. Dogs List component Dot TS the component decorator has a new property called Standalone that has a value set to true. This component is now a standalone component and doesn't require declaration in any Ng module. There's another property in the component decorator called Imports that has an array containing common module in it. Now the component can use NGF, Ng Four, and other control flow directives. The Dogs List component will display data from a NOC data service that is injected in the constructor in Dogslistcomponent TS. With the data ready, we can add some basic HTML to component HTML and display the data. We'll improve the look and feel of this component later. We need one final step before testing our List component. Update the router configuration. I'm creating a new route entry in the app routing module TS file previously generated by the CLI. Next, we'll add our standalone component directly to the router configuration Routes variable by using the path and component properties. I'm also setting up a router redirect so that our List is displayed by default. At this point, we will have a working List page rendered by a standalone component, so let's test it together. I'm going to open up a terminal and start a development server with the Ng Serve command. Let's confirm that everything works as expected by navigating to local host at port 4200 in the browser. Our List renders okay, but it's not very pretty yet. Let's improve the design by introducing a Dog Card component using Angular CLI. Again, I'm scaffolding a new standalone component using the Ng Generate Component command in a terminal. In Dogslistcardcomponent TS, I'll update the template and styles property of the component decorator by adding some previously written code. A Dog's info will be passed into this component as an input. At this point, I've got two standalone components, a List and a card. How could I use a card in a List, though? Let me switch back to the Dog's List component and import the card we've just created. Importing a standalone component makes it available in a template and can be referenced in the component template by its selector. In this case, app dogslist card. Remember that before standalone components, you had to add a reference to an Ng module to make a component available for use in the other parts of the application. And now that's no longer necessary, standalone components explicitly manage their own dependencies. We can know with certainty what is available in the template by expecting the components list of imports. And this is of great importance. Our list is done. I'm going to create the Details view component now following similar coding patterns. So here's a view of that from the command line, I'll type Ng Generate Component once again using the Standalone option. In the Dog View component class, the Dog's ID will be passed in as a router param, so I need to inject the activated route and the Dog's service in the constructor, setting up a subscription to the route parameter changes will make sure that we update the Dog's data when navigating between pages. To test the Details view, we need to add the Dog View component to a router configuration and link to it from the Listcomponent Routes TF file. Then we need to link to it from the Dogs List component. We will update the router configuration by opening the approuting module TS file and add the new entry in the Routes array. With the new route entry in place, we can now open the dogs list component file and introduce a router link. A standalone component explicitly imports its template dependencies, so we need to add the router module to the list of component imports. With this stuff done, we can add a link to the Detail view component with a router link attribute. We can now test the entire functionality of the application. In a browser, I can open up the application URL and still see the list. This is good, but now I can also click on the Details link and navigate to the page dedicated to a given dog. At this point, we know how to create standalone components and manage their template dependencies. We've also successfully used routing to navigate between pages rendered by standalone components. I'd like to focus now on one of the major benefits of standalone components simplified lazy loading. The new functionality in Angular Router enables finegrained lazy loading and code splitting on a component level to demonstrate it. In practice, we will LazyLoad the Details view component. Let's navigate to the router configuration in App routing module and change the route entry. For Dogview component, we need to one, change the component property to the load component one. Two, change the component type to the dynamic import and three, remove the static import to the component type. Let's confirm that the Dog view component code is lazy loaded in the browser. In chrome. DevTools open the network. Tab. That way we can observe the lazy loaded activity when taking action. Now, back in the app, click on the Details link. You'll notice that the code for the Dog View component is downloaded and executed right when we click. That demonstrates that the code load is delayed and only happens when the route is loaded. This means the application can load and bootstrap faster. Because this route was not part of the main bundle and it loads separately, switching a route in the application to lazy loaded mode took us just a few seconds. We hope this leads to a better experience for developers. All the new functionality and APIs discussed today are available right now. In Angular version 14, standalone components are fully compatible with your existing Angular applications. They don't introduce any breaking changes, and they don't require any rewrites. In V 14, we've released the standalone APIs as Developer Preview. This means that the APIs are complete, polished, and available for you to experiment with and to explore. However, we're not quite ready to mark them as stable APIs just yet. If we get feedback from our developer community that they're not working well in certain use cases, we want to be able to make adjustments right away without waiting for our regular deprecation. Timeline of two major versions. For stable API's, making Ng modules optional requires adjustments to the entire Angular ecosystem. We are releasing core functionality today, but have several followup projects lined up. We will keep improving APIs tooling and documentation around standalone components. The goal is to make the developer journey as smooth as possible. We'd really like you to test out the new APIs and share your feedback. We can't wait to hear about your new developer experiences. If you have an issue, a feature request or something else, please open a GitHub issue and let us know. Links to the Example project and the angular documentation are in the description of this video. Subscribe to this channel and follow us on Twitter for more updates. This video certainly won't stand alone in your learning journey for Angular. There are many more for you to enjoy. Thanks for watching everyone and hey, live long and prosper, friend.