Getting Started with Standalone Components in Angular-x5PZwb4XurU.en.vtt

WEBVTT
Kind: subtitles
Language: en

00:00:00.682 --> 00:00:01.890
JESSICA JANIUK: Hey, friends.

00:00:01.890 --> 00:00:05.010
I'm Jessica and I'm
standing here alone today

00:00:05.010 --> 00:00:09.000
to tell you about our latest
feature, standalone components.

00:00:09.000 --> 00:00:11.435
[MUSIC PLAYING]

00:00:19.730 --> 00:00:22.520
Angular applications are
composed of components.

00:00:22.520 --> 00:00:25.790
And until now, developers
have had to create or update

00:00:25.790 --> 00:00:28.550
an existing ng module
in order to use

00:00:28.550 --> 00:00:31.100
a freshly created component.

00:00:31.100 --> 00:00:33.380
Ng modules have
been used to specify

00:00:33.380 --> 00:00:35.480
which components,
directives, and pipes are

00:00:35.480 --> 00:00:38.660
available to use in templates.

00:00:38.660 --> 00:00:42.110
The new standalone API
makes it possible to write

00:00:42.110 --> 00:00:45.710
angular components, directives,
and pipes without creating

00:00:45.710 --> 00:00:48.470
an associated ng module.

00:00:48.470 --> 00:00:51.680
Standalone components are
self contained and directly

00:00:51.680 --> 00:00:54.840
manage their template
dependencies.

00:00:54.840 --> 00:00:58.710
This makes ng modules optional
for many practical development

00:00:58.710 --> 00:00:59.850
tasks.

00:00:59.850 --> 00:01:04.540
The focus shifts from ng
modules to components.

00:01:04.540 --> 00:01:08.050
Components are becoming a
central concept in Angular.

00:01:08.050 --> 00:01:11.080
Let's discuss the benefits
of this new approach.

00:01:11.080 --> 00:01:14.410
Making ng modules optional
reduces the friction

00:01:14.410 --> 00:01:16.660
of creating a new component.

00:01:16.660 --> 00:01:19.690
There's just less code
to write and less files

00:01:19.690 --> 00:01:21.870
to open and modify.

00:01:21.870 --> 00:01:24.630
But this is more than
just the syntax change.

00:01:24.630 --> 00:01:27.900
We lower the number of
concepts a developer needs

00:01:27.900 --> 00:01:29.310
to understand.

00:01:29.310 --> 00:01:31.860
This is essential for
simplifying the Angular

00:01:31.860 --> 00:01:33.960
learning journey.

00:01:33.960 --> 00:01:36.630
Most importantly,
the self contained

00:01:36.630 --> 00:01:40.410
components can be packaged,
reused, and lazy loaded

00:01:40.410 --> 00:01:41.670
on their own.

00:01:41.670 --> 00:01:44.190
This enables a
range of use cases

00:01:44.190 --> 00:01:48.180
that were just very hard or even
impossible to achieve before.

00:01:48.180 --> 00:01:50.130
To get a feel for
these new APIs,

00:01:50.130 --> 00:01:54.240
let's create an application for
a local dog friendly community.

00:01:54.240 --> 00:01:56.520
It can be used to
arrange the walk

00:01:56.520 --> 00:01:58.890
my dog help among neighbors.

00:01:58.890 --> 00:02:02.890
This application has a
list and the details view.

00:02:02.890 --> 00:02:05.490
Let's start by scaffolding
our application

00:02:05.490 --> 00:02:07.170
using the Angular CLI.

00:02:07.170 --> 00:02:10.830
I'm using the ng new command
in a terminal window.

00:02:10.830 --> 00:02:14.970
We'll use inline templates
and styles for this example.

00:02:14.970 --> 00:02:17.790
That's why we use
the --inline flag.

00:02:17.790 --> 00:02:22.080
I'm going to add the routing so
we can navigate between pages.

00:02:22.080 --> 00:02:25.540
Regular CSS will do for
our sample application.

00:02:25.540 --> 00:02:27.490
We'll also need some
data to display.

00:02:27.490 --> 00:02:30.210
So let's quickly
generate some services

00:02:30.210 --> 00:02:34.140
with mock data using
the ng generate command.

00:02:34.140 --> 00:02:35.850
I'm going to switch
to the Code Editor,

00:02:35.850 --> 00:02:39.240
open up the generated
dogs.service.ts file

00:02:39.240 --> 00:02:43.070
and just paste some sample
data that I've prepared before.

00:02:43.070 --> 00:02:45.350
With all the
preparations done, I

00:02:45.350 --> 00:02:48.260
can create the very first
standalone component.

00:02:48.260 --> 00:02:51.650
It will display a list of dogs
that could get some fresh air.

