MARK THOMPSON: Hey
there, friends. It's Mark from the
Angular team, back again and bringing you the latest
updates from the Angular V16 launch. Angular's momentum is real,
and we've been hard at work creating the best developer
experience possible for you, the fantastic
Angular community. We have a lot of features to
discuss, so let's get to it. First up, I hope your
components are thirsty, because the team has
just released a developer preview for
non-destructive hydration with server-side rendering. That's right, long gone are
the days of your Angular apps having to re-render the
server-rendered dom when your app gets to the browser. With this feature being
in developer preview, you can try it right now. Here's how. For standalone apps, add a call
to provide client hydration to the providers list in
the bootstrap application configuration. And if you are using
NG modules, add a call to provide client
hydration to the providers list in the app's main module. Remember, this is a
developer preview, and there will be some features
we haven't implemented just yet. Be sure to check out
the release notes and Angular release
blog for more details. Links in the description
of this video. Next, let's discuss
recent updates to Angular's reactivity model. Up to this point, we've relied
solely on change detection power by zone JS,
but over time, we found that, at scale, it
isn't the optimal solution. Now, we spent a lot of time
trying to figure out a better way, and you know what, we think
we found one, Angular signals. If you haven't heard
of signals before, that's totally fine, because
we've got you covered. Signals have three
core concepts that we call "reactive primitives,"
signal, computed, and effect. A signal is like a variable, and
holds a value that can change. Unlike variables,
signals can notify Angular when they change. A computed is a kind of signal
that calculates its value from other signals,
and only updates if the value it
depends on changes. Then we have effects. Effects are functions
that execute when the values of the
signals they use change, and this gives developers
the opportunity to respond to changes
in a meaningful way. And now the biggest question,
when can we use them? Right now. We just launched in
developer preview, and we're going to link some
helpful docs and Q&As with the developers, where you
can find more information. And, remember, as with
all developer previews, things are likely to change
over time as we continue building out this feature set. Remember last year, when we
introduced standalone APIs for components,
directives, and pipes, allowing developers to
have optional modules, and everybody loved it? Well, get ready to love it
more, because we're introducing some awesome upgrades. You may have wanted to
migrate existing applications to use standalone APIs. Well, we've got something
for that scenario. Say hello to the new standalone
migration schematics. Now you can migrate your
applications all at once, or bypass using
the new schematic. To get started run NG generate
at Angular/core:standole in your project. But we didn't stop there. You can now generate
applications that are configured to use
standalone APIs from the start. That's right, no need
to manually convert your app code to bootstrapping a
component and removing modules. It's all handled for you with
the new standalone command line option for NG new. Routing is a vital part of
nearly every app out there, so we've decided to make it
a bit better for everyone. You've asked to be
able to bind parameters to a component's inputs. All right, you got it. In V16, you can now
define properties to map to inputs in the resolve
configuration for your routes. You can pass resolver and data
properties, path parameters, and even query parameters. Very cool stuff. Let's turn our
attention to updates around developer tooling. We have a crisp new developer
preview of our esbuild-based build system. Furthermore, we're using
Veet for the development server of NG serve. Now, this is only
for dev servers. To enable Veet in
esbuild, head over to Angular.json to
configure this feature. We'll include instructions in
the description to this video. Surveys and community
feedback tell us that Jest support is high on
the wish list for Angular devs. Well, today, we're
happy to announce that we're enabling experimental
support for Jest in V16. Details on how you can try out
this new experimental feature can be found in the
links in the description. Here's another
feature that we've received a lot of requests for. The community has been
asking for required inputs for a while, and we are happy
to announce that components now support required inputs. To mark an input as required,
add the required flag to the input decorator's
configuration, and you are ready to
use this new feature. OK, honestly, there
are too many features to cover in just
this update, so it's time for a lightning round. By default, new projects
will start with fewer files, and we've added a schematic
to generate your environment's file if you need it. The Angular language service
can now autocomplete imports in templates. The ngOnDestory lifecycle
hook is now injectable, and it provides you with more
flexibility in registering cleanup logic for your app. And while Angular has
always been compatible with the vast majority of
content security policy settings, we've just added
stricter style source to CSP support
across our packages to allow developers to
specify a non-data attribute for component styles
that Angular inlines. And can you believe
that there are even more updates in this release? To learn more, check out the
official Angular release blog at goo.gle/angular-v16. All right, everyone,
Angular V16 is out now with some
fantastic updates that we think you are
really going to love. Be sure to NG update
today to take advantage of all of these great features. Thanks for watching,
and go build great apps.