00:02:51.650 --> 00:02:55.160
Angular CLI will be helpful to
quickly scaffold the component

00:02:55.160 --> 00:02:56.090
code.

00:02:56.090 --> 00:03:00.470
Notice that I'm passing the new
--standalone option to the ng

00:03:00.470 --> 00:03:01.940
generate schematic.

00:03:01.940 --> 00:03:04.340
Such a dashing option.

00:03:04.340 --> 00:03:08.450
In our generated component
DogsListComponent.ts,

00:03:08.450 --> 00:03:11.900
the component decorator has a
new property called standalone

00:03:11.900 --> 00:03:14.270
that has the value set to true.

00:03:14.270 --> 00:03:17.240
This component is now
a standalone component

00:03:17.240 --> 00:03:20.990
and doesn't require
declaration in any ng module.

00:03:20.990 --> 00:03:23.300
There's another property
in the component decorator

00:03:23.300 --> 00:03:27.590
called imports that has an array
containing common module in it.

00:03:27.590 --> 00:03:32.510
Now the component can use ng if,
ng for, and other control flow

00:03:32.510 --> 00:03:33.500
directives.

00:03:33.500 --> 00:03:35.960
The dogs list component
will display data

00:03:35.960 --> 00:03:39.770
from a NOC data service that
is injected in the constructor

00:03:39.770 --> 00:03:42.440
in DogsListComponent.ts.

00:03:42.440 --> 00:03:45.590
With the data ready, we
can add some basic HTML

00:03:45.590 --> 00:03:48.830
to component.html
and display the data.

00:03:48.830 --> 00:03:52.430
We'll improve the look and
feel of this component later.

00:03:52.430 --> 00:03:56.210
We need one final step before
testing our list component.

00:03:56.210 --> 00:03:59.900
Update the router configuration.

00:03:59.900 --> 00:04:03.740
I'm creating a new route entry
in the AppRoutingModule.ts

00:04:03.740 --> 00:04:07.860
file previously
generated by the CLI.

00:04:07.860 --> 00:04:10.920
Next we'll add our
standalone component directly

00:04:10.920 --> 00:04:13.620
to the router configuration
routes variable

00:04:13.620 --> 00:04:17.130
by using the path and
component properties.

00:04:17.130 --> 00:04:19.230
I'm also setting up
a router redirect

00:04:19.230 --> 00:04:22.110
so that our list is
displayed by default.

00:04:22.110 --> 00:04:24.990
At this point, we will have
a working list page rendered

00:04:24.990 --> 00:04:26.650
by a standalone component.

00:04:26.650 --> 00:04:28.230
So let's test it together.

00:04:28.230 --> 00:04:31.350
I'm going to open up a terminal
and start a development server

00:04:31.350 --> 00:04:33.330
with the ng serve command.

00:04:33.330 --> 00:04:35.580
Let's confirm that
everything works

00:04:35.580 --> 00:04:38.370
as expected by
navigating to localhost

00:04:38.370 --> 00:04:41.870
at port 4200 in the browser.

00:04:41.870 --> 00:04:45.110
Our list renders OK, but
it's not very pretty yet.

00:04:45.110 --> 00:04:48.440
Let's improve the design
by introducing a dog card

00:04:48.440 --> 00:04:49.970
component.

00:04:49.970 --> 00:04:53.750
Using Angular CLI again, I'm
scaffolding a new standalone

00:04:53.750 --> 00:04:56.780
component using the ng
generate component command

00:04:56.780 --> 00:04:57.860
in a terminal.

00:04:57.860 --> 00:05:01.610
In DogsListCardComponent.ts,
I'll

00:05:01.610 --> 00:05:04.640
update the template and style's
property of the component

00:05:04.640 --> 00:05:07.400
decorator by adding some
previously written code.

00:05:12.410 --> 00:05:17.040
A dog's info will be passed
into this component as an input.

00:05:17.040 --> 00:05:20.280
At this point, I've got
two standalone components.

00:05:20.280 --> 00:05:22.530
A list and a card.

00:05:22.530 --> 00:05:25.860
How could I use a
card in a list though?

00:05:25.860 --> 00:05:28.530
Let me switch back to
the dogs list component

00:05:28.530 --> 00:05:30.660
and import the card
we've just created.

00:05:34.580 --> 00:05:36.650
Importing a standalone
component makes

00:05:36.650 --> 00:05:38.390
it available in the
template and can

00:05:38.390 --> 00:05:42.260
be referenced in the component
template by its selector.

00:05:42.260 --> 00:05:46.660
In this case, app
dogs list card.

00:05:46.660 --> 00:05:49.360
Remember that before
standalone components,

00:05:49.360 --> 00:05:52.240
you had to add a
reference to an ng module

00:05:52.240 --> 00:05:54.310
to make a component
available for use

00:05:54.310 --> 00:05:56.150
in the other parts
of the application.

00:05:56.150 --> 00:05:59.650
And now that's no
longer necessary.

00:05:59.650 --> 00:06:03.730
Standalone components explicitly
manage their own dependencies.

00:06:03.730 --> 00:06:06.760
We can know with certainty what
is available in the template

00:06:06.760 --> 00:06:10.400
by expecting the
component's list of imports.

00:06:10.400 --> 00:06:14.020
And this is of great importance.

00:06:14.020 --> 00:06:15.160
Our list is done.

00:06:15.160 --> 00:06:18.460
I'm going to create the details
view component now following

00:06:18.460 --> 00:06:20.000
similar coding patterns.

00:06:20.000 --> 00:06:23.350
So here's a view of that.

00:06:23.350 --> 00:06:26.560
From the command line, I'll
type ng generate component,

00:06:26.560 --> 00:06:29.860
once again using the
--standalone option.

00:06:29.860 --> 00:06:33.160
In the dog view component
class, the dog's ID

00:06:33.160 --> 00:06:35.560
will be passed in
as a router param,

00:06:35.560 --> 00:06:38.440
so I need to inject the
activated route and the dogs

00:06:38.440 --> 00:06:41.530
service in the constructor.

00:06:41.530 --> 00:06:43.420
Setting up a
subscription to the route

00:06:43.420 --> 00:06:46.720
param changes will make sure
that we update the dog's data

00:06:46.720 --> 00:06:48.310
when navigating between pages.

00:06:54.130 --> 00:06:55.870
To test the details
view, we need

00:06:55.870 --> 00:06:58.750
to add the dog view component
to a router configuration

00:06:58.750 --> 00:07:02.510
and link to it from the
ListComponentRoutes.ts file.

00:07:02.510 --> 00:07:06.400
Then, we need to link to it
from the dogs list component.

00:07:06.400 --> 00:07:08.260
We will update the
router configuration

00:07:08.260 --> 00:07:11.440
by opening the
AppRoutingModule.ts file

00:07:11.440 --> 00:07:15.490
and add the new entry
in the routes array.

00:07:15.490 --> 00:07:17.500
With the new route
entry in place,

00:07:17.500 --> 00:07:21.040
we can now open the dogs list
component file and introduce

00:07:21.040 --> 00:07:22.900
a router link.

00:07:22.900 --> 00:07:24.970
A standalone
component explicitly

00:07:24.970 --> 00:07:27.290
imports its template
dependencies.

00:07:27.290 --> 00:07:30.670
So we need to add the router
module to the list of component

00:07:30.670 --> 00:07:32.480
imports.

00:07:32.480 --> 00:07:34.940
With this step done,
we can add a link

00:07:34.940 --> 00:07:38.570
to the detailed view component
with a router link attribute.

00:07:52.660 --> 00:07:54.970
We can now test the
entire functionality

00:07:54.970 --> 00:07:56.440
of the application.

00:07:56.440 --> 00:07:59.470
In a browser, I can open
up the application URL

00:07:59.470 --> 00:08:00.970
and still see the list.

00:08:00.970 --> 00:08:04.870
This is good, but now I can
also click on the Details link

00:08:04.870 --> 00:08:08.350
and navigate to the page
dedicated to a given dog.

00:08:08.350 --> 00:08:11.680
At this point, we know how to
create standalone components

00:08:11.680 --> 00:08:13.870
and manage their
template dependencies.

00:08:13.870 --> 00:08:16.360
We've also successfully
used routing

00:08:16.360 --> 00:08:18.310
to navigate between
pages rendered

00:08:18.310 --> 00:08:20.140
by standalone components.

00:08:20.140 --> 00:08:22.960
I'd like to focus now on
one of the major benefits

00:08:22.960 --> 00:08:27.010
of standalone components,
simplified lazy loading.

00:08:27.010 --> 00:08:29.080
The new functionality
in Angular router

00:08:29.080 --> 00:08:31.810
enables fine grained
lazy loading and code

00:08:31.810 --> 00:08:34.150
splitting on a component level.

00:08:34.150 --> 00:08:36.220
To demonstrate it
in practice, we

00:08:36.220 --> 00:08:39.100
will lazy load the
details view component.

00:08:39.100 --> 00:08:42.100
Let's navigate to the
router configuration in app

00:08:42.100 --> 00:08:44.950
routing module and
change the route entry

00:08:44.950 --> 00:08:47.810
for dog view component.

00:08:47.810 --> 00:08:51.890
We need to, one, change
the component property

00:08:51.890 --> 00:08:54.540
to the load component one.

00:08:54.540 --> 00:08:59.160
Two, change the component
type to the dynamic import.

00:08:59.160 --> 00:09:04.470
And three, remove the static
import to the component type.

00:09:04.470 --> 00:09:07.860
Let's confirm that the dog
view component code is lazy

00:09:07.860 --> 00:09:10.810
loaded in the browser.

00:09:10.810 --> 00:09:13.670
In Chrome DevTools,
open the Network tab.

00:09:13.670 --> 00:09:16.090
That way we can observe
the lazy loaded activity

00:09:16.090 --> 00:09:18.670
when taking action.

00:09:18.670 --> 00:09:22.090
Now back in the app,
click on the Details link.

00:09:22.090 --> 00:09:24.850
You'll notice that the code
for the dog view component

00:09:24.850 --> 00:09:27.610
is downloaded and executed
right when we click.

00:09:27.610 --> 00:09:29.500
That demonstrates
that the code load

00:09:29.500 --> 00:09:32.920
is delayed and only happens
when the root is loaded.

00:09:32.920 --> 00:09:37.060
This means the application
can load and bootstrap faster

00:09:37.060 --> 00:09:40.240
because this route was not part
of the main bundle and it loads

00:09:40.240 --> 00:09:41.690
separately.

00:09:41.690 --> 00:09:44.810
Switching a route in the
application to lazy loaded mode

00:09:44.810 --> 00:09:47.300
took us just a few seconds.

00:09:47.300 --> 00:09:50.810
We hope this leads to a better
experience for developers.

00:09:50.810 --> 00:09:53.990
All the new functionality
and APIs discussed today

00:09:53.990 --> 00:09:57.830
are available right now
in Angular version 14.

00:09:57.830 --> 00:10:01.430
Standalone components are fully
compatible with your existing

00:10:01.430 --> 00:10:03.110
Angular applications.

00:10:03.110 --> 00:10:05.450
They don't introduce
any breaking changes

00:10:05.450 --> 00:10:08.540
and they don't
require any rewrites.

00:10:08.540 --> 00:10:11.870
In v14 we've released
the standalone APIs

00:10:11.870 --> 00:10:13.670
as developer preview.

00:10:13.670 --> 00:10:16.490
This means that the APIs
are complete, polished,

00:10:16.490 --> 00:10:20.250
and available for you to
experiment with and to explore.

00:10:20.250 --> 00:10:24.680
However, we're not quite ready
to mark them as stable APIs

00:10:24.680 --> 00:10:26.210
just yet.

00:10:26.210 --> 00:10:28.850
If we get feedback from
our developer community

00:10:28.850 --> 00:10:31.880
that they're not working
well in certain use cases,

00:10:31.880 --> 00:10:33.650
we want to be able
to make adjustments

00:10:33.650 --> 00:10:36.860
right away without waiting
for our regular deprecation

00:10:36.860 --> 00:10:40.520
timeline of two major
versions for stable APIs.

00:10:40.520 --> 00:10:43.250
Making ng modules optional
requires adjustments

00:10:43.250 --> 00:10:46.530
to the entire Angular ecosystem.

00:10:46.530 --> 00:10:49.320
We are releasing core
functionality today

00:10:49.320 --> 00:10:52.350
but have several follow
up projects lined up.

00:10:52.350 --> 00:10:56.190
We will keep improving APIs,
tooling, and documentation

00:10:56.190 --> 00:10:57.840
around standalone components.

00:10:57.840 --> 00:10:59.400
The goal is to
make the developer

00:10:59.400 --> 00:11:02.220
journey as smooth as possible.

00:11:02.220 --> 00:11:04.920
We'd really like you to
test out the new APIs

00:11:04.920 --> 00:11:06.640
and share your feedback.

00:11:06.640 --> 00:11:09.720
We can't wait to hear about
your new developer experiences.

00:11:09.720 --> 00:11:13.350
If you have an issue, a feature
request, or something else,

00:11:13.350 --> 00:11:17.220
please open a GitHub
issue and let us know.

00:11:17.220 --> 00:11:20.910
Links to the example project
and the Angular documentation

00:11:20.910 --> 00:11:23.170
are in the description
of this video.

00:11:23.170 --> 00:11:25.320
Subscribe to this
channel and follow us

00:11:25.320 --> 00:11:27.360
on Twitter for more updates.

00:11:27.360 --> 00:11:30.300
This video certainly
won't stand alone

00:11:30.300 --> 00:11:32.400
in your learning
journey for Angular.

00:11:32.400 --> 00:11:34.870
There are many more
for you to enjoy.

00:11:34.870 --> 00:11:36.780
Thanks for watching, everyone.

00:11:36.780 --> 00:11:39.480
And hey, live long
and prosper, friends.

00:11:39.480 --> 00:11:41.930
[MUSIC PLAYING]