WEBVTT

1
00:00:02.625 --> 00:00:04.285
<00:00:02.625>So, <00:00:02.858>yes, <00:00:03.091>everyone, <00:00:03.325>welcome <00:00:03.558>to <00:00:03.791>the <00:00:04.025>talk

2
00:00:04.345 --> 00:00:06.205
<00:00:04.345>and, <00:00:04.520>uh, <00:00:04.694>I'm <00:00:04.869>super <00:00:05.045>glad <00:00:05.220>that <00:00:05.395>you <00:00:05.569>are <00:00:05.744>here,

3
00:00:06.205 --> 00:00:07.685
<00:00:06.205>and <00:00:06.371>this <00:00:06.538>is <00:00:06.704>the <00:00:06.871>first <00:00:07.037>time <00:00:07.204>that <00:00:07.370>I'm <00:00:07.537>talking

4
00:00:07.985 --> 00:00:10.965
<00:00:07.985>for <00:00:08.218>the <00:00:08.451>VR <00:00:08.685>developers, <00:00:08.918>um, <00:00:09.151>community, <00:00:09.385>um,

5
00:00:11.185 --> 00:00:12.765
<00:00:11.185>in <00:00:11.418>this <00:00:11.651>event, <00:00:11.885>and <00:00:12.118>I'm <00:00:12.351>super <00:00:12.585>glad.

6
00:00:13.385 --> 00:00:16.245
<00:00:13.385>So, <00:00:13.525>today <00:00:13.665>we <00:00:13.805>are <00:00:13.945>going <00:00:14.084>to <00:00:14.225>talk <00:00:14.365>about <00:00:14.504>Angular, <00:00:14.645>angular, <00:00:14.785>CDK,

7
00:00:16.245 --> 00:00:17.805
<00:00:16.245>which <00:00:16.525>is <00:00:16.805>the <00:00:17.085>component <00:00:17.365>dev, <00:00:17.645>uh,

8
00:00:17.945 --> 00:00:19.365
<00:00:17.945>and <00:00:18.158>see <00:00:18.371>how <00:00:18.584>awesome <00:00:18.797>they <00:00:19.009>are <00:00:19.223>together.

9
00:00:19.945 --> 00:00:22.765
<00:00:19.945>So <00:00:20.085>I'm <00:00:20.225>Amad <00:00:20.365>Sen. <00:00:20.505>I'm <00:00:20.645>a <00:00:20.785>senior <00:00:20.925>software <00:00:21.065>engineer <00:00:21.205>at <00:00:21.345>Klarna.

10
00:00:22.825 --> 00:00:24.925
<00:00:22.825>I'm <00:00:23.025>also <00:00:23.224>a <00:00:23.425>Google <00:00:23.625>developer's <00:00:23.825>expert <00:00:24.025>in <00:00:24.224>Angular.

11
00:00:25.225 --> 00:00:27.725
<00:00:25.225>And <00:00:25.352>if <00:00:25.479>you <00:00:25.606>like <00:00:25.734>the <00:00:25.861>talk, <00:00:25.988>which <00:00:26.115>I'm <00:00:26.243>pretty <00:00:26.370>sure <00:00:26.497>you <00:00:26.625>will,

12
00:00:27.905 --> 00:00:30.205
<00:00:27.905>um, <00:00:28.105>make <00:00:28.305>sure <00:00:28.505>to <00:00:28.705>go <00:00:28.905>to <00:00:29.105>my <00:00:29.305>socials

13
00:00:30.205 --> 00:00:32.765
<00:00:30.205>and, <00:00:30.345>uh, <00:00:30.485>connect <00:00:30.625>with <00:00:30.764>me, <00:00:30.904>ask <00:00:31.044>questions, <00:00:31.185>uh, <00:00:31.325>stay <00:00:31.464>in <00:00:31.604>touch,

14
00:00:32.825 --> 00:00:34.565
<00:00:32.825>and <00:00:33.105>maybe <00:00:33.385>let's <00:00:33.665>develop <00:00:33.945>something <00:00:34.225>together.

15
00:00:35.665 --> 00:00:37.925
<00:00:35.665>So <00:00:35.898>let's <00:00:36.131>talk <00:00:36.365>about <00:00:36.598>what <00:00:36.831>is <00:00:37.065>Angular.

16
00:00:38.625 --> 00:00:43.345
<00:00:38.625>So <00:00:38.800>essentially <00:00:38.975>it <00:00:39.150>is <00:00:39.325>a <00:00:39.500>magic, <00:00:39.675>but <00:00:39.850>not <00:00:40.025>entirely.

17
00:00:43.605 --> 00:00:47.185
<00:00:43.605>Uh, <00:00:43.760>if <00:00:43.916>we <00:00:44.071>actually <00:00:44.227>go <00:00:44.382>into <00:00:44.538>what <00:00:44.693>Angular <00:00:44.849>is, <00:00:45.004>it's,

18
00:00:47.655 --> 00:00:50.865
<00:00:47.655>it's <00:00:47.830>a <00:00:48.005>development <00:00:48.180>platform, <00:00:48.355>so <00:00:48.530>people <00:00:48.705>often <00:00:48.880>confuse <00:00:49.055>it

19
00:00:50.865 --> 00:00:53.865
<00:00:50.865>with, <00:00:50.992>uh, <00:00:51.119>with <00:00:51.246>being <00:00:51.374>a <00:00:51.501>library, <00:00:51.628>uh, <00:00:51.755>which <00:00:51.883>there <00:00:52.010>are <00:00:52.137>a <00:00:52.265>lot

20
00:00:53.865 --> 00:00:55.745
<00:00:53.865>of <00:00:54.215>libraries <00:00:54.565>for <00:00:54.915>developing <00:00:55.265>ui,

21
00:00:55.925 --> 00:00:58.945
<00:00:55.925>but <00:00:56.125>Angular <00:00:56.324>is, <00:00:56.525>uh, <00:00:56.724>an <00:00:56.925>entire <00:00:57.125>development <00:00:57.324>platform,

22
00:00:59.435 --> 00:01:00.865
<00:00:59.435>which <00:00:59.649>consists <00:00:59.864>of <00:01:00.078>a <00:01:00.293>couple <00:01:00.507>of <00:01:00.722>things.

23
00:01:01.525 --> 00:01:03.705
<00:01:01.525>So, <00:01:01.725>uh, <00:01:01.925>the <00:01:02.125>main <00:01:02.324>component <00:01:02.525>for <00:01:02.725>Angular <00:01:02.925>is

24
00:01:03.705 --> 00:01:07.145
<00:01:03.705>that <00:01:03.860>it <00:01:04.016>is <00:01:04.171>a <00:01:04.327>components <00:01:04.482>based <00:01:04.638>framework <00:01:04.793>that <00:01:04.949>allows <00:01:05.105>you

25
00:01:07.325 --> 00:01:09.745
<00:01:07.325>to <00:01:07.605>build, <00:01:07.885>uh, <00:01:08.165>scalable <00:01:08.445>web <00:01:08.725>applications.

26
00:01:09.925 --> 00:01:12.025
<00:01:09.925>And <00:01:10.125>you <00:01:10.325>can <00:01:10.524>not <00:01:10.725>just <00:01:10.925>build <00:01:11.125>web <00:01:11.325>applications,

27
00:01:12.025 --> 00:01:13.665
<00:01:12.025>but <00:01:12.375>using <00:01:12.725>the <00:01:13.075>web <00:01:13.425>technologies,

28
00:01:13.685 --> 00:01:16.505
<00:01:13.685>you <00:01:13.885>can <00:01:14.085>either <00:01:14.285>create <00:01:14.485>mobile <00:01:14.685>applications, <00:01:14.885>for <00:01:15.085>instance,

29
00:01:16.735 --> 00:01:19.785
<00:01:16.735>with <00:01:16.935>Ionic, <00:01:17.135>or <00:01:17.335>you <00:01:17.535>could <00:01:17.735>even <00:01:17.935>go <00:01:18.135>further

30
00:01:20.285 --> 00:01:23.105
<00:01:20.285>and <00:01:20.440>implement <00:01:20.596>it <00:01:20.751>with <00:01:20.907>Electron <00:01:21.062>to <00:01:21.218>create <00:01:21.373>dex <00:01:21.529>of <00:01:21.685>application

31
00:01:23.205 --> 00:01:25.225
<00:01:23.205>or, <00:01:23.554>or <00:01:23.905>even <00:01:24.255>iot <00:01:24.605>applications.

32
00:01:25.725 --> 00:01:28.145
<00:01:25.725>It <00:01:25.899>also <00:01:26.074>comes <00:01:26.250>with <00:01:26.425>a <00:01:26.600>strong <00:01:26.774>ecosystem <00:01:26.949>of <00:01:27.125>tools

33
00:01:28.145 --> 00:01:30.665
<00:01:28.145>and <00:01:28.320>libraries, <00:01:28.494>uh, <00:01:28.670>which <00:01:28.845>means <00:01:29.020>that <00:01:29.195>if <00:01:29.369>you <00:01:29.545>have

34
00:01:30.665 --> 00:01:32.865
<00:01:30.664>to <00:01:31.014>implement <00:01:31.365>forms <00:01:31.714>or <00:01:32.065>routing

35
00:01:33.125 --> 00:01:36.025
<00:01:33.125>or <00:01:33.325>do <00:01:33.525>SCTP <00:01:33.725>calls <00:01:33.925>using <00:01:34.125>client <00:01:34.325>server <00:01:34.525>communication

36
00:01:37.005 --> 00:01:40.785
<00:01:37.005>or <00:01:37.179>even <00:01:37.354>animation, <00:01:37.530>all <00:01:37.705>of <00:01:37.880>that <00:01:38.054>comes, <00:01:38.229>uh, <00:01:38.405>pre-packed

37
00:01:40.815 --> 00:01:43.345
<00:01:40.815>with <00:01:40.990>Angular, <00:01:41.164>and <00:01:41.340>you <00:01:41.515>don't <00:01:41.690>have <00:01:41.865>to <00:01:42.039>worry <00:01:42.215>about

38
00:01:43.345 --> 00:01:45.185
<00:01:43.345>what <00:01:43.545>libraries <00:01:43.745>should <00:01:43.945>I <00:01:44.145>be <00:01:44.345>using <00:01:44.545>with <00:01:44.745>this.

39
00:01:45.885 --> 00:01:48.345
<00:01:45.884>Uh, <00:01:46.059>similarly, <00:01:46.234>angular <00:01:46.410>also <00:01:46.585>comes <00:01:46.759>up <00:01:46.934>with <00:01:47.109>a <00:01:47.285>bunch

40
00:01:48.345 --> 00:01:50.745
<00:01:48.345>of <00:01:48.545>developer <00:01:48.745>tools, <00:01:48.945>including <00:01:49.145>the <00:01:49.345>Angular <00:01:49.545>dev <00:01:49.745>tools

41
00:01:50.745 --> 00:01:52.025
<00:01:50.745>that <00:01:51.129>were <00:01:51.513>recently <00:01:51.897>announced.

42
00:01:52.165 --> 00:01:53.745
<00:01:52.164>So <00:01:52.339>if <00:01:52.514>you <00:01:52.690>have <00:01:52.865>not <00:01:53.039>checked <00:01:53.214>it <00:01:53.389>out <00:01:53.565>yet,

43
00:01:54.105 --> 00:01:55.745
<00:01:54.104>I <00:01:54.304>would <00:01:54.505>highly <00:01:54.704>encourage <00:01:54.904>you <00:01:55.104>to <00:01:55.304>do <00:01:55.505>so.

44
00:01:55.925 --> 00:01:57.745
<00:01:55.925>But <00:01:56.158>apart <00:01:56.391>from <00:01:56.625>the <00:01:56.858>Angular <00:01:57.091>dev <00:01:57.325>tools,

45
00:01:57.885 --> 00:02:00.305
<00:01:57.884>you <00:01:58.118>also <00:01:58.351>have <00:01:58.585>things <00:01:58.818>like <00:01:59.051>Karma, <00:01:59.285>um,

46
00:02:00.525 --> 00:02:01.985
<00:02:00.525>and <00:02:00.853>Jasmine <00:02:01.182>for <00:02:01.510>unit <00:02:01.839>testing.

47
00:02:02.085 --> 00:02:05.545
<00:02:02.085>And <00:02:02.285>then <00:02:02.485>you <00:02:02.684>have, <00:02:02.884>for <00:02:03.085>instance, <00:02:03.285>the <00:02:03.485>protector

48
00:02:05.805 --> 00:02:08.745
<00:02:05.805>for <00:02:05.980>end-to-end <00:02:06.155>testing, <00:02:06.330>and <00:02:06.505>they're <00:02:06.680>much <00:02:06.855>more <00:02:07.030>included <00:02:07.205>in

49
00:02:08.745 --> 00:02:10.905
<00:02:08.745>this <00:02:08.872>ecosystem <00:02:08.999>that <00:02:09.126>we <00:02:09.254>are <00:02:09.381>going <00:02:09.508>to <00:02:09.635>have <00:02:09.763>a <00:02:09.890>brief <00:02:10.017>look <00:02:10.145>at.

50
00:02:12.085 --> 00:02:14.385
<00:02:12.085>Uh, <00:02:12.318>another <00:02:12.551>question <00:02:12.785>is, <00:02:13.018>how <00:02:13.251>does <00:02:13.485>the

51
00:02:14.945 --> 00:02:16.105
<00:02:14.945>Angular <00:02:15.293>ecosystem <00:02:15.641>looks <00:02:15.988>like?

52
00:02:16.645 --> 00:02:21.425
<00:02:16.645>So <00:02:16.800>at <00:02:16.956>the <00:02:17.111>core <00:02:17.267>of <00:02:17.422>Angular, <00:02:17.578>we <00:02:17.733>have <00:02:17.889>angular <00:02:18.045>libraries.

53
00:02:21.815 --> 00:02:23.745
<00:02:21.815>That <00:02:22.015>means <00:02:22.215>that <00:02:22.415>you <00:02:22.615>can <00:02:22.815>create <00:02:23.015>a <00:02:23.215>library

54
00:02:23.885 --> 00:02:25.745
<00:02:23.885>and <00:02:24.060>you <00:02:24.234>can <00:02:24.410>use <00:02:24.584>it <00:02:24.760>in <00:02:24.935>all <00:02:25.109>your <00:02:25.285>projects,

55
00:02:25.805 --> 00:02:28.105
<00:02:25.805>or <00:02:25.932>you <00:02:26.059>can <00:02:26.186>open <00:02:26.314>source <00:02:26.441>it <00:02:26.568>and <00:02:26.695>other <00:02:26.823>developers <00:02:26.950>can <00:02:27.077>use <00:02:27.205>that.

56
00:02:28.325 --> 00:02:31.585
<00:02:28.325>So <00:02:28.500>it's <00:02:28.674>really <00:02:28.850>easy <00:02:29.024>to <00:02:29.200>have <00:02:29.375>libraries <00:02:29.549>within <00:02:29.725>Angular.

57
00:02:32.715 --> 00:02:35.205
<00:02:32.715>Then <00:02:32.890>we <00:02:33.065>have <00:02:33.240>something <00:02:33.415>called <00:02:33.590>lazy <00:02:33.765>loading, <00:02:33.940>which <00:02:34.115>means

58
00:02:35.205 --> 00:02:38.165
<00:02:35.204>that <00:02:35.380>you <00:02:35.554>can <00:02:35.730>differ <00:02:35.904>your <00:02:36.079>bundles <00:02:36.255>to <00:02:36.429>be <00:02:36.605>loaded

59
00:02:38.735 --> 00:02:40.805
<00:02:38.735>until <00:02:38.935>a <00:02:39.135>user <00:02:39.335>goes <00:02:39.535>to <00:02:39.735>a <00:02:39.935>particular <00:02:40.135>page,

60
00:02:41.025 --> 00:02:42.645
<00:02:41.025>or <00:02:41.305>you <00:02:41.585>could <00:02:41.865>even <00:02:42.145>configure <00:02:42.425>it

61
00:02:42.785 --> 00:02:46.565
<00:02:42.785>to <00:02:42.924>load <00:02:43.065>the <00:02:43.204>next <00:02:43.345>predictive <00:02:43.484>bundle <00:02:43.625>when <00:02:43.765>the <00:02:43.905>user <00:02:44.045>is <00:02:44.185>in

62
00:02:46.565 --> 00:02:47.765
<00:02:46.565>idle <00:02:46.781>state <00:02:46.997>in <00:02:47.213>the <00:02:47.429>current <00:02:47.644>page.

63
00:02:47.945 --> 00:02:49.645
<00:02:47.945>So <00:02:48.144>there <00:02:48.345>are <00:02:48.545>a <00:02:48.745>lot <00:02:48.945>of <00:02:49.144>configurations <00:02:49.345>around

64
00:02:49.905 --> 00:02:51.165
<00:02:49.905>how <00:02:50.283>you <00:02:50.661>do <00:02:51.039>routing

65
00:02:51.425 --> 00:02:53.885
<00:02:51.425>and <00:02:51.625>how <00:02:51.825>you <00:02:52.025>can <00:02:52.225>implement <00:02:52.425>lazy <00:02:52.625>loaded <00:02:52.825>features,

66
00:02:54.105 --> 00:02:55.645
<00:02:54.105>but <00:02:54.451>this <00:02:54.798>makes <00:02:55.144>it <00:02:55.491>snappier

67
00:02:55.745 --> 00:02:57.405
<00:02:55.745>for <00:02:56.025>an <00:02:56.305>Angular <00:02:56.585>application <00:02:56.865>to <00:02:57.145>load.

68
00:02:57.465 --> 00:03:01.165
<00:02:57.465>So <00:02:57.592>you <00:02:57.719>can <00:02:57.846>differ <00:02:57.974>the <00:02:58.101>rest <00:02:58.228>of <00:02:58.355>the <00:02:58.483>bundle <00:02:58.610>for <00:02:58.737>later <00:02:58.865>time.

69
00:03:01.925 --> 00:03:03.685
<00:03:01.925>Angular <00:03:02.205>also <00:03:02.485>comes <00:03:02.765>with <00:03:03.045>templates, <00:03:03.325>um,

70
00:03:04.015 --> 00:03:05.685
<00:03:04.015>which <00:03:04.295>on <00:03:04.575>the <00:03:04.855>code <00:03:05.135>you <00:03:05.415>could,

71
00:03:06.005 --> 00:03:07.885
<00:03:06.005>whenever <00:03:06.144>you <00:03:06.285>create <00:03:06.424>a <00:03:06.565>component, <00:03:06.704>you <00:03:06.845>have <00:03:06.984>a <00:03:07.125>template <00:03:07.265>for <00:03:07.405>it,

72
00:03:08.025 --> 00:03:10.765
<00:03:08.025>but <00:03:08.180>even <00:03:08.336>within <00:03:08.491>a <00:03:08.647>component, <00:03:08.802>you <00:03:08.958>can <00:03:09.113>use <00:03:09.269>certain <00:03:09.425>techniques

73
00:03:11.145 --> 00:03:12.765
<00:03:11.145>to <00:03:11.378>have <00:03:11.611>a <00:03:11.845>single <00:03:12.078>chunk <00:03:12.311>of <00:03:12.545>template

74
00:03:12.765 --> 00:03:14.205
<00:03:12.765>that <00:03:12.981>is <00:03:13.197>being <00:03:13.413>used <00:03:13.629>within <00:03:13.845>the <00:03:14.061>same

75
00:03:14.205 --> 00:03:15.525
<00:03:14.205>component <00:03:14.601>at <00:03:14.997>multiple <00:03:15.393>places.

76
00:03:15.665 --> 00:03:17.965
<00:03:15.665>So <00:03:15.840>you <00:03:16.015>don't <00:03:16.190>have <00:03:16.364>to <00:03:16.540>copy, <00:03:16.715>paste <00:03:16.890>the <00:03:17.065>code

77
00:03:17.985 --> 00:03:19.485
<00:03:17.985>and, <00:03:18.255>you <00:03:18.525>know, <00:03:18.795>make <00:03:19.065>it <00:03:19.335>worse.

78
00:03:20.435 --> 00:03:21.565
<00:03:20.435>Then <00:03:20.774>we <00:03:21.113>have <00:03:21.452>performance.

79
00:03:21.625 --> 00:03:24.285
<00:03:21.625>So <00:03:21.752>Angular <00:03:21.879>comes <00:03:22.006>with <00:03:22.134>a <00:03:22.261>bunch <00:03:22.388>of <00:03:22.515>techniques <00:03:22.643>that <00:03:22.770>you <00:03:22.897>can <00:03:23.025>use

80
00:03:24.625 --> 00:03:26.965
<00:03:24.625>to <00:03:24.825>improve <00:03:25.025>the <00:03:25.225>performance <00:03:25.425>of <00:03:25.625>the <00:03:25.825>web <00:03:26.025>application.

81
00:03:27.105 --> 00:03:29.605
<00:03:27.105>For <00:03:27.385>instance, <00:03:27.665>it <00:03:27.945>comes <00:03:28.225>with, <00:03:28.505>uh,

82
00:03:29.605 --> 00:03:31.165
<00:03:29.605>the <00:03:30.071>change <00:03:30.538>attraction <00:03:31.005>strategies.

83
00:03:31.345 --> 00:03:32.925
<00:03:31.345>It <00:03:31.578>comes <00:03:31.811>with <00:03:32.045>the <00:03:32.278>change <00:03:32.511>detector <00:03:32.745>rev

84
00:03:32.925 --> 00:03:35.125
<00:03:32.925>that <00:03:33.125>you <00:03:33.325>can <00:03:33.525>completely <00:03:33.725>detach <00:03:33.925>if <00:03:34.125>you <00:03:34.325>know

85
00:03:35.125 --> 00:03:37.485
<00:03:35.125>that <00:03:35.300>your <00:03:35.475>component <00:03:35.650>is <00:03:35.825>not <00:03:36.000>gonna <00:03:36.175>be <00:03:36.350>re <00:03:36.525>rendered.

86
00:03:37.785 --> 00:03:39.365
<00:03:37.785>Um, <00:03:37.984>so <00:03:38.185>you <00:03:38.385>can <00:03:38.585>be <00:03:38.785>smart <00:03:38.984>about <00:03:39.185>it.

87
00:03:39.585 --> 00:03:42.845
<00:03:39.585>It <00:03:39.725>also <00:03:39.865>comes <00:03:40.005>with <00:03:40.145>a <00:03:40.285>performance <00:03:40.425>budget, <00:03:40.565>so <00:03:40.705>you <00:03:40.845>can <00:03:40.985>kind

88
00:03:42.845 --> 00:03:46.045
<00:03:42.845>of <00:03:43.020>specify <00:03:43.195>in <00:03:43.370>your <00:03:43.545>configuration <00:03:43.720>file <00:03:43.895>what <00:03:44.070>is <00:03:44.245>okay

89
00:03:46.425 --> 00:03:49.845
<00:03:46.425>for <00:03:46.552>your <00:03:46.679>business <00:03:46.806>to <00:03:46.934>have <00:03:47.061>as <00:03:47.188>a <00:03:47.315>maximum <00:03:47.443>size <00:03:47.570>for <00:03:47.697>a <00:03:47.825>bundle,

90
00:03:49.875 --> 00:03:51.005
<00:03:49.875>when <00:03:50.078>you <00:03:50.281>should <00:03:50.485>show <00:03:50.688>a <00:03:50.892>warning,

91
00:03:51.195 --> 00:03:53.045
<00:03:51.195>when <00:03:51.428>you <00:03:51.661>should <00:03:51.894>stop <00:03:52.128>creating <00:03:52.361>the <00:03:52.595>bills.

92
00:03:53.105 --> 00:03:56.205
<00:03:53.105>And <00:03:53.260>then <00:03:53.416>you, <00:03:53.571>you <00:03:53.727>can <00:03:53.882>kind <00:03:54.038>of <00:03:54.193>see, <00:03:54.349>hey, <00:03:54.505>uh,

93
00:03:56.325 --> 00:03:59.205
<00:03:56.325>I <00:03:56.500>just <00:03:56.674>released <00:03:56.850>this <00:03:57.024>feature <00:03:57.200>which <00:03:57.375>had <00:03:57.549>these <00:03:57.725>dependencies,

94
00:03:59.205 --> 00:04:01.005
<00:03:59.204>and <00:03:59.404>now <00:03:59.605>that's <00:03:59.804>contributing <00:04:00.005>to <00:04:00.204>the <00:04:00.404>bundle <00:04:00.605>size.

95
00:04:01.265 --> 00:04:03.325
<00:04:01.265>So <00:04:01.420>it's <00:04:01.576>a <00:04:01.731>really <00:04:01.887>neat <00:04:02.042>thing <00:04:02.198>that <00:04:02.353>we <00:04:02.509>can <00:04:02.665>use.

96
00:04:03.675 --> 00:04:05.285
<00:04:03.675>Then <00:04:03.955>you <00:04:04.235>also <00:04:04.515>have <00:04:04.795>dependency <00:04:05.075>injection,

97
00:04:05.295 --> 00:04:08.885
<00:04:05.295>which <00:04:05.450>is <00:04:05.606>a <00:04:05.761>really <00:04:05.917>cool <00:04:06.072>concept <00:04:06.228>that <00:04:06.383>angular, <00:04:06.539>uh, <00:04:06.695>implements

98
00:04:08.935 --> 00:04:12.165
<00:04:08.935>where <00:04:09.135>you <00:04:09.335>have, <00:04:09.535>um, <00:04:09.735>components <00:04:09.935>depending <00:04:10.135>on <00:04:10.335>services,

99
00:04:12.265 --> 00:04:14.605
<00:04:12.265>and <00:04:12.464>those <00:04:12.665>services <00:04:12.864>could <00:04:13.065>depend <00:04:13.265>on <00:04:13.464>other <00:04:13.665>services.

100
00:04:15.105 --> 00:04:17.205
<00:04:15.105>Uh, <00:04:15.338>and <00:04:15.571>then <00:04:15.804>if <00:04:16.038>there's <00:04:16.271>anything <00:04:16.505>missing,

101
00:04:17.265 --> 00:04:20.805
<00:04:17.265>we <00:04:17.392>already <00:04:17.519>know <00:04:17.646>at, <00:04:17.774>uh, <00:04:17.901>at, <00:04:18.028>at <00:04:18.155>sort <00:04:18.283>of <00:04:18.410>the <00:04:18.537>development <00:04:18.664>time

102
00:04:20.995 --> 00:04:22.285
<00:04:20.995>that <00:04:21.285>that's <00:04:21.575>not <00:04:21.865>gonna <00:04:22.156>work.

103
00:04:22.545 --> 00:04:25.925
<00:04:22.545>And <00:04:22.685>this <00:04:22.825>is <00:04:22.965>the <00:04:23.105>same <00:04:23.245>concept <00:04:23.385>that <00:04:23.525>Nest <00:04:23.665>Gs <00:04:23.805>also <00:04:23.945>implemented,

104
00:04:26.145 --> 00:04:27.245
<00:04:26.145>uh, <00:04:26.392>for <00:04:26.640>the <00:04:26.887>server <00:04:27.135>side.

105
00:04:27.245 --> 00:04:28.725
<00:04:27.245>So <00:04:27.467>they <00:04:27.689>were <00:04:27.911>highly <00:04:28.133>inspired <00:04:28.355>by <00:04:28.577>Angular.

106
00:04:30.055 --> 00:04:32.635
<00:04:30.055>Um, <00:04:30.195>and <00:04:30.335>there <00:04:30.475>are <00:04:30.615>a <00:04:30.755>bunch <00:04:30.895>of <00:04:31.035>other <00:04:31.175>things <00:04:31.315>as <00:04:31.455>well

107
00:04:32.635 --> 00:04:34.235
<00:04:32.635>that <00:04:32.985>this <00:04:33.335>talk <00:04:33.685>cannot <00:04:34.034>cover,

108
00:04:34.615 --> 00:04:36.515
<00:04:34.615>but <00:04:34.848>if <00:04:35.081>you <00:04:35.315>talk <00:04:35.548>about <00:04:35.781>the <00:04:36.015>libraries

109
00:04:36.515 --> 00:04:39.315
<00:04:36.515>and <00:04:36.690>ecosystem <00:04:36.865>that <00:04:37.039>Angular <00:04:37.215>comes <00:04:37.390>with, <00:04:37.565>it's <00:04:37.740>a <00:04:37.914>bunch,

110
00:04:39.425 --> 00:04:41.395
<00:04:39.425>it's <00:04:39.600>a <00:04:39.775>lot <00:04:39.950>of <00:04:40.125>things <00:04:40.300>that <00:04:40.475>we <00:04:40.650>get, <00:04:40.825>um,

111
00:04:41.705 --> 00:04:43.115
<00:04:41.705>from <00:04:42.128>the <00:04:42.551>Angular <00:04:42.974>ecosystem.

112
00:04:43.375 --> 00:04:45.275
<00:04:43.375>For <00:04:43.575>instance, <00:04:43.775>we <00:04:43.975>have <00:04:44.175>the <00:04:44.375>Angular <00:04:44.575>component <00:04:44.775>deficit

113
00:04:45.305 --> 00:04:46.555
<00:04:45.305>that <00:04:45.465>we <00:04:45.626>are <00:04:45.787>going <00:04:45.947>to <00:04:46.108>talk <00:04:46.269>about <00:04:46.430>today.

114
00:04:46.855 --> 00:04:49.395
<00:04:46.855>We <00:04:47.055>have, <00:04:47.255>uh, <00:04:47.455>progressive <00:04:47.655>web <00:04:47.855>apps <00:04:48.055>for <00:04:48.255>Angular.

115
00:04:49.395 --> 00:04:51.835
<00:04:49.395>We <00:04:49.745>have <00:04:50.094>angular <00:04:50.445>material, <00:04:50.794>um,

116
00:04:52.055 --> 00:04:53.755
<00:04:52.055>we <00:04:52.335>do <00:04:52.615>have <00:04:52.895>Angular <00:04:53.175>language <00:04:53.455>services,

117
00:04:53.975 --> 00:04:56.475
<00:04:53.975>we <00:04:54.325>also <00:04:54.675>have <00:04:55.025>Angular <00:04:55.375>labs.

118
00:04:56.815 --> 00:05:00.435
<00:04:56.815>We <00:04:57.015>have, <00:04:57.215>uh, <00:04:57.415>language, <00:04:57.615>uh, <00:04:57.815>internationalization <00:04:58.015>as <00:04:58.215>well.

119
00:05:00.855 --> 00:05:03.515
<00:05:00.855>So <00:05:00.982>there <00:05:01.109>are <00:05:01.236>a <00:05:01.364>bunch <00:05:01.491>of <00:05:01.618>things <00:05:01.745>that, <00:05:01.873>that <00:05:02.000>come <00:05:02.127>with <00:05:02.255>Angular

120
00:05:03.515 --> 00:05:04.755
<00:05:03.515>and <00:05:03.738>is <00:05:03.961>super <00:05:04.184>easy <00:05:04.407>to <00:05:04.631>use.

121
00:05:05.575 --> 00:05:09.315
<00:05:05.575>Now, <00:05:05.730>we <00:05:05.886>all <00:05:06.041>know <00:05:06.197>that <00:05:06.352>we <00:05:06.508>love <00:05:06.663>building <00:05:06.819>web <00:05:06.974>applications,

122
00:05:09.415 --> 00:05:10.595
<00:05:09.415>we <00:05:09.769>love <00:05:10.123>web <00:05:10.477>technologies,

123
00:05:10.815 --> 00:05:14.035
<00:05:10.815>and <00:05:11.015>there <00:05:11.215>comes <00:05:11.415>a <00:05:11.615>certain <00:05:11.815>time, <00:05:12.015>um, <00:05:12.215>uh,

124
00:05:14.035 --> 00:05:16.555
<00:05:14.035>including <00:05:14.268>your <00:05:14.501>professional <00:05:14.735>career <00:05:14.968>when <00:05:15.201>you <00:05:15.435>have

125
00:05:16.555 --> 00:05:18.435
<00:05:16.555>to <00:05:16.905>actually <00:05:17.255>make <00:05:17.605>certain <00:05:17.955>decisions.

126
00:05:19.135 --> 00:05:22.795
<00:05:19.135>Um, <00:05:19.262>for <00:05:19.389>instance, <00:05:19.516>yeah, <00:05:19.644>not <00:05:19.771>this <00:05:19.898>one, <00:05:20.025>uh, <00:05:20.153>that, <00:05:20.280>I <00:05:20.407>don't <00:05:20.534>know

127
00:05:22.795 --> 00:05:24.595
<00:05:22.795>where <00:05:23.145>this <00:05:23.495>came <00:05:23.845>from, <00:05:24.195>but

128
00:05:25.955 --> 00:05:28.595
<00:05:25.955>whenever <00:05:26.110>we <00:05:26.266>create <00:05:26.421>a <00:05:26.577>new <00:05:26.732>project, <00:05:26.888>we <00:05:27.043>have <00:05:27.199>something <00:05:27.354>like,

129
00:05:29.295 --> 00:05:32.515
<00:05:29.295>Hey, <00:05:29.470>what <00:05:29.645>framework <00:05:29.820>do <00:05:29.995>I <00:05:30.170>use <00:05:30.345>for <00:05:30.520>the <00:05:30.695>ui?

130
00:05:32.935 --> 00:05:34.475
<00:05:32.935>Should <00:05:33.281>I <00:05:33.628>go <00:05:33.974>with <00:05:34.321>Bootstrap?

131
00:05:34.475 --> 00:05:35.915
<00:05:34.475>Should <00:05:34.734>I <00:05:34.993>go <00:05:35.252>with <00:05:35.511>Angular <00:05:35.771>material?

132
00:05:35.915 --> 00:05:38.315
<00:05:35.915>Because <00:05:36.115>there's <00:05:36.315>a <00:05:36.515>ton <00:05:36.715>of <00:05:36.915>options <00:05:37.115>out <00:05:37.315>there.

133
00:05:38.535 --> 00:05:40.035
<00:05:38.534>For <00:05:38.760>instance, <00:05:38.984>as <00:05:39.210>I <00:05:39.434>said, <00:05:39.659>angular <00:05:39.885>material,

134
00:05:40.415 --> 00:05:43.395
<00:05:40.415>we <00:05:40.570>have <00:05:40.726>a <00:05:40.881>really <00:05:41.037>cool <00:05:41.192>library <00:05:41.348>or <00:05:41.503>framework, <00:05:41.659>not <00:05:41.815>framework,

135
00:05:43.395 --> 00:05:44.995
<00:05:43.395>but <00:05:43.745>library, <00:05:44.094>uh, <00:05:44.445>prime <00:05:44.794>Angie

136
00:05:44.995 --> 00:05:46.835
<00:05:44.995>for <00:05:45.228>all <00:05:45.461>the <00:05:45.695>components <00:05:45.928>that <00:05:46.161>they <00:05:46.395>provide.

137
00:05:46.945 --> 00:05:49.675
<00:05:46.945>Then <00:05:47.085>we <00:05:47.224>have <00:05:47.365>Angular <00:05:47.505>Bootstrap, <00:05:47.645>then <00:05:47.784>we <00:05:47.925>have <00:05:48.065>NG <00:05:48.205>Semantic <00:05:48.344>ui,

138
00:05:49.675 --> 00:05:51.435
<00:05:49.675>and <00:05:49.830>these <00:05:49.986>are <00:05:50.141>just <00:05:50.297>to <00:05:50.452>name <00:05:50.608>a <00:05:50.763>few <00:05:50.919>of <00:05:51.075>them.

139
00:05:51.895 --> 00:05:54.955
<00:05:51.895>So <00:05:52.034>this <00:05:52.174>is <00:05:52.315>really <00:05:52.455>hard <00:05:52.594>to <00:05:52.734>to <00:05:52.875>kind <00:05:53.015>of <00:05:53.155>choose <00:05:53.294>which,

140
00:05:55.645 --> 00:05:58.125
<00:05:55.645>which <00:05:55.924>UI <00:05:56.205>library <00:05:56.484>I'm <00:05:56.765>gonna <00:05:57.044>be

141
00:05:58.125 --> 00:05:59.365
<00:05:58.125>using <00:05:58.404>for <00:05:58.683>this <00:05:58.962>particular <00:05:59.241>project.

142
00:06:00.305 --> 00:06:03.965
<00:06:00.305>Um, <00:06:00.421>so <00:06:00.538>one <00:06:00.655>of <00:06:00.771>the <00:06:00.888>questions <00:06:01.005>that <00:06:01.121>then <00:06:01.238>comes <00:06:01.355>in <00:06:01.471>mind <00:06:01.588>if, <00:06:01.705>uh,

143
00:06:03.965 --> 00:06:05.565
<00:06:03.965>especially <00:06:04.244>if <00:06:04.525>you're <00:06:04.804>a <00:06:05.085>senior <00:06:05.364>engineer

144
00:06:05.785 --> 00:06:07.725
<00:06:05.785>and <00:06:05.985>if <00:06:06.185>you <00:06:06.385>care <00:06:06.585>about, <00:06:06.785>uh, <00:06:06.985>bundle <00:06:07.185>size

145
00:06:07.945 --> 00:06:10.805
<00:06:07.945>and, <00:06:08.085>uh, <00:06:08.224>you <00:06:08.365>know, <00:06:08.505>what <00:06:08.645>are <00:06:08.784>you <00:06:08.925>using <00:06:09.065>within <00:06:09.205>your <00:06:09.344>project

146
00:06:11.305 --> 00:06:14.925
<00:06:11.305>is, <00:06:11.445>uh, <00:06:11.585>do <00:06:11.725>I <00:06:11.865>actually <00:06:12.005>need <00:06:12.145>a <00:06:12.285>UI <00:06:12.425>library <00:06:12.565>for <00:06:12.705>this

147
00:06:15.105 --> 00:06:17.805
<00:06:15.105>or <00:06:15.245>should <00:06:15.385>I <00:06:15.525>just <00:06:15.665>go <00:06:15.805>ahead <00:06:15.945>and <00:06:16.085>build <00:06:16.225>everything <00:06:16.365>from <00:06:16.505>scratch?

148
00:06:18.075 --> 00:06:20.525
<00:06:18.075>From <00:06:18.275>scratch <00:06:18.474>so <00:06:18.675>we <00:06:18.875>have <00:06:19.075>full <00:06:19.275>control <00:06:19.474>of

149
00:06:20.525 --> 00:06:21.605
<00:06:20.525>what <00:06:20.768>we <00:06:21.010>are <00:06:21.254>building, <00:06:21.497>right?

150
00:06:22.305 --> 00:06:23.965
<00:06:22.305>Um, <00:06:22.655>in <00:06:23.005>that <00:06:23.355>particular <00:06:23.705>case,

151
00:06:24.165 --> 00:06:28.205
<00:06:24.165>I <00:06:24.340>think <00:06:24.515>we <00:06:24.690>could <00:06:24.865>use <00:06:25.040>a <00:06:25.215>framework <00:06:25.390>or <00:06:25.565>not,

152
00:06:28.465 --> 00:06:29.965
<00:06:28.465>but <00:06:28.657>then <00:06:28.850>the <00:06:29.043>question <00:06:29.236>is, <00:06:29.429>do <00:06:29.622>we <00:06:29.815>need

153
00:06:29.965 --> 00:06:33.085
<00:06:29.965>to <00:06:30.140>reinvent <00:06:30.315>the <00:06:30.489>wheel <00:06:30.664>if <00:06:30.840>there <00:06:31.015>are <00:06:31.190>certain <00:06:31.364>functionalities?

154
00:06:33.265 --> 00:06:35.165
<00:06:33.265>For <00:06:33.465>instance, <00:06:33.664>if <00:06:33.865>we <00:06:34.065>talk <00:06:34.265>about <00:06:34.465>just <00:06:34.664>Bootstrap

155
00:06:35.165 --> 00:06:37.805
<00:06:35.165>or <00:06:35.365>Angular <00:06:35.565>material, <00:06:35.765>they <00:06:35.965>provide <00:06:36.165>things <00:06:36.365>like <00:06:36.565>buttons,

156
00:06:38.035 --> 00:06:41.565
<00:06:38.034>they <00:06:38.210>provide <00:06:38.385>things <00:06:38.559>like, <00:06:38.734>um, <00:06:38.909>um, <00:06:39.085>we <00:06:39.260>have <00:06:39.434>modal,

157
00:06:41.705 --> 00:06:44.445
<00:06:41.705>we <00:06:41.860>have <00:06:42.016>Tooltips, <00:06:42.171>we <00:06:42.327>have <00:06:42.482>Popovers, <00:06:42.638>then <00:06:42.793>we <00:06:42.949>have <00:06:43.104>dropdowns.

158
00:06:44.705 --> 00:06:45.965
<00:06:44.705>So <00:06:44.988>if <00:06:45.272>you're <00:06:45.555>using <00:06:45.839>Bootstrap,

159
00:06:45.965 --> 00:06:47.765
<00:06:45.965>the <00:06:46.315>functionality <00:06:46.665>is <00:06:47.015>already <00:06:47.365>there.

160
00:06:47.985 --> 00:06:50.725
<00:06:47.985>So <00:06:48.140>we <00:06:48.296>can <00:06:48.451>focus <00:06:48.607>more <00:06:48.762>on <00:06:48.918>the <00:06:49.073>business <00:06:49.229>rather <00:06:49.385>than

161
00:06:51.065 --> 00:06:52.365
<00:06:51.065>to <00:06:51.455>create <00:06:51.845>those <00:06:52.235>component.

162
00:06:52.985 --> 00:06:57.005
<00:06:52.985>Um, <00:06:53.112>but <00:06:53.239>then <00:06:53.366>there <00:06:53.494>is <00:06:53.621>also <00:06:53.748>something <00:06:53.875>if <00:06:54.003>we <00:06:54.130>are <00:06:54.257>using <00:06:54.385>these

163
00:06:57.005 --> 00:06:58.925
<00:06:57.005>frameworks, <00:06:57.705>um, <00:06:58.405>that

164
00:06:59.405 --> 00:07:02.245
<00:06:59.405>whenever <00:06:59.560>we <00:06:59.716>try <00:06:59.871>to <00:07:00.027>include <00:07:00.182>a <00:07:00.338>particular <00:07:00.493>framework <00:07:00.649>that <00:07:00.804>comes

165
00:07:02.275 --> 00:07:03.805
<00:07:02.275>with <00:07:02.734>their <00:07:03.193>default <00:07:03.652>styles.

166
00:07:04.145 --> 00:07:05.565
<00:07:04.145>So <00:07:04.400>my <00:07:04.656>application <00:07:04.911>that <00:07:05.167>I <00:07:05.423>have

167
00:07:05.565 --> 00:07:08.885
<00:07:05.565>to <00:07:05.765>build <00:07:05.965>should <00:07:06.165>potentially <00:07:06.365>look <00:07:06.565>a <00:07:06.765>particular <00:07:06.965>way,

168
00:07:09.625 --> 00:07:13.805
<00:07:09.625>but <00:07:09.752>if <00:07:09.879>I <00:07:10.006>use <00:07:10.134>Bootstrap, <00:07:10.261>then <00:07:10.388>it <00:07:10.515>comes <00:07:10.643>with <00:07:10.770>its <00:07:10.897>own <00:07:11.025>classes

169
00:07:14.105 --> 00:07:17.845
<00:07:14.105>and <00:07:14.260>the <00:07:14.416>style, <00:07:14.571>for <00:07:14.727>instance, <00:07:14.882>container, <00:07:15.038>uh, <00:07:15.193>for <00:07:15.349>buttons, <00:07:15.505>uh,

170
00:07:17.865 --> 00:07:20.285
<00:07:17.865>and <00:07:18.020>then <00:07:18.176>it <00:07:18.331>also <00:07:18.487>has <00:07:18.642>the <00:07:18.798>its <00:07:18.953>own <00:07:19.109>layout <00:07:19.265>system.

171
00:07:20.585 --> 00:07:23.325
<00:07:20.585>So <00:07:20.760>that <00:07:20.935>sometime <00:07:21.109>conflicts <00:07:21.284>with, <00:07:21.460>with <00:07:21.635>what <00:07:21.810>you <00:07:21.984>want

172
00:07:23.325 --> 00:07:24.325
<00:07:23.325>to <00:07:23.775>achieve, <00:07:24.224>uh,

173
00:07:24.425 --> 00:07:26.525
<00:07:24.425>and <00:07:24.600>you <00:07:24.775>probably <00:07:24.950>don't <00:07:25.125>need <00:07:25.300>all <00:07:25.475>of <00:07:25.650>those <00:07:25.825>styles,

174
00:07:26.525 --> 00:07:28.725
<00:07:26.525>for <00:07:26.700>instance, <00:07:26.875>or <00:07:27.049>you're <00:07:27.224>not <00:07:27.400>utilizing <00:07:27.575>all <00:07:27.750>of <00:07:27.924>them,

175
00:07:28.905 --> 00:07:30.685
<00:07:28.905>and <00:07:29.184>then <00:07:29.465>it's <00:07:29.744>just <00:07:30.025>extra <00:07:30.304>code.

176
00:07:31.425 --> 00:07:33.205
<00:07:31.425>So <00:07:31.891>then <00:07:32.358>what <00:07:32.825>happens

177
00:07:33.385 --> 00:07:36.405
<00:07:33.385>or <00:07:33.525>what <00:07:33.664>if <00:07:33.805>we <00:07:33.945>need <00:07:34.085>to <00:07:34.224>customize, <00:07:34.365>uh, <00:07:34.505>the <00:07:34.645>UI <00:07:34.784>in

178
00:07:36.405 --> 00:07:38.565
<00:07:36.405>that <00:07:36.604>particular <00:07:36.804>case <00:07:37.005>where <00:07:37.205>we <00:07:37.405>need <00:07:37.604>the <00:07:37.804>functionality,

179
00:07:38.945 --> 00:07:42.285
<00:07:38.945>but <00:07:39.100>we <00:07:39.256>also <00:07:39.411>don't <00:07:39.567>want <00:07:39.722>to, <00:07:39.878>uh, <00:07:40.033>want <00:07:40.189>to <00:07:40.344>kind

180
00:07:42.285 --> 00:07:44.205
<00:07:42.284>of <00:07:42.424>show <00:07:42.564>it <00:07:42.705>in <00:07:42.844>a <00:07:42.984>way <00:07:43.124>that <00:07:43.265>it <00:07:43.405>shows <00:07:43.544>by <00:07:43.684>default.

181
00:07:44.225 --> 00:07:46.245
<00:07:44.225>For <00:07:44.505>instance, <00:07:44.785>if <00:07:45.065>my <00:07:45.345>application <00:07:45.625>has

182
00:07:46.265 --> 00:07:48.045
<00:07:46.265>to <00:07:46.544>have <00:07:46.825>the <00:07:47.104>functionality <00:07:47.385>from <00:07:47.664>Bootstrap

183
00:07:48.045 --> 00:07:49.525
<00:07:48.045>but <00:07:48.267>doesn't <00:07:48.489>have <00:07:48.711>to <00:07:48.933>look <00:07:49.155>like <00:07:49.376>that,

184
00:07:49.865 --> 00:07:52.285
<00:07:49.865>and <00:07:50.005>if <00:07:50.145>I <00:07:50.285>have <00:07:50.425>to <00:07:50.565>customize <00:07:50.705>it, <00:07:50.845>then <00:07:50.985>what <00:07:51.125>would <00:07:51.265>happen?

185
00:07:52.585 --> 00:07:56.245
<00:07:52.585>So <00:07:52.784>in <00:07:52.984>that <00:07:53.185>particular <00:07:53.385>case, <00:07:53.585>you <00:07:53.784>mostly <00:07:53.984>kind

186
00:07:56.245 --> 00:07:59.925
<00:07:56.245>of <00:07:56.400>override <00:07:56.556>the <00:07:56.711>styles <00:07:56.867>that <00:07:57.022>are <00:07:57.178>provided <00:07:57.333>by <00:07:57.489>those <00:07:57.645>libraries

187
00:07:59.925 --> 00:08:03.205
<00:07:59.925>or <00:08:00.125>frameworks, <00:08:00.325>and <00:08:00.525>that <00:08:00.725>could <00:08:00.925>potentially <00:08:01.125>look <00:08:01.325>not

188
00:08:03.205 --> 00:08:04.725
<00:08:03.205>so <00:08:03.546>good <00:08:03.889>sometimes <00:08:04.231>because <00:08:04.573>you,

189
00:08:05.025 --> 00:08:07.445
<00:08:05.025>you <00:08:05.180>end <00:08:05.336>up <00:08:05.491>being <00:08:05.647>overriding <00:08:05.802>a <00:08:05.958>lot <00:08:06.113>of <00:08:06.269>the <00:08:06.424>styles

190
00:08:07.445 --> 00:08:08.685
<00:08:07.445>and <00:08:07.668>it's <00:08:07.891>really <00:08:08.114>hard <00:08:08.337>to <00:08:08.561>manage.

191
00:08:09.225 --> 00:08:10.565
<00:08:09.225>For <00:08:09.828>example, <00:08:10.431>imagine,

192
00:08:11.065 --> 00:08:13.365
<00:08:11.065>and <00:08:11.265>this <00:08:11.465>is <00:08:11.665>unrelated <00:08:11.865>to <00:08:12.065>web <00:08:12.265>development, <00:08:12.465>imagine

193
00:08:13.365 --> 00:08:16.525
<00:08:13.365>that <00:08:13.505>you <00:08:13.645>have <00:08:13.785>a <00:08:13.925>requirement <00:08:14.065>for, <00:08:14.205>um, <00:08:14.345>for <00:08:14.485>a <00:08:14.625>strong <00:08:14.765>suit

194
00:08:16.715 --> 00:08:18.525
<00:08:16.715>that <00:08:17.065>protects <00:08:17.414>from <00:08:17.765>potential <00:08:18.114>harm.

195
00:08:19.105 --> 00:08:21.165
<00:08:19.105>So <00:08:19.305>ideally <00:08:19.505>you <00:08:19.705>should <00:08:19.905>have <00:08:20.105>something <00:08:20.305>like <00:08:20.505>this.

196
00:08:21.955 --> 00:08:24.285
<00:08:21.955>It's <00:08:22.155>a, <00:08:22.354>it's <00:08:22.555>an <00:08:22.755>iron <00:08:22.955>suit, <00:08:23.155>it's <00:08:23.354>beautiful,

197
00:08:24.545 --> 00:08:25.925
<00:08:24.545>it <00:08:24.855>protects <00:08:25.166>you <00:08:25.476>from <00:08:25.787>harm.

198
00:08:26.545 --> 00:08:30.605
<00:08:26.545>You <00:08:26.672>can, <00:08:26.799>uh, <00:08:26.926>kind <00:08:27.054>of, <00:08:27.181>uh, <00:08:27.308>um, <00:08:27.435>you <00:08:27.563>know, <00:08:27.690>repel <00:08:27.817>bullets, <00:08:27.945>um,

199
00:08:30.675 --> 00:08:31.845
<00:08:30.675>your <00:08:31.026>Bulletproof <00:08:31.377>as <00:08:31.728>well.

200
00:08:32.305 --> 00:08:35.245
<00:08:32.304>But, <00:08:32.444>uh, <00:08:32.584>when <00:08:32.724>you <00:08:32.864>sort <00:08:33.005>of <00:08:33.145>use <00:08:33.284>a <00:08:33.424>framework <00:08:33.564>that <00:08:33.704>comes

201
00:08:35.245 --> 00:08:37.165
<00:08:35.245>with <00:08:35.595>in <00:08:35.945>its <00:08:36.294>own <00:08:36.645>styles,

202
00:08:38.025 --> 00:08:40.645
<00:08:38.025>you <00:08:38.199>might <00:08:38.375>get <00:08:38.549>the <00:08:38.725>functionality <00:08:38.900>right <00:08:39.074>in <00:08:39.250>some <00:08:39.424>cases,

203
00:08:41.225 --> 00:08:45.085
<00:08:41.225>but <00:08:41.365>it <00:08:41.505>wouldn't <00:08:41.645>look <00:08:41.784>as <00:08:41.925>good <00:08:42.065>as <00:08:42.205>you <00:08:42.345>had <00:08:42.485>the <00:08:42.625>requirements.

204
00:08:45.425 --> 00:08:47.765
<00:08:45.425>For <00:08:45.580>instance, <00:08:45.736>you <00:08:45.891>could <00:08:46.047>end <00:08:46.202>up <00:08:46.358>in <00:08:46.513>something <00:08:46.669>like <00:08:46.824>this.

205
00:08:48.785 --> 00:08:51.805
<00:08:48.785>Now, <00:08:48.985>if <00:08:49.185>you <00:08:49.385>look <00:08:49.584>at <00:08:49.785>this, <00:08:49.985>uh, <00:08:50.185>closely,

206
00:08:51.855 --> 00:08:54.285
<00:08:51.855>which <00:08:51.995>I <00:08:52.135>would <00:08:52.275>not <00:08:52.415>recommend <00:08:52.555>for <00:08:52.695>doing <00:08:52.835>for <00:08:52.975>a <00:08:53.115>long <00:08:53.255>time,

207
00:08:55.105 --> 00:08:58.205
<00:08:55.105>but <00:08:55.221>if <00:08:55.338>you <00:08:55.455>have <00:08:55.571>a <00:08:55.688>look <00:08:55.805>at <00:08:55.921>it <00:08:56.038>and <00:08:56.155>think, <00:08:56.271>does <00:08:56.388>it <00:08:56.505>work?

208
00:08:58.855 --> 00:09:02.525
<00:08:58.855>Maybe, <00:08:59.030>maybe <00:08:59.205>it's <00:08:59.380>strong, <00:08:59.555>maybe, <00:08:59.730>um, <00:08:59.905>it <00:09:00.080>dodges <00:09:00.255>bullets

209
00:09:02.525 --> 00:09:04.925
<00:09:02.525>or <00:09:02.725>kind <00:09:02.925>of, <00:09:03.125>you <00:09:03.324>know, <00:09:03.525>reflects <00:09:03.725>them <00:09:03.925>away,

210
00:09:05.505 --> 00:09:07.245
<00:09:05.505>but <00:09:05.705>the <00:09:05.905>question <00:09:06.105>is, <00:09:06.305>does <00:09:06.505>it <00:09:06.705>look <00:09:06.905>good?

211
00:09:08.255 --> 00:09:09.835
<00:09:08.255>Um, <00:09:08.535>and <00:09:08.814>I <00:09:09.095>wouldn't <00:09:09.375>say <00:09:09.655>so

212
00:09:09.835 --> 00:09:12.315
<00:09:09.835>because, <00:09:10.035>uh, <00:09:10.235>whatever <00:09:10.435>we <00:09:10.635>saw, <00:09:10.835>it <00:09:11.035>wasn't <00:09:11.235>according

213
00:09:12.315 --> 00:09:13.515
<00:09:12.315>to <00:09:12.675>the <00:09:13.035>requirements, <00:09:13.395>right?

214
00:09:14.015 --> 00:09:15.035
<00:09:14.015>So, <00:09:14.321>and <00:09:14.627>that <00:09:14.933>is

215
00:09:15.035 --> 00:09:17.795
<00:09:15.035>because <00:09:15.175>it's, <00:09:15.314>uh, <00:09:15.454>coming <00:09:15.594>out <00:09:15.735>of <00:09:15.875>the <00:09:16.015>box <00:09:16.155>with <00:09:16.295>some <00:09:16.435>styles

216
00:09:17.855 --> 00:09:21.475
<00:09:17.855>or, <00:09:17.995>um, <00:09:18.135>or <00:09:18.275>classes <00:09:18.415>that, <00:09:18.555>that <00:09:18.695>we <00:09:18.835>might <00:09:18.975>have <00:09:19.115>to <00:09:19.255>override.

217
00:09:22.255 --> 00:09:23.955
<00:09:22.255>So <00:09:22.605>the <00:09:22.955>question <00:09:23.305>then <00:09:23.655>becomes,

218
00:09:24.345 --> 00:09:27.875
<00:09:24.345>what <00:09:24.485>if <00:09:24.625>we <00:09:24.765>could <00:09:24.905>just <00:09:25.045>get <00:09:25.185>the <00:09:25.325>functionality, <00:09:25.465>uh, <00:09:25.605>the <00:09:25.745>core

219
00:09:27.875 --> 00:09:31.675
<00:09:27.875>of <00:09:28.030>it <00:09:28.186>and <00:09:28.341>then <00:09:28.497>had <00:09:28.652>complete <00:09:28.808>control <00:09:28.963>over <00:09:29.119>the <00:09:29.275>ui?

220
00:09:31.715 --> 00:09:35.795
<00:09:31.715>Imagine <00:09:31.842>that <00:09:31.969>you <00:09:32.096>have <00:09:32.224>to <00:09:32.351>build <00:09:32.478>a <00:09:32.605>dropdown <00:09:32.733>or <00:09:32.860>a <00:09:32.987>model, <00:09:33.115>right?

221
00:09:35.975 --> 00:09:39.275
<00:09:35.975>But <00:09:36.102>you <00:09:36.229>don't <00:09:36.356>have <00:09:36.484>to <00:09:36.611>then <00:09:36.738>worry <00:09:36.865>about <00:09:36.993>how <00:09:37.120>it <00:09:37.247>would <00:09:37.375>look

222
00:09:39.385 --> 00:09:42.955
<00:09:39.385>because <00:09:39.540>you <00:09:39.696>would <00:09:39.851>get <00:09:40.007>the <00:09:40.162>functionality <00:09:40.318>out <00:09:40.473>of <00:09:40.629>the <00:09:40.785>box,

223
00:09:43.295 --> 00:09:45.515
<00:09:43.295>but <00:09:43.469>then <00:09:43.645>how <00:09:43.819>you <00:09:43.995>want <00:09:44.170>it <00:09:44.344>to <00:09:44.520>be <00:09:44.694>styled,

224
00:09:45.535 --> 00:09:46.555
<00:09:45.535>that's <00:09:45.764>entirely <00:09:45.993>up <00:09:46.223>to <00:09:46.453>you.

225
00:09:46.575 --> 00:09:50.635
<00:09:46.575>If <00:09:46.750>that <00:09:46.925>is <00:09:47.100>what <00:09:47.275>we <00:09:47.450>are <00:09:47.625>looking <00:09:47.800>for, <00:09:47.975>then

226
00:09:51.595 --> 00:09:53.795
<00:09:51.595>Angular <00:09:51.875>CDK <00:09:52.155>is <00:09:52.435>your <00:09:52.715>best <00:09:52.995>friend

227
00:09:54.615 --> 00:09:58.425
<00:09:54.615>because <00:09:54.770>it's <00:09:54.926>a <00:09:55.081>component <00:09:55.237>dev <00:09:55.392>kit, <00:09:55.548>it <00:09:55.703>essentially <00:09:55.859>allows <00:09:56.015>you

228
00:09:58.765 --> 00:10:00.465
<00:09:58.765>to <00:09:59.115>build <00:09:59.465>your <00:09:59.814>own <00:10:00.165>components,

229
00:10:00.735 --> 00:10:03.065
<00:10:00.735>your <00:10:01.015>own <00:10:01.295>component <00:10:01.575>library <00:10:01.855>without <00:10:02.135>having

230
00:10:03.065 --> 00:10:04.345
<00:10:03.065>to <00:10:03.353>think <00:10:03.641>about <00:10:03.929>the <00:10:04.217>styles.

231
00:10:04.605 --> 00:10:07.825
<00:10:04.605>And <00:10:04.745>one <00:10:04.885>great <00:10:05.025>example <00:10:05.165>of <00:10:05.305>using <00:10:05.445>the <00:10:05.585>ular <00:10:05.725>component <00:10:05.865>dev <00:10:06.005>kit

232
00:10:07.825 --> 00:10:09.985
<00:10:07.825>or <00:10:08.058>the <00:10:08.291>CDK <00:10:08.525>is <00:10:08.758>Angular <00:10:08.991>material <00:10:09.225>library.

233
00:10:10.445 --> 00:10:12.545
<00:10:10.445>So <00:10:10.678>all <00:10:10.911>the <00:10:11.145>styles <00:10:11.378>are <00:10:11.611>their <00:10:11.845>own,

234
00:10:12.645 --> 00:10:14.225
<00:10:12.645>but <00:10:12.925>at <00:10:13.204>the <00:10:13.485>core, <00:10:13.765>the <00:10:14.045>functionality,

235
00:10:14.565 --> 00:10:16.865
<00:10:14.565>and <00:10:14.705>we <00:10:14.845>are <00:10:14.985>going <00:10:15.125>to <00:10:15.265>discuss <00:10:15.405>about <00:10:15.545>what <00:10:15.685>the <00:10:15.825>CDK <00:10:15.965>provides,

236
00:10:17.085 --> 00:10:19.545
<00:10:17.085>but <00:10:17.285>the <00:10:17.485>core <00:10:17.685>of <00:10:17.885>that <00:10:18.085>is <00:10:18.285>the <00:10:18.485>CDK,

237
00:10:19.605 --> 00:10:21.025
<00:10:19.605>and <00:10:19.860>you <00:10:20.116>can <00:10:20.371>use <00:10:20.627>this <00:10:20.883>CDK

238
00:10:21.025 --> 00:10:22.505
<00:10:21.025>to <00:10:21.291>create <00:10:21.557>your <00:10:21.824>own <00:10:22.090>component <00:10:22.357>libraries

239
00:10:22.575 --> 00:10:24.385
<00:10:22.575>that <00:10:22.775>do <00:10:22.975>not <00:10:23.175>have <00:10:23.375>any <00:10:23.575>default <00:10:23.775>styles <00:10:23.975>coming

240
00:10:24.385 --> 00:10:25.465
<00:10:24.385>from <00:10:24.628>the <00:10:24.871>Angular <00:10:25.114>C <00:10:25.357>dk.

241
00:10:25.465 --> 00:10:29.025
<00:10:25.465>So <00:10:25.592>you <00:10:25.719>can <00:10:25.846>start <00:10:25.974>from <00:10:26.101>a <00:10:26.228>scratch <00:10:26.355>depending <00:10:26.483>on <00:10:26.610>how <00:10:26.737>it <00:10:26.865>looks,

242
00:10:29.205 --> 00:10:31.145
<00:10:29.205>but <00:10:29.405>how <00:10:29.605>it <00:10:29.805>works <00:10:30.005>would <00:10:30.205>be <00:10:30.405>obviously <00:10:30.605>driven

243
00:10:31.205 --> 00:10:32.385
<00:10:31.205>by <00:10:31.559>the <00:10:31.913>angular <00:10:32.267>CDK.

244
00:10:33.445 --> 00:10:37.025
<00:10:33.445>Now, <00:10:33.585>imagine <00:10:33.725>that <00:10:33.865>we <00:10:34.005>are <00:10:34.145>talking <00:10:34.285>about, <00:10:34.425>um, <00:10:34.565>the <00:10:34.705>angular <00:10:34.845>CDK

245
00:10:37.025 --> 00:10:40.265
<00:10:37.025>and <00:10:37.199>we <00:10:37.375>are <00:10:37.550>building, <00:10:37.725>or <00:10:37.900>even <00:10:38.074>without <00:10:38.250>the <00:10:38.425>CDK,

246
00:10:40.265 --> 00:10:42.985
<00:10:40.265>there <00:10:40.405>are <00:10:40.545>some <00:10:40.685>things <00:10:40.824>that <00:10:40.965>we <00:10:41.105>build <00:10:41.245>in <00:10:41.385>almost <00:10:41.525>every <00:10:41.665>web

247
00:10:42.985 --> 00:10:44.345
<00:10:42.985>obligation <00:10:43.291>that <00:10:43.597>we <00:10:43.903>build, <00:10:44.209>right?

248
00:10:44.925 --> 00:10:48.905
<00:10:44.925>So <00:10:45.099>we <00:10:45.275>have <00:10:45.449>form <00:10:45.625>fields <00:10:45.800>in <00:10:45.974>a <00:10:46.150>web <00:10:46.324>application,

249
00:10:49.135 --> 00:10:52.465
<00:10:49.135>then <00:10:49.290>we <00:10:49.446>might <00:10:49.601>have <00:10:49.757>some <00:10:49.912>tooltips, <00:10:50.068>then <00:10:50.223>we <00:10:50.379>have <00:10:50.535>dialogues

250
00:10:52.575 --> 00:10:55.265
<00:10:52.575>that <00:10:52.702>are <00:10:52.829>used <00:10:52.956>for <00:10:53.084>confirmation, <00:10:53.211>as <00:10:53.338>you <00:10:53.465>can <00:10:53.593>see <00:10:53.720>on <00:10:53.847>the <00:10:53.975>image

251
00:10:55.325 --> 00:10:58.705
<00:10:55.325>or <00:10:55.500>for <00:10:55.675>let's <00:10:55.850>say <00:10:56.025>some <00:10:56.200>alerts <00:10:56.375>or <00:10:56.550>prompts <00:10:56.725>even.

252
00:10:59.165 --> 00:11:01.585
<00:10:59.165>Uh, <00:10:59.281>then <00:10:59.398>we <00:10:59.515>have <00:10:59.631>tables. <00:10:59.748>If <00:10:59.865>we <00:10:59.981>are <00:11:00.098>showing <00:11:00.214>a <00:11:00.331>lot <00:11:00.448>of <00:11:00.564>data,

253
00:11:02.415 --> 00:11:04.785
<00:11:02.415>then <00:11:02.615>we <00:11:02.814>have <00:11:03.015>burdens <00:11:03.214>of <00:11:03.415>course, <00:11:03.615>for, <00:11:03.814>uh,

254
00:11:04.785 --> 00:11:06.585
<00:11:04.785>for <00:11:05.064>providing <00:11:05.344>actions <00:11:05.625>to <00:11:05.905>certain <00:11:06.185>things.

255
00:11:06.885 --> 00:11:08.785
<00:11:06.885>And <00:11:07.085>we <00:11:07.285>could <00:11:07.485>have <00:11:07.685>some <00:11:07.885>things <00:11:08.085>like <00:11:08.285>pagination

256
00:11:08.785 --> 00:11:11.985
<00:11:08.785>because <00:11:08.925>we <00:11:09.064>wouldn't <00:11:09.204>want <00:11:09.344>to, <00:11:09.485>uh, <00:11:09.625>load <00:11:09.765>all <00:11:09.905>the <00:11:10.045>data <00:11:10.185>from,

257
00:11:12.095 --> 00:11:15.545
<00:11:12.095>from <00:11:12.222>your <00:11:12.349>server, <00:11:12.476>but <00:11:12.604>just <00:11:12.731>a <00:11:12.858>chunk <00:11:12.985>of <00:11:13.113>that <00:11:13.240>or <00:11:13.367>limited <00:11:13.495>items.

258
00:11:16.205 --> 00:11:18.345
<00:11:16.205>So <00:11:16.438>in <00:11:16.671>that <00:11:16.905>particular, <00:11:17.138>uh, <00:11:17.371>particular <00:11:17.605>case,

259
00:11:18.345 --> 00:11:21.665
<00:11:18.345>there <00:11:18.545>are <00:11:18.745>also <00:11:18.945>some <00:11:19.145>things <00:11:19.345>revolving <00:11:19.545>around <00:11:19.745>these,

260
00:11:21.755 --> 00:11:23.345
<00:11:21.755>these <00:11:22.455>UI <00:11:23.155>elements.

261
00:11:23.345 --> 00:11:26.825
<00:11:23.345>So <00:11:23.472>it's <00:11:23.599>not <00:11:23.726>just <00:11:23.854>how <00:11:23.981>it <00:11:24.108>looks, <00:11:24.235>but <00:11:24.363>also <00:11:24.490>how <00:11:24.617>it <00:11:24.745>performs

262
00:11:27.125 --> 00:11:28.465
<00:11:27.125>and <00:11:27.366>then <00:11:27.607>the <00:11:27.848>core <00:11:28.089>of <00:11:28.331>it.

263
00:11:28.725 --> 00:11:30.185
<00:11:28.725>So <00:11:28.987>there, <00:11:29.250>there <00:11:29.513>are <00:11:29.776>some <00:11:30.039>challenges

264
00:11:30.185 --> 00:11:31.385
<00:11:30.185>when <00:11:30.454>we <00:11:30.724>implement <00:11:30.995>these <00:11:31.265>things.

265
00:11:31.805 --> 00:11:33.465
<00:11:31.805>And <00:11:32.038>if <00:11:32.271>you <00:11:32.505>talk <00:11:32.738>about <00:11:32.971>those <00:11:33.204>challenges,

266
00:11:33.985 --> 00:11:35.385
<00:11:33.985>positioning <00:11:34.237>is <00:11:34.489>one <00:11:34.741>of <00:11:34.993>the <00:11:35.245>challenges.

267
00:11:35.405 --> 00:11:37.625
<00:11:35.405>For <00:11:35.638>instance, <00:11:35.871>if <00:11:36.105>I <00:11:36.338>have <00:11:36.571>this <00:11:36.805>dialogue,

268
00:11:37.755 --> 00:11:38.905
<00:11:37.755>where <00:11:38.013>would <00:11:38.272>I <00:11:38.531>position <00:11:38.790>this?

269
00:11:39.285 --> 00:11:40.985
<00:11:39.285>Um, <00:11:39.564>how <00:11:39.844>would <00:11:40.125>I <00:11:40.405>position <00:11:40.685>this?

270
00:11:41.285 --> 00:11:43.865
<00:11:41.285>And <00:11:41.440>if <00:11:41.596>we <00:11:41.751>have <00:11:41.907>one <00:11:42.062>dialogue <00:11:42.218>on <00:11:42.373>top <00:11:42.529>of <00:11:42.685>another,

271
00:11:44.095 --> 00:11:45.265
<00:11:44.095>what <00:11:44.305>would <00:11:44.516>happen <00:11:44.726>in <00:11:44.937>that <00:11:45.148>case?

272
00:11:45.575 --> 00:11:48.345
<00:11:45.575>Similarly, <00:11:45.730>if <00:11:45.886>we <00:11:46.041>have <00:11:46.197>to <00:11:46.352>provide <00:11:46.508>positioning <00:11:46.663>to <00:11:46.819>a <00:11:46.975>burden

273
00:11:48.935 --> 00:11:52.025
<00:11:48.935>dynamically <00:11:49.168>based <00:11:49.401>on, <00:11:49.635>uh, <00:11:49.868>the <00:11:50.101>window <00:11:50.334>size

274
00:11:52.525 --> 00:11:54.925
<00:11:52.525>or <00:11:52.875>based <00:11:53.225>on <00:11:53.574>the <00:11:53.925>language

275
00:11:54.925 --> 00:11:56.805
<00:11:54.925>that <00:11:55.125>we <00:11:55.324>are <00:11:55.525>using, <00:11:55.724>how <00:11:55.925>would <00:11:56.125>that <00:11:56.324>work?

276
00:11:57.185 --> 00:11:59.885
<00:11:57.185>So <00:11:57.385>similarly, <00:11:57.584>we <00:11:57.785>have <00:11:57.984>things <00:11:58.185>like <00:11:58.385>layout <00:11:58.584>observers,

277
00:12:00.095 --> 00:12:02.965
<00:12:00.095>which <00:12:00.270>would <00:12:00.445>reflect <00:12:00.620>any <00:12:00.795>change <00:12:00.970>that <00:12:01.145>the <00:12:01.320>user <00:12:01.495>does.

278
00:12:02.965 --> 00:12:06.165
<00:12:02.965>For <00:12:03.105>instance, <00:12:03.245>the <00:12:03.385>user <00:12:03.525>wants <00:12:03.665>to <00:12:03.805>use <00:12:03.945>your <00:12:04.085>application <00:12:04.225>in <00:12:04.365>a,

279
00:12:06.225 --> 00:12:08.165
<00:12:06.225>in <00:12:06.458>a <00:12:06.691>reduced <00:12:06.925>width <00:12:07.158>of <00:12:07.391>a <00:12:07.625>window.

280
00:12:08.665 --> 00:12:10.765
<00:12:08.665>Uh, <00:12:08.865>what <00:12:09.064>would <00:12:09.265>happen <00:12:09.464>that <00:12:09.665>if <00:12:09.865>you <00:12:10.064>wanted

281
00:12:10.765 --> 00:12:14.165
<00:12:10.765>to <00:12:10.892>show <00:12:11.019>some <00:12:11.146>banner <00:12:11.274>in <00:12:11.401>that <00:12:11.528>case, <00:12:11.655>as <00:12:11.783>the <00:12:11.910>user <00:12:12.037>does <00:12:12.165>it,

282
00:12:14.465 --> 00:12:17.405
<00:12:14.465>you <00:12:14.665>could <00:12:14.865>easily <00:12:15.065>use <00:12:15.265>these <00:12:15.465>things <00:12:15.665>like <00:12:15.865>observers

283
00:12:17.425 --> 00:12:20.325
<00:12:17.425>or <00:12:17.564>layout <00:12:17.704>observers, <00:12:17.844>then <00:12:17.984>we <00:12:18.125>have <00:12:18.265>things <00:12:18.405>like <00:12:18.545>drag <00:12:18.685>and <00:12:18.824>drop.

284
00:12:20.385 --> 00:12:23.485
<00:12:20.385>So <00:12:20.525>if <00:12:20.665>you <00:12:20.805>were <00:12:20.944>to <00:12:21.085>implement <00:12:21.225>something <00:12:21.365>like <00:12:21.505>a <00:12:21.645>Trello, <00:12:21.785>um,

285
00:12:23.585 --> 00:12:24.845
<00:12:23.585>having <00:12:23.963>a <00:12:24.341>Kanban <00:12:24.719>board,

286
00:12:24.905 --> 00:12:28.125
<00:12:24.905>or <00:12:25.060>even <00:12:25.216>if <00:12:25.371>you <00:12:25.527>had, <00:12:25.682>uh, <00:12:25.838>the <00:12:25.993>feature <00:12:26.149>for <00:12:26.305>kind

287
00:12:28.125 --> 00:12:30.205
<00:12:28.125>of <00:12:28.300>dragging <00:12:28.475>an <00:12:28.650>item <00:12:28.825>from <00:12:29.000>one <00:12:29.175>list <00:12:29.350>to <00:12:29.525>another,

288
00:12:30.515 --> 00:12:33.045
<00:12:30.515>then <00:12:30.748>implementing <00:12:30.981>it <00:12:31.215>ourselves <00:12:31.448>would <00:12:31.681>be <00:12:31.915>sort

289
00:12:33.045 --> 00:12:34.045
<00:12:33.045>of <00:12:33.344>reinventing <00:12:33.645>the <00:12:33.944>wheel

290
00:12:34.305 --> 00:12:37.085
<00:12:34.305>and <00:12:34.432>it <00:12:34.559>could <00:12:34.686>take, <00:12:34.814>uh, <00:12:34.941>much <00:12:35.068>time <00:12:35.195>handling <00:12:35.323>all <00:12:35.450>the <00:12:35.577>use <00:12:35.704>cases

291
00:12:37.265 --> 00:12:38.365
<00:12:37.265>or <00:12:37.512>all <00:12:37.760>the <00:12:38.007>corner <00:12:38.255>cases.

292
00:12:39.035 --> 00:12:40.685
<00:12:39.035>Then <00:12:39.314>we <00:12:39.594>have <00:12:39.875>things <00:12:40.155>like <00:12:40.435>accessibility.

293
00:12:41.105 --> 00:12:43.965
<00:12:41.105>If <00:12:41.260>I <00:12:41.416>have <00:12:41.571>a <00:12:41.727>color <00:12:41.882>picker, <00:12:42.038>can <00:12:42.193>I <00:12:42.349>just <00:12:42.505>navigate

294
00:12:43.965 --> 00:12:45.925
<00:12:43.965>through <00:12:44.165>my <00:12:44.365>keyboard <00:12:44.565>and <00:12:44.765>pick <00:12:44.965>a <00:12:45.165>particular <00:12:45.365>color

295
00:12:46.025 --> 00:12:49.405
<00:12:46.025>by <00:12:46.165>pressing <00:12:46.305>enter, <00:12:46.444>uh, <00:12:46.584>if <00:12:46.725>I <00:12:46.865>am <00:12:47.005>using <00:12:47.145>an <00:12:47.285>auto <00:12:47.425>complete

296
00:12:49.425 --> 00:12:52.005
<00:12:49.425>and <00:12:49.564>when <00:12:49.704>the <00:12:49.844>list <00:12:49.984>shows <00:12:50.125>up, <00:12:50.265>do <00:12:50.405>I <00:12:50.545>have <00:12:50.685>the <00:12:50.824>ability

297
00:12:52.025 --> 00:12:53.885
<00:12:52.025>to <00:12:52.258>just <00:12:52.491>use <00:12:52.725>my <00:12:52.958>keyboard, <00:12:53.191>um, <00:12:53.425>up

298
00:12:53.885 --> 00:12:55.085
<00:12:53.885>and <00:12:54.155>down <00:12:54.425>keys <00:12:54.695>to <00:12:54.965>navigate

299
00:12:55.085 --> 00:12:56.765
<00:12:55.085>to <00:12:55.285>a <00:12:55.485>particular <00:12:55.685>item <00:12:55.885>and <00:12:56.085>then <00:12:56.285>select <00:12:56.485>it?

300
00:12:56.785 --> 00:12:59.565
<00:12:56.785>Or <00:12:56.892>do <00:12:57.000>I <00:12:57.108>have <00:12:57.215>to <00:12:57.323>use <00:12:57.431>my <00:12:57.538>mouse <00:12:57.646>and <00:12:57.754>then <00:12:57.861>click <00:12:57.969>on <00:12:58.077>the <00:12:58.185>item?

301
00:13:00.235 --> 00:13:01.645
<00:13:00.235>Similarly, <00:13:00.658>we <00:13:01.081>have <00:13:01.504>portals

302
00:13:01.645 --> 00:13:03.845
<00:13:01.645>and <00:13:01.819>overlays, <00:13:01.995>which <00:13:02.170>can <00:13:02.345>be <00:13:02.520>used, <00:13:02.694>uh, <00:13:02.870>for, <00:13:03.045>uh,

303
00:13:03.845 --> 00:13:06.965
<00:13:03.845>both <00:13:04.078>the <00:13:04.311>dialogue, <00:13:04.545>the <00:13:04.778>models <00:13:05.011>to <00:13:05.245>position

304
00:13:07.225 --> 00:13:10.645
<00:13:07.225>or <00:13:07.425>to <00:13:07.625>show <00:13:07.825>some <00:13:08.025>component <00:13:08.225>interim <00:13:08.425>in, <00:13:08.625>uh,

305
00:13:10.705 --> 00:13:13.285
<00:13:10.705>during <00:13:10.905>a <00:13:11.105>user <00:13:11.305>experience <00:13:11.505>or <00:13:11.705>a <00:13:11.905>user <00:13:12.105>journey.

306
00:13:13.785 --> 00:13:15.365
<00:13:13.785>And <00:13:14.135>then <00:13:14.485>we <00:13:14.834>have <00:13:15.185>bidirectionality.

307
00:13:15.545 --> 00:13:18.005
<00:13:15.545>If <00:13:15.778>you <00:13:16.011>have <00:13:16.245>sort <00:13:16.478>of <00:13:16.711>an <00:13:16.944>application

308
00:13:18.005 --> 00:13:20.165
<00:13:18.005>that <00:13:18.238>has <00:13:18.471>multiple <00:13:18.705>languages, <00:13:18.938>which <00:13:19.171>is <00:13:19.405>support

309
00:13:20.725 --> 00:13:23.605
<00:13:20.725>multiple <00:13:20.925>directions <00:13:21.125>for <00:13:21.325>your <00:13:21.525>content, <00:13:21.725>then <00:13:21.925>also <00:13:22.125>handling

310
00:13:23.605 --> 00:13:25.885
<00:13:23.605>that <00:13:23.732>is, <00:13:23.859>uh, <00:13:23.986>one <00:13:24.114>of <00:13:24.241>the <00:13:24.368>things <00:13:24.495>that <00:13:24.623>we <00:13:24.750>have <00:13:24.877>to <00:13:25.005>consider.

311
00:13:26.265 --> 00:13:27.725
<00:13:26.265>And <00:13:26.527>then <00:13:26.790>we <00:13:27.053>have <00:13:27.316>scrolling <00:13:27.579>techniques.

312
00:13:27.985 --> 00:13:30.565
<00:13:27.985>For <00:13:28.125>instance, <00:13:28.265>if <00:13:28.405>we <00:13:28.545>have <00:13:28.685>a <00:13:28.825>huge <00:13:28.965>list <00:13:29.105>of, <00:13:29.245>uh, <00:13:29.385>elements,

313
00:13:31.225 --> 00:13:32.245
<00:13:31.225>how <00:13:31.454>are <00:13:31.684>we <00:13:31.913>handling <00:13:32.143>that?

314
00:13:32.545 --> 00:13:35.725
<00:13:32.545>If <00:13:32.719>I <00:13:32.895>have <00:13:33.069>to <00:13:33.245>do, <00:13:33.420>uh, <00:13:33.594>something <00:13:33.770>like, <00:13:33.944>uh,

315
00:13:36.035 --> 00:13:38.845
<00:13:36.035>what <00:13:36.190>we <00:13:36.346>call <00:13:36.501>an <00:13:36.657>infinite <00:13:36.812>scroll <00:13:36.968>that <00:13:37.123>when <00:13:37.279>you <00:13:37.435>scroll

316
00:13:38.905 --> 00:13:40.885
<00:13:38.905>and <00:13:39.045>then <00:13:39.185>you <00:13:39.324>load <00:13:39.464>more <00:13:39.605>items, <00:13:39.745>how <00:13:39.885>do <00:13:40.025>we <00:13:40.165>do <00:13:40.305>that?

317
00:13:40.905 --> 00:13:43.605
<00:13:40.905>So <00:13:41.032>there <00:13:41.159>are <00:13:41.286>a <00:13:41.414>bunch <00:13:41.541>of <00:13:41.668>things <00:13:41.795>that <00:13:41.923>are <00:13:42.050>usually <00:13:42.177>there <00:13:42.305>when

318
00:13:43.605 --> 00:13:45.645
<00:13:43.605>we <00:13:43.805>are <00:13:44.005>talking <00:13:44.205>about <00:13:44.405>a <00:13:44.605>good <00:13:44.805>web <00:13:45.005>application.

319
00:13:46.385 --> 00:13:48.565
<00:13:46.385>So <00:13:46.540>all <00:13:46.696>of <00:13:46.851>these <00:13:47.007>things <00:13:47.162>that <00:13:47.318>we <00:13:47.473>just <00:13:47.629>discussed <00:13:47.785>about,

320
00:13:48.635 --> 00:13:52.245
<00:13:48.635>they <00:13:48.790>are <00:13:48.946>provided <00:13:49.101>out <00:13:49.257>of <00:13:49.412>the <00:13:49.568>box <00:13:49.723>from <00:13:49.879>Angular <00:13:50.035>CDK

321
00:13:52.545 --> 00:13:55.085
<00:13:52.545>and <00:13:52.700>that <00:13:52.856>you <00:13:53.011>can <00:13:53.167>use <00:13:53.322>within <00:13:53.478>your <00:13:53.633>own <00:13:53.789>angular <00:13:53.944>applications

322
00:13:55.085 --> 00:13:57.685
<00:13:55.085>to <00:13:55.260>get <00:13:55.435>to <00:13:55.610>build <00:13:55.785>your <00:13:55.960>own <00:13:56.135>components <00:13:56.310>on <00:13:56.485>demand.

323
00:13:58.755 --> 00:14:00.775
<00:13:58.755>Now <00:13:58.930>the <00:13:59.105>question <00:13:59.280>is <00:13:59.455>how <00:13:59.630>do <00:13:59.805>we <00:13:59.980>get <00:14:00.155>started?

324
00:14:01.635 --> 00:14:04.455
<00:14:01.635>So <00:14:01.868>adding <00:14:02.101>Angular <00:14:02.335>CDK <00:14:02.568>into <00:14:02.801>your <00:14:03.035>angular

325
00:14:04.455 --> 00:14:05.775
<00:14:04.455>applications <00:14:04.851>is <00:14:05.247>super <00:14:05.643>easy.

326
00:14:06.275 --> 00:14:09.055
<00:14:06.275>All <00:14:06.402>you <00:14:06.529>have <00:14:06.656>to <00:14:06.784>do <00:14:06.911>is <00:14:07.038>just <00:14:07.165>to <00:14:07.293>type <00:14:07.420>this <00:14:07.547>command <00:14:07.675>ng,

327
00:14:09.055 --> 00:14:10.095
<00:14:09.055>add <00:14:09.523>angular <00:14:09.991>CTK,

328
00:14:10.315 --> 00:14:13.535
<00:14:10.315>and <00:14:10.470>that <00:14:10.626>adds <00:14:10.781>angular <00:14:10.937>CDK <00:14:11.092>into <00:14:11.248>your <00:14:11.403>project <00:14:11.559>using <00:14:11.715>something

329
00:14:13.535 --> 00:14:14.535
<00:14:13.535>called <00:14:13.985>Angular <00:14:14.435>schematics.

330
00:14:14.835 --> 00:14:17.055
<00:14:14.835>It <00:14:15.115>installs <00:14:15.395>the <00:14:15.675>required <00:14:15.955>packages, <00:14:16.235>uh,

331
00:14:17.405 --> 00:14:18.415
<00:14:17.405>into, <00:14:17.708>into <00:14:18.011>the <00:14:18.314>project.

332
00:14:18.555 --> 00:14:21.895
<00:14:18.555>If <00:14:18.729>you <00:14:18.905>are <00:14:19.079>kind <00:14:19.255>of, <00:14:19.430>uh, <00:14:19.604>doing <00:14:19.780>some <00:14:19.954>configuration,

333
00:14:21.995 --> 00:14:24.255
<00:14:21.995>it <00:14:22.170>provides <00:14:22.345>the <00:14:22.520>default <00:14:22.695>configuration <00:14:22.870>out <00:14:23.045>of <00:14:23.220>the <00:14:23.395>box.

334
00:14:24.435 --> 00:14:27.375
<00:14:24.435>And <00:14:24.590>if <00:14:24.746>in <00:14:24.901>future <00:14:25.057>you <00:14:25.212>wanted <00:14:25.368>to <00:14:25.523>upgrade, <00:14:25.679>uh, <00:14:25.834>your,

335
00:14:27.485 --> 00:14:29.895
<00:14:27.485>your <00:14:27.685>project <00:14:27.885>or <00:14:28.085>your <00:14:28.285>project <00:14:28.485>with <00:14:28.685>Angular <00:14:28.885>CDK,

336
00:14:29.895 --> 00:14:31.415
<00:14:29.895>you <00:14:30.168>can <00:14:30.442>use <00:14:30.715>NG <00:14:30.989>update <00:14:31.262>command

337
00:14:31.515 --> 00:14:33.575
<00:14:31.515>to <00:14:31.795>automatically <00:14:32.074>update <00:14:32.355>all <00:14:32.635>the <00:14:32.915>dependencies

338
00:14:33.575 --> 00:14:34.815
<00:14:33.575>so <00:14:33.734>you <00:14:33.893>don't <00:14:34.053>have <00:14:34.212>to <00:14:34.372>worry <00:14:34.531>about <00:14:34.691>it.

339
00:14:34.815 --> 00:14:37.135
<00:14:34.815>And <00:14:34.990>it's <00:14:35.165>a <00:14:35.340>really <00:14:35.515>neat <00:14:35.690>feature <00:14:35.865>from <00:14:36.040>Angular <00:14:36.215>team.

340
00:14:37.995 --> 00:14:41.575
<00:14:37.995>Now <00:14:38.122>let's <00:14:38.249>dive <00:14:38.376>a <00:14:38.504>bit <00:14:38.631>deeper <00:14:38.758>into <00:14:38.885>some <00:14:39.013>of <00:14:39.140>the <00:14:39.267>use <00:14:39.395>cases

341
00:14:41.575 --> 00:14:44.935
<00:14:41.575>that <00:14:41.715>we <00:14:41.855>are <00:14:41.995>going <00:14:42.135>to <00:14:42.275>talk <00:14:42.415>about <00:14:42.555>with <00:14:42.695>with <00:14:42.835>Angular <00:14:42.975>CDK.

342
00:14:45.755 --> 00:14:48.055
<00:14:45.755>The <00:14:45.882>first <00:14:46.009>thing <00:14:46.136>that <00:14:46.264>we <00:14:46.391>are <00:14:46.518>gonna <00:14:46.645>have <00:14:46.773>a <00:14:46.900>look <00:14:47.027>at <00:14:47.155>is

343
00:14:48.055 --> 00:14:49.255
<00:14:48.055>rendering <00:14:48.415>a <00:14:48.775>huge <00:14:49.135>list.

344
00:14:49.595 --> 00:14:53.405
<00:14:49.595>So <00:14:49.750>imagine <00:14:49.906>that <00:14:50.061>you <00:14:50.217>have, <00:14:50.372>um, <00:14:50.528>you <00:14:50.683>have <00:14:50.839>a <00:14:50.995>requirement

345
00:14:53.465 --> 00:14:54.685
<00:14:53.465>for <00:14:53.684>some <00:14:53.904>reason <00:14:54.123>that <00:14:54.343>you <00:14:54.563>have

346
00:14:54.685 --> 00:14:57.605
<00:14:54.685>to <00:14:54.840>fetch <00:14:54.996>all <00:14:55.151>the <00:14:55.307>data <00:14:55.462>from <00:14:55.618>the <00:14:55.773>server <00:14:55.929>at <00:14:56.084>once,

347
00:14:57.705 --> 00:15:00.325
<00:14:57.705>and <00:14:57.845>you <00:14:57.985>have <00:14:58.125>to <00:14:58.265>then <00:14:58.405>obviously <00:14:58.545>append <00:14:58.685>it <00:14:58.825>in <00:14:58.965>the <00:14:59.105>list

348
00:15:00.325 --> 00:15:03.125
<00:15:00.325>because, <00:15:00.525>uh, <00:15:00.725>because <00:15:00.925>of <00:15:01.125>some, <00:15:01.325>some <00:15:01.525>concrete <00:15:01.725>requirement.

349
00:15:03.705 --> 00:15:07.285
<00:15:03.705>Um, <00:15:03.845>and <00:15:03.985>then <00:15:04.125>what <00:15:04.265>you <00:15:04.405>have <00:15:04.545>is <00:15:04.685>you <00:15:04.825>end <00:15:04.965>up <00:15:05.105>adding

350
00:15:08.265 --> 00:15:09.845
<00:15:08.265>all <00:15:08.545>those <00:15:08.824>elements <00:15:09.105>into <00:15:09.385>the <00:15:09.665>dorm,

351
00:15:10.015 --> 00:15:11.685
<00:15:10.015>which <00:15:10.295>slows <00:15:10.574>down <00:15:10.855>the <00:15:11.135>dorm <00:15:11.415>sometimes.

352
00:15:12.025 --> 00:15:14.725
<00:15:12.025>So <00:15:12.152>imagine <00:15:12.279>that <00:15:12.406>you <00:15:12.534>have <00:15:12.661>this <00:15:12.788>list <00:15:12.915>that <00:15:13.043>you <00:15:13.170>need <00:15:13.297>to <00:15:13.425>show,

353
00:15:14.725 --> 00:15:17.125
<00:15:14.725>and <00:15:14.865>it <00:15:15.005>could <00:15:15.145>be <00:15:15.285>led <00:15:15.425>like <00:15:15.565>tens <00:15:15.705>of <00:15:15.845>thousands <00:15:15.985>of <00:15:16.125>items,

354
00:15:17.865 --> 00:15:20.925
<00:15:17.865>but <00:15:18.098>essentially <00:15:18.331>in, <00:15:18.565>in <00:15:18.798>one <00:15:19.031>particular <00:15:19.265>instance,

355
00:15:20.925 --> 00:15:23.125
<00:15:20.925>when <00:15:21.125>the <00:15:21.324>end <00:15:21.525>user <00:15:21.724>is <00:15:21.925>using <00:15:22.125>your <00:15:22.324>application,

356
00:15:23.305 --> 00:15:25.445
<00:15:23.305>the <00:15:23.505>user <00:15:23.704>is <00:15:23.905>not <00:15:24.104>looking <00:15:24.305>at <00:15:24.505>10,000 <00:15:24.704>items

357
00:15:25.545 --> 00:15:26.605
<00:15:25.545>at <00:15:25.783>the <00:15:26.021>same <00:15:26.260>time, <00:15:26.499>right?

358
00:15:27.025 --> 00:15:29.925
<00:15:27.025>The <00:15:27.152>user <00:15:27.279>would <00:15:27.406>only <00:15:27.534>be <00:15:27.661>looking <00:15:27.788>at <00:15:27.915>a <00:15:28.043>chunk <00:15:28.170>of <00:15:28.297>those <00:15:28.425>items.

359
00:15:30.425 --> 00:15:33.925
<00:15:30.425>And <00:15:30.564>what <00:15:30.704>if <00:15:30.844>we <00:15:30.984>could <00:15:31.125>just <00:15:31.265>have <00:15:31.405>the <00:15:31.545>number <00:15:31.685>of <00:15:31.824>items

360
00:15:34.035 --> 00:15:37.125
<00:15:34.035>that <00:15:34.162>are <00:15:34.289>shown <00:15:34.416>in <00:15:34.544>the <00:15:34.671>view <00:15:34.798>port <00:15:34.925>right <00:15:35.053>now <00:15:35.180>on <00:15:35.307>the <00:15:35.435>DOM

361
00:15:37.385 --> 00:15:39.165
<00:15:37.385>and <00:15:37.585>kind <00:15:37.785>of <00:15:37.985>disregard <00:15:38.185>all <00:15:38.385>the <00:15:38.585>other <00:15:38.785>items?

362
00:15:39.905 --> 00:15:42.205
<00:15:39.905>So <00:15:40.138>the <00:15:40.371>lesser <00:15:40.605>the <00:15:40.838>items, <00:15:41.071>the, <00:15:41.305>um,

363
00:15:42.205 --> 00:15:45.085
<00:15:42.205>that <00:15:42.345>are <00:15:42.485>rendering <00:15:42.625>on <00:15:42.765>the <00:15:42.905>do, <00:15:43.045>the <00:15:43.185>faster <00:15:43.325>the <00:15:43.465>application <00:15:43.605>is,

364
00:15:45.085 --> 00:15:46.645
<00:15:45.085>because <00:15:45.318>then <00:15:45.551>the <00:15:45.785>DOM <00:15:46.018>is <00:15:46.251>not <00:15:46.485>heavy

365
00:15:46.825 --> 00:15:49.845
<00:15:46.825>and <00:15:47.000>it <00:15:47.175>doesn't <00:15:47.350>have <00:15:47.525>to <00:15:47.700>recalculate <00:15:47.875>positioning <00:15:48.050>and <00:15:48.225>whatnot

366
00:15:49.905 --> 00:15:51.325
<00:15:49.905>or <00:15:50.160>show <00:15:50.416>it <00:15:50.671>on <00:15:50.927>the <00:15:51.183>ui.

367
00:15:51.905 --> 00:15:54.325
<00:15:51.905>So <00:15:52.032>we <00:15:52.159>can <00:15:52.286>do <00:15:52.414>this <00:15:52.541>with <00:15:52.668>something <00:15:52.795>called <00:15:52.923>the <00:15:53.050>Angular <00:15:53.177>C <00:15:53.305>DK

368
00:15:54.325 --> 00:15:55.685
<00:15:54.325>virtual <00:15:54.733>scroll, <00:15:55.141>and <00:15:55.549>that's

369
00:15:55.685 --> 00:15:56.965
<00:15:55.685>what <00:15:55.829>we <00:15:55.973>are <00:15:56.117>going <00:15:56.261>to <00:15:56.405>look <00:15:56.549>at <00:15:56.693>right <00:15:56.837>now.

370
00:15:58.065 --> 00:15:59.965
<00:15:58.065>So <00:15:58.345>we <00:15:58.625>have <00:15:58.905>this <00:15:59.185>particular <00:15:59.465>example

371
00:15:59.965 --> 00:16:01.045
<00:15:59.965>that <00:16:00.127>I'm <00:16:00.289>gonna <00:16:00.451>show <00:16:00.613>you <00:16:00.775>right <00:16:00.937>now.

372
00:16:01.545 --> 00:16:03.805
<00:16:01.545>So <00:16:01.685>you <00:16:01.824>can <00:16:01.964>see <00:16:02.104>that <00:16:02.245>the <00:16:02.385>UI <00:16:02.525>is <00:16:02.665>blocked <00:16:02.805>right <00:16:02.944>now.

373
00:16:03.805 --> 00:16:06.565
<00:16:03.805>This <00:16:03.979>is <00:16:04.155>a <00:16:04.329>blank <00:16:04.505>state <00:16:04.680>initially <00:16:04.854>when <00:16:05.030>we <00:16:05.204>refresh,

374
00:16:06.825 --> 00:16:09.485
<00:16:06.825>and <00:16:06.965>then <00:16:07.105>it <00:16:07.245>takes <00:16:07.385>some <00:16:07.525>time <00:16:07.665>for <00:16:07.805>the <00:16:07.945>items <00:16:08.085>to <00:16:08.225>load.

375
00:16:09.535 --> 00:16:11.525
<00:16:09.535>Right <00:16:09.768>now, <00:16:10.001>I <00:16:10.235>believe <00:16:10.468>we <00:16:10.701>are, <00:16:10.935>uh,

376
00:16:11.905 --> 00:16:14.285
<00:16:11.905>we <00:16:12.105>are <00:16:12.305>having <00:16:12.505>thousand <00:16:12.704>items, <00:16:12.905>uh, <00:16:13.105>being <00:16:13.305>rendered.

377
00:16:14.425 --> 00:16:17.125
<00:16:14.425>And <00:16:14.541>if <00:16:14.658>I <00:16:14.775>try <00:16:14.891>to <00:16:15.008>just <00:16:15.125>zoom <00:16:15.241>in, <00:16:15.358>just <00:16:15.474>to <00:16:15.591>show <00:16:15.708>you <00:16:15.824>that

378
00:16:17.125 --> 00:16:19.845
<00:16:17.125>what <00:16:17.265>happens <00:16:17.405>if <00:16:17.545>I <00:16:17.685>try <00:16:17.825>to <00:16:17.965>interact <00:16:18.105>with <00:16:18.245>this <00:16:18.385>web <00:16:18.525>application,

379
00:16:19.945 --> 00:16:21.205
<00:16:19.945>having <00:16:20.323>these <00:16:20.701>thousand <00:16:21.079>items.

380
00:16:21.625 --> 00:16:25.005
<00:16:21.625>So <00:16:21.741>if <00:16:21.858>I <00:16:21.975>scroll <00:16:22.091>down <00:16:22.208>really <00:16:22.325>quick, <00:16:22.441>you <00:16:22.558>can <00:16:22.675>see <00:16:22.791>that, <00:16:22.908>uh, <00:16:23.025>some

381
00:16:25.005 --> 00:16:26.805
<00:16:25.005>of <00:16:25.205>the <00:16:25.405>images <00:16:25.605>load <00:16:25.805>later, <00:16:26.005>but <00:16:26.205>that's <00:16:26.405>fine.

382
00:16:27.225 --> 00:16:30.565
<00:16:27.225>But <00:16:27.325>if <00:16:27.425>I <00:16:27.525>try <00:16:27.625>to <00:16:27.725>zoom <00:16:27.825>in, <00:16:27.925>you <00:16:28.025>can <00:16:28.125>see <00:16:28.225>that <00:16:28.325>it, <00:16:28.425>it <00:16:28.525>is <00:16:28.625>blocked

383
00:16:31.065 --> 00:16:32.245
<00:16:31.065>and <00:16:31.330>now <00:16:31.596>it's <00:16:31.861>doing <00:16:32.127>something,

384
00:16:32.275 --> 00:16:33.445
<00:16:32.275>it's <00:16:32.485>trying <00:16:32.696>to <00:16:32.906>zoom <00:16:33.117>in <00:16:33.328>further.

385
00:16:33.645 --> 00:16:35.205
<00:16:33.645>I, <00:16:33.995>I <00:16:34.345>already <00:16:34.694>stopped <00:16:35.045>zooming,

386
00:16:35.465 --> 00:16:38.485
<00:16:35.465>but <00:16:35.620>if <00:16:35.776>I <00:16:35.931>kind <00:16:36.087>of <00:16:36.242>do <00:16:36.398>this <00:16:36.553>once <00:16:36.709>again <00:16:36.865>and,

387
00:16:38.545 --> 00:16:42.725
<00:16:38.545>and <00:16:38.645>stop, <00:16:38.745>you <00:16:38.844>will <00:16:38.944>see <00:16:39.045>that <00:16:39.145>it <00:16:39.245>is <00:16:39.344>sort <00:16:39.444>of <00:16:39.545>tries <00:16:39.645>to <00:16:39.745>go <00:16:39.844>in <00:16:39.944>bit

388
00:16:42.725 --> 00:16:44.365
<00:16:42.725>by <00:16:42.958>bit <00:16:43.191>because <00:16:43.425>it <00:16:43.658>is <00:16:43.891>super <00:16:44.125>heavy.

389
00:16:44.985 --> 00:16:46.805
<00:16:44.985>Um, <00:16:45.265>because <00:16:45.545>of <00:16:45.825>all <00:16:46.105>those <00:16:46.385>items.

390
00:16:47.345 --> 00:16:48.765
<00:16:47.345>If <00:16:47.600>I <00:16:47.856>try <00:16:48.111>to <00:16:48.367>go <00:16:48.623>ahead

391
00:16:48.825 --> 00:16:52.125
<00:16:48.825>and <00:16:48.965>sort <00:16:49.105>of <00:16:49.245>show <00:16:49.385>you, <00:16:49.525>uh, <00:16:49.665>in <00:16:49.805>by <00:16:49.945>inspecting <00:16:50.085>this, <00:16:50.225>uh,

392
00:16:52.235 --> 00:16:54.765
<00:16:52.235>this <00:16:52.390>list, <00:16:52.546>you <00:16:52.701>would <00:16:52.857>see <00:16:53.012>that <00:16:53.168>in <00:16:53.323>this <00:16:53.479>list <00:16:53.635>group,

393
00:16:55.055 --> 00:16:58.165
<00:16:55.055>which <00:16:55.229>means <00:16:55.405>this <00:16:55.579>entire <00:16:55.755>list, <00:16:55.930>we <00:16:56.104>have <00:16:56.280>thousand <00:16:56.454>items

394
00:16:58.635 --> 00:17:01.285
<00:16:58.635>that <00:16:58.775>are <00:16:58.915>right <00:16:59.055>now <00:16:59.194>in <00:16:59.335>the <00:16:59.475>dome <00:16:59.615>and <00:16:59.755>are <00:16:59.895>being <00:17:00.035>rendered.

395
00:17:01.545 --> 00:17:04.445
<00:17:01.545>And <00:17:01.685>this <00:17:01.824>is <00:17:01.964>gonna <00:17:02.104>be <00:17:02.245>really, <00:17:02.385>uh, <00:17:02.525>bad <00:17:02.665>for <00:17:02.805>the <00:17:02.944>performance

396
00:17:04.445 --> 00:17:06.725
<00:17:04.444>because <00:17:04.619>we <00:17:04.794>only <00:17:04.970>show, <00:17:05.145>uh, <00:17:05.319>a <00:17:05.494>bunch <00:17:05.669>of <00:17:05.845>items,

397
00:17:06.865 --> 00:17:09.325
<00:17:06.865>but <00:17:07.020>we <00:17:07.176>are <00:17:07.331>rendering <00:17:07.487>all <00:17:07.642>of <00:17:07.798>the <00:17:07.953>items <00:17:08.109>at <00:17:08.265>once.

398
00:17:10.025 --> 00:17:12.605
<00:17:10.025>So <00:17:10.180>how <00:17:10.336>can <00:17:10.491>we <00:17:10.647>solve <00:17:10.802>this <00:17:10.958>using <00:17:11.113>the <00:17:11.269>Angular <00:17:11.425>CDK?

399
00:17:13.305 --> 00:17:14.405
<00:17:13.305>So <00:17:13.470>if <00:17:13.635>I <00:17:13.800>go <00:17:13.964>to <00:17:14.130>my <00:17:14.295>code,

400
00:17:14.435 --> 00:17:17.045
<00:17:14.435>I've <00:17:14.635>already <00:17:14.835>installed <00:17:15.034>the <00:17:15.234>Angular <00:17:15.435>CDK <00:17:15.635>within <00:17:15.835>the

401
00:17:17.045 --> 00:17:18.165
<00:17:17.045>project <00:17:17.246>that <00:17:17.448>we <00:17:17.649>are <00:17:17.851>talking <00:17:18.052>about.

402
00:17:18.275 --> 00:17:20.365
<00:17:18.275>It's <00:17:18.508>called <00:17:18.741>using <00:17:18.975>C <00:17:19.208>DK <00:17:19.441>virtual <00:17:19.675>scroll.

403
00:17:20.905 --> 00:17:22.045
<00:17:20.905>The <00:17:21.051>first <00:17:21.198>thing <00:17:21.344>that <00:17:21.491>we <00:17:21.637>need <00:17:21.784>to <00:17:21.931>do

404
00:17:22.045 --> 00:17:25.325
<00:17:22.045>after <00:17:22.200>we <00:17:22.356>have <00:17:22.511>installed <00:17:22.667>the <00:17:22.822>Angular <00:17:22.978>CDK <00:17:23.133>into <00:17:23.289>the <00:17:23.445>project,

405
00:17:25.465 --> 00:17:29.945
<00:17:25.464>by <00:17:25.572>using <00:17:25.680>the <00:17:25.788>NG <00:17:25.895>ad <00:17:26.003>command, <00:17:26.111>we <00:17:26.218>need <00:17:26.326>to <00:17:26.434>go <00:17:26.541>to <00:17:26.649>the <00:17:26.757>app <00:17:26.865>module

406
00:17:30.045 --> 00:17:32.825
<00:17:30.045>and <00:17:30.200>then <00:17:30.356>import <00:17:30.511>the <00:17:30.667>scrolling <00:17:30.822>module <00:17:30.978>from <00:17:31.133>the <00:17:31.289>Angular <00:17:31.445>CDK.

407
00:17:32.965 --> 00:17:34.905
<00:17:32.965>So <00:17:33.120>I'm <00:17:33.276>going <00:17:33.431>to <00:17:33.587>just <00:17:33.742>do <00:17:33.898>a <00:17:34.053>quick <00:17:34.209>import <00:17:34.365>here.

408
00:17:35.455 --> 00:17:37.065
<00:17:35.455>Nope, <00:17:35.735>this <00:17:36.014>is <00:17:36.294>not <00:17:36.574>gonna <00:17:36.855>work.

409
00:17:37.085 --> 00:17:40.265
<00:17:37.085>So <00:17:37.285>it <00:17:37.485>is <00:17:37.685>gonna <00:17:37.885>be <00:17:38.085>Angular <00:17:38.285>CDK <00:17:38.485>scrolling,

410
00:17:40.645 --> 00:17:43.025
<00:17:40.645>and <00:17:40.820>from <00:17:40.995>here <00:17:41.170>we <00:17:41.345>can <00:17:41.520>import <00:17:41.695>the <00:17:41.870>scrolling <00:17:42.045>module

411
00:17:44.765 --> 00:17:48.025
<00:17:44.765>and <00:17:44.905>we <00:17:45.045>need <00:17:45.185>to <00:17:45.325>provide <00:17:45.465>this <00:17:45.605>scoring <00:17:45.745>module <00:17:45.885>into <00:17:46.025>the <00:17:46.165>imports.

412
00:17:48.365 --> 00:17:51.725
<00:17:48.365>And <00:17:48.481>once <00:17:48.598>we <00:17:48.715>are <00:17:48.831>done <00:17:48.948>with <00:17:49.065>that, <00:17:49.181>we <00:17:49.298>need <00:17:49.415>to <00:17:49.531>update <00:17:49.648>our, <00:17:49.765>uh,

413
00:17:51.785 --> 00:17:53.685
<00:17:51.785>our <00:17:52.018>component, <00:17:52.251>which <00:17:52.485>is <00:17:52.718>the <00:17:52.951>list <00:17:53.185>component

414
00:17:53.945 --> 00:17:55.245
<00:17:53.945>and <00:17:54.237>do <00:17:54.530>some <00:17:54.822>changes <00:17:55.114>there.

415
00:17:55.585 --> 00:17:57.125
<00:17:55.585>So <00:17:55.783>right <00:17:55.981>now, <00:17:56.179>this <00:17:56.377>is <00:17:56.575>the <00:17:56.773>list <00:17:56.971>component

416
00:17:57.125 --> 00:17:59.565
<00:17:57.125>that <00:17:57.265>we <00:17:57.405>are <00:17:57.545>talking <00:17:57.685>about, <00:17:57.825>and <00:17:57.965>it <00:17:58.105>uses <00:17:58.245>an <00:17:58.385>NG <00:17:58.525>four

417
00:17:59.875 --> 00:18:01.045
<00:17:59.875>with <00:18:00.226>the <00:18:00.577>list <00:18:00.928>items.

418
00:18:01.425 --> 00:18:03.565
<00:18:01.425>And <00:18:01.580>these <00:18:01.736>list <00:18:01.891>items, <00:18:02.047>as <00:18:02.202>I <00:18:02.358>said, <00:18:02.513>are <00:18:02.669>a <00:18:02.825>thousand

419
00:18:03.625 --> 00:18:05.285
<00:18:03.625>or <00:18:03.825>even <00:18:04.025>more, <00:18:04.225>I, <00:18:04.425>I <00:18:04.625>don't <00:18:04.825>actually <00:18:05.025>remember,

420
00:18:05.285 --> 00:18:06.525
<00:18:05.285>but <00:18:05.444>it's <00:18:05.603>more <00:18:05.763>than <00:18:05.922>a <00:18:06.082>thousand <00:18:06.241>for <00:18:06.401>sure.

421
00:18:07.065 --> 00:18:09.085
<00:18:07.065>So <00:18:07.220>it's <00:18:07.376>a <00:18:07.531>simple <00:18:07.687>list <00:18:07.842>that <00:18:07.998>we <00:18:08.153>are <00:18:08.309>talking <00:18:08.465>about.

422
00:18:09.425 --> 00:18:12.045
<00:18:09.425>In <00:18:09.580>order <00:18:09.736>to <00:18:09.891>convert <00:18:10.047>this <00:18:10.202>into <00:18:10.358>a <00:18:10.513>virtual <00:18:10.669>scrolling <00:18:10.825>list,

423
00:18:12.185 --> 00:18:15.325
<00:18:12.185>we <00:18:12.360>need <00:18:12.534>to <00:18:12.710>use <00:18:12.885>the <00:18:13.060>CDK <00:18:13.235>virtual <00:18:13.409>viewport <00:18:13.585>wrapper.

424
00:18:15.545 --> 00:18:17.165
<00:18:15.545>So <00:18:15.778>I'm <00:18:16.011>going <00:18:16.245>to <00:18:16.478>change <00:18:16.711>this <00:18:16.945>diviv

425
00:18:17.545 --> 00:18:19.925
<00:18:17.545>to <00:18:17.745>be <00:18:17.945>the <00:18:18.145>CDK <00:18:18.345>virtual <00:18:18.545>called <00:18:18.745>viewport <00:18:18.945>element.

426
00:18:20.665 --> 00:18:21.845
<00:18:20.665>And <00:18:21.019>then <00:18:21.373>I <00:18:21.727>need

427
00:18:21.845 --> 00:18:24.805
<00:18:21.845>to <00:18:22.078>provide <00:18:22.311>this <00:18:22.545>virtual <00:18:22.778>scroll <00:18:23.011>viewport <00:18:23.245>element

428
00:18:25.225 --> 00:18:28.125
<00:18:25.225>and <00:18:25.425>attribute <00:18:25.625>that <00:18:25.824>identifies <00:18:26.024>what <00:18:26.225>is <00:18:26.425>the <00:18:26.625>height

429
00:18:28.145 --> 00:18:30.325
<00:18:28.145>of <00:18:28.425>one <00:18:28.705>item <00:18:28.985>in <00:18:29.264>this <00:18:29.545>list.

430
00:18:30.665 --> 00:18:32.485
<00:18:30.665>And <00:18:30.865>I <00:18:31.065>already <00:18:31.264>know <00:18:31.465>that <00:18:31.665>the <00:18:31.865>item <00:18:32.065>size

431
00:18:32.585 --> 00:18:35.165
<00:18:32.585>or <00:18:32.725>the <00:18:32.865>height <00:18:33.005>of <00:18:33.145>one <00:18:33.285>item <00:18:33.425>here <00:18:33.565>is <00:18:33.705>one <00:18:33.845>10 <00:18:33.985>pixel.

432
00:18:35.665 --> 00:18:40.605
<00:18:35.665>Uh, <00:18:35.781>and <00:18:35.898>I <00:18:36.014>know <00:18:36.131>that <00:18:36.248>by, <00:18:36.365>by <00:18:36.481>just <00:18:36.598>going <00:18:36.715>to <00:18:36.831>hover <00:18:36.948>over <00:18:37.065>it,

433
00:18:40.705 --> 00:18:45.085
<00:18:40.705>and <00:18:40.821>we <00:18:40.938>can <00:18:41.054>see <00:18:41.171>that <00:18:41.288>the <00:18:41.405>height <00:18:41.521>of <00:18:41.638>this <00:18:41.754>is <00:18:41.871>about <00:18:41.988>one <00:18:42.105>10.66,

434
00:18:45.345 --> 00:18:46.845
<00:18:45.345>but <00:18:45.513>I <00:18:45.682>can <00:18:45.851>just <00:18:46.020>use <00:18:46.188>one <00:18:46.357>10 <00:18:46.526>for <00:18:46.695>now.

435
00:18:47.185 --> 00:18:49.965
<00:18:47.185>And <00:18:47.325>then <00:18:47.465>we <00:18:47.605>need <00:18:47.745>to <00:18:47.885>change <00:18:48.024>this <00:18:48.165>NG <00:18:48.304>four <00:18:48.445>into <00:18:48.585>a

436
00:18:50.065 --> 00:18:51.445
<00:18:50.065>CD <00:18:50.479>CDK <00:18:50.893>virtual <00:18:51.307>four.

437
00:18:51.825 --> 00:18:53.045
<00:18:51.825>And <00:18:52.044>now <00:18:52.264>once <00:18:52.483>we <00:18:52.703>save <00:18:52.923>this,

438
00:18:53.865 --> 00:18:57.165
<00:18:53.865>and <00:18:54.005>if <00:18:54.145>we <00:18:54.285>go <00:18:54.425>here <00:18:54.565>again, <00:18:54.705>you <00:18:54.845>will <00:18:54.985>see <00:18:55.125>that <00:18:55.265>the,

439
00:18:57.415 --> 00:18:59.485
<00:18:57.415>there <00:18:57.648>was <00:18:57.881>no <00:18:58.115>white <00:18:58.348>screen <00:18:58.581>at <00:18:58.815>all.

440
00:18:59.745 --> 00:19:03.445
<00:18:59.745>We <00:18:59.885>see <00:19:00.024>the <00:19:00.165>loader <00:19:00.304>and <00:19:00.445>then <00:19:00.584>instantly <00:19:00.725>we <00:19:00.864>see <00:19:01.004>the <00:19:01.145>data.

441
00:19:03.865 --> 00:19:05.245
<00:19:03.865>If <00:19:04.072>I <00:19:04.279>scroll <00:19:04.485>down, <00:19:04.693>you <00:19:04.899>can <00:19:05.107>see

442
00:19:05.245 --> 00:19:08.685
<00:19:05.245>that <00:19:05.419>the <00:19:05.594>images <00:19:05.770>are <00:19:05.945>loading <00:19:06.120>perfectly <00:19:06.294>fine <00:19:06.469>while <00:19:06.645>scrolling

443
00:19:08.685 --> 00:19:10.725
<00:19:08.685>like <00:19:08.918>this, <00:19:09.151>you <00:19:09.385>see <00:19:09.618>some <00:19:09.851>white <00:19:10.085>screen.

444
00:19:10.985 --> 00:19:14.205
<00:19:10.985>But <00:19:11.092>if <00:19:11.200>a <00:19:11.308>user <00:19:11.415>is <00:19:11.523>crawling <00:19:11.631>in <00:19:11.738>a, <00:19:11.846>in <00:19:11.954>a <00:19:12.061>usual <00:19:12.169>manner, <00:19:12.277>we <00:19:12.385>don't,

445
00:19:14.225 --> 00:19:16.485
<00:19:14.225>uh, <00:19:14.504>we <00:19:14.784>don't <00:19:15.064>actually <00:19:15.344>see <00:19:15.625>that.

446
00:19:17.145 --> 00:19:18.365
<00:19:17.145>But <00:19:17.328>if <00:19:17.511>I <00:19:17.694>try <00:19:17.877>to <00:19:18.060>zoom <00:19:18.243>in

447
00:19:18.365 --> 00:19:20.485
<00:19:18.365>and <00:19:18.520>zoom <00:19:18.676>out, <00:19:18.831>you <00:19:18.987>can <00:19:19.142>see <00:19:19.298>that <00:19:19.453>it's <00:19:19.609>battery <00:19:19.765>smooth.

448
00:19:20.485 --> 00:19:25.165
<00:19:20.485>There <00:19:20.640>are <00:19:20.796>no <00:19:20.951>delays <00:19:21.107>or <00:19:21.262>no <00:19:21.418>hanging <00:19:21.573>problems, <00:19:21.729>um, <00:19:21.885>whatsoever.

449
00:19:25.825 --> 00:19:28.085
<00:19:25.825>And <00:19:25.980>if <00:19:26.136>I <00:19:26.291>try <00:19:26.447>to <00:19:26.602>inspect <00:19:26.758>now, <00:19:26.913>you <00:19:27.069>would <00:19:27.225>see

450
00:19:28.085 --> 00:19:30.085
<00:19:28.085>that <00:19:28.435>in <00:19:28.785>this <00:19:29.135>list <00:19:29.485>item

451
00:19:30.345 --> 00:19:33.245
<00:19:30.345>or <00:19:30.500>in <00:19:30.656>this <00:19:30.811>list <00:19:30.967>group, <00:19:31.122>we <00:19:31.278>only <00:19:31.433>have <00:19:31.589>these <00:19:31.745>items

452
00:19:33.355 --> 00:19:34.605
<00:19:33.355>that <00:19:33.636>are <00:19:33.917>shown <00:19:34.198>right <00:19:34.480>now.

453
00:19:34.705 --> 00:19:36.485
<00:19:34.705>We <00:19:34.938>don't <00:19:35.171>have <00:19:35.405>a <00:19:35.638>thousand <00:19:35.871>items <00:19:36.105>rendering.

454
00:19:36.595 --> 00:19:37.605
<00:19:36.595>What <00:19:36.822>happens <00:19:37.049>if <00:19:37.276>I <00:19:37.504>scroll?

455
00:19:37.605 --> 00:19:40.525
<00:19:37.605>You <00:19:37.732>can <00:19:37.859>see <00:19:37.986>that <00:19:38.114>all <00:19:38.241>of <00:19:38.368>the <00:19:38.495>items <00:19:38.623>that <00:19:38.750>you <00:19:38.877>see, <00:19:39.005>uh,

456
00:19:40.665 --> 00:19:42.725
<00:19:40.665>in <00:19:40.865>the <00:19:41.065>dome, <00:19:41.264>they <00:19:41.465>are <00:19:41.665>being <00:19:41.865>re <00:19:42.065>rendered.

457
00:19:43.145 --> 00:19:47.365
<00:19:43.145>And <00:19:43.272>so <00:19:43.399>we <00:19:43.526>don't <00:19:43.654>have <00:19:43.781>a <00:19:43.908>thousand <00:19:44.035>items <00:19:44.163>being <00:19:44.290>rendered <00:19:44.417>on <00:19:44.545>the

458
00:19:47.365 --> 00:19:49.885
<00:19:47.365>dome, <00:19:47.520>only <00:19:47.676>the <00:19:47.831>ones <00:19:47.987>that <00:19:48.142>we <00:19:48.298>see <00:19:48.453>on <00:19:48.609>the <00:19:48.765>viewport.

459
00:19:49.885 --> 00:19:51.845
<00:19:49.885>And <00:19:50.085>this <00:19:50.285>is <00:19:50.485>new <00:19:50.685>data <00:19:50.885>as <00:19:51.085>we <00:19:51.285>scroll.

460
00:19:52.025 --> 00:19:54.805
<00:19:52.025>So <00:19:52.165>this <00:19:52.305>is <00:19:52.445>a <00:19:52.585>super <00:19:52.725>interesting <00:19:52.865>thing <00:19:53.005>from <00:19:53.145>the <00:19:53.285>Angular <00:19:53.425>CDG

461
00:19:54.805 --> 00:19:57.765
<00:19:54.805>team <00:19:54.921>that <00:19:55.038>we <00:19:55.155>are <00:19:55.271>able <00:19:55.388>to <00:19:55.505>now <00:19:55.621>render <00:19:55.738>only <00:19:55.855>a <00:19:55.971>couple <00:19:56.088>of <00:19:56.205>items.

462
00:19:57.905 --> 00:19:59.965
<00:19:57.905>And <00:19:58.060>now <00:19:58.216>it <00:19:58.371>doesn't <00:19:58.527>matter <00:19:58.682>if <00:19:58.838>you <00:19:58.993>have <00:19:59.149>thousand <00:19:59.305>items

463
00:20:00.065 --> 00:20:02.725
<00:20:00.065>or <00:20:00.220>a <00:20:00.376>million <00:20:00.531>items <00:20:00.687>that <00:20:00.842>you <00:20:00.998>are <00:20:01.153>getting <00:20:01.309>from, <00:20:01.465>from,

464
00:20:02.995 --> 00:20:04.965
<00:20:02.995>from <00:20:03.228>your <00:20:03.461>backend, <00:20:03.695>although <00:20:03.928>I <00:20:04.161>would, <00:20:04.395>uh,

465
00:20:05.245 --> 00:20:06.925
<00:20:05.245>I <00:20:05.419>would <00:20:05.594>question <00:20:05.770>why <00:20:05.945>would <00:20:06.120>you <00:20:06.294>do <00:20:06.469>that, <00:20:06.645>uh,

466
00:20:06.925 --> 00:20:08.045
<00:20:06.925>because <00:20:07.261>of <00:20:07.597>memory <00:20:07.933>constraints.

467
00:20:08.465 --> 00:20:10.405
<00:20:08.465>But <00:20:08.665>essentially, <00:20:08.865>even <00:20:09.064>if <00:20:09.264>you <00:20:09.465>are <00:20:09.665>doing <00:20:09.865>that,

468
00:20:10.665 --> 00:20:13.045
<00:20:10.665>we <00:20:10.820>are <00:20:10.976>only <00:20:11.131>rendering <00:20:11.287>a <00:20:11.442>couple <00:20:11.598>of <00:20:11.753>items, <00:20:11.909>which <00:20:12.065>means

469
00:20:13.045 --> 00:20:15.405
<00:20:13.045>that <00:20:13.220>there <00:20:13.395>shouldn't <00:20:13.570>be <00:20:13.745>a <00:20:13.920>problem <00:20:14.095>with <00:20:14.270>this <00:20:14.445>one.

470
00:20:16.835 --> 00:20:20.735
<00:20:16.835>So <00:20:17.010>that's <00:20:17.185>a <00:20:17.360>virtual <00:20:17.535>scroll <00:20:17.710>for <00:20:17.885>you <00:20:18.060>moving <00:20:18.235>forward.

471
00:20:21.675 --> 00:20:24.215
<00:20:21.675>The <00:20:21.815>next <00:20:21.955>thing <00:20:22.095>that <00:20:22.235>we <00:20:22.375>are <00:20:22.514>gonna <00:20:22.655>look <00:20:22.794>at <00:20:22.935>is <00:20:23.075>something

472
00:20:24.275 --> 00:20:25.335
<00:20:24.275>called <00:20:24.593>drag <00:20:24.911>and <00:20:25.229>drop.

473
00:20:25.635 --> 00:20:27.575
<00:20:25.635>And <00:20:25.868>this <00:20:26.101>is <00:20:26.335>again, <00:20:26.568>for <00:20:26.801>something, <00:20:27.035>uh,

474
00:20:27.575 --> 00:20:29.335
<00:20:27.575>like <00:20:27.855>if <00:20:28.135>you're <00:20:28.415>building <00:20:28.695>for <00:20:28.975>Trello

475
00:20:29.355 --> 00:20:31.855
<00:20:29.355>or <00:20:29.588>if <00:20:29.821>you <00:20:30.055>have <00:20:30.288>different <00:20:30.521>lists, <00:20:30.755>um,

476
00:20:31.875 --> 00:20:34.975
<00:20:31.875>and <00:20:31.991>you <00:20:32.108>need <00:20:32.225>to <00:20:32.341>move <00:20:32.458>one <00:20:32.575>item <00:20:32.691>from <00:20:32.808>one <00:20:32.925>place <00:20:33.041>to <00:20:33.158>another, <00:20:33.275>um,

477
00:20:35.155 --> 00:20:38.095
<00:20:35.155>we <00:20:35.295>can <00:20:35.435>actually <00:20:35.575>use <00:20:35.715>something <00:20:35.855>from <00:20:35.995>the <00:20:36.135>CDK <00:20:36.274>to <00:20:36.415>do <00:20:36.555>this.

478
00:20:38.475 --> 00:20:42.455
<00:20:38.475>So <00:20:38.602>we <00:20:38.729>are <00:20:38.856>gonna <00:20:38.984>look <00:20:39.111>at, <00:20:39.238>uh, <00:20:39.365>an <00:20:39.493>example, <00:20:39.620>um, <00:20:39.747>from <00:20:39.875>here.

479
00:20:42.915 --> 00:20:45.455
<00:20:42.915>So <00:20:43.042>in <00:20:43.169>this <00:20:43.296>application, <00:20:43.424>what <00:20:43.551>we <00:20:43.678>have <00:20:43.805>is <00:20:43.933>a <00:20:44.060>bunch <00:20:44.187>of <00:20:44.315>folders.

480
00:20:45.635 --> 00:20:48.565
<00:20:45.635>The <00:20:45.810>numbers <00:20:45.985>here <00:20:46.160>show <00:20:46.335>the <00:20:46.510>items <00:20:46.685>in <00:20:46.860>the <00:20:47.035>folders,

481
00:20:48.785 --> 00:20:50.885
<00:20:48.785>and <00:20:48.912>if <00:20:49.039>I <00:20:49.166>click <00:20:49.294>a <00:20:49.421>folder, <00:20:49.548>I <00:20:49.675>can <00:20:49.803>see <00:20:49.930>all <00:20:50.057>the <00:20:50.185>files.

482
00:20:51.145 --> 00:20:53.205
<00:20:51.145>So <00:20:51.272>you <00:20:51.399>can <00:20:51.526>see <00:20:51.654>that <00:20:51.781>we <00:20:51.908>have <00:20:52.035>three <00:20:52.163>files <00:20:52.290>here, <00:20:52.417>three <00:20:52.545>here,

483
00:20:53.205 --> 00:20:54.365
<00:20:53.205>three <00:20:53.413>here, <00:20:53.622>and <00:20:53.831>two <00:20:54.040>files <00:20:54.249>here.

484
00:20:54.755 --> 00:20:56.725
<00:20:54.755>What <00:20:54.955>if <00:20:55.155>I <00:20:55.355>wanted <00:20:55.555>to <00:20:55.755>implement <00:20:55.955>a <00:20:56.155>drag

485
00:20:56.725 --> 00:20:59.365
<00:20:56.725>and <00:20:56.865>drop <00:20:57.004>for <00:20:57.145>these <00:20:57.284>files <00:20:57.425>so <00:20:57.564>I <00:20:57.705>can <00:20:57.844>move <00:20:57.985>them <00:20:58.125>into,

486
00:21:00.155 --> 00:21:02.765
<00:21:00.155>into <00:21:00.388>other <00:21:00.621>folders <00:21:00.855>or <00:21:01.088>even <00:21:01.321>reorder <00:21:01.555>these

487
00:21:02.895 --> 00:21:04.405
<00:21:02.895>files <00:21:03.234>in <00:21:03.574>within <00:21:03.914>the <00:21:04.254>folder?

488
00:21:06.595 --> 00:21:09.135
<00:21:06.595>So <00:21:06.702>in <00:21:06.810>order <00:21:06.918>to <00:21:07.025>do <00:21:07.133>so, <00:21:07.241>we <00:21:07.348>are <00:21:07.456>going <00:21:07.564>to <00:21:07.671>use <00:21:07.779>the <00:21:07.887>Angular <00:21:07.995>cdk.

489
00:21:09.235 --> 00:21:11.695
<00:21:09.235>And <00:21:09.390>if <00:21:09.546>I <00:21:09.701>just <00:21:09.857>show <00:21:10.012>you <00:21:10.168>what <00:21:10.323>it <00:21:10.479>looks <00:21:10.635>like

490
00:21:11.695 --> 00:21:12.695
<00:21:11.695>after <00:21:12.145>the <00:21:12.595>implementation,

491
00:21:12.695 --> 00:21:15.575
<00:21:12.695>because, <00:21:12.895>uh, <00:21:13.095>developing <00:21:13.294>it <00:21:13.495>right <00:21:13.695>now <00:21:13.895>would <00:21:14.095>be,

492
00:21:15.705 --> 00:21:18.215
<00:21:15.705>would <00:21:15.879>be <00:21:16.054>a <00:21:16.230>problem, <00:21:16.405>actually, <00:21:16.580>I'm <00:21:16.754>gonna <00:21:16.929>go <00:21:17.105>here

493
00:21:19.195 --> 00:21:20.615
<00:21:19.195>and <00:21:19.514>use <00:21:19.834>the <00:21:20.153>correct <00:21:20.473>link.

494
00:21:21.275 --> 00:21:25.735
<00:21:21.275>So <00:21:21.415>if <00:21:21.555>I <00:21:21.695>show <00:21:21.835>you <00:21:21.975>the <00:21:22.115>final <00:21:22.255>version <00:21:22.395>of <00:21:22.535>it, <00:21:22.675>see

495
00:21:25.735 --> 00:21:27.455
<00:21:25.735>what <00:21:25.968>happens <00:21:26.201>if <00:21:26.435>I <00:21:26.668>try <00:21:26.901>dragging <00:21:27.135>this.

496
00:21:27.475 --> 00:21:31.295
<00:21:27.475>So <00:21:27.602>if <00:21:27.729>I <00:21:27.856>start <00:21:27.984>dragging <00:21:28.111>this, <00:21:28.238>you <00:21:28.365>can <00:21:28.493>see <00:21:28.620>this <00:21:28.747>word <00:21:28.875>icon

497
00:21:31.965 --> 00:21:35.015
<00:21:31.965>alongside <00:21:32.120>my <00:21:32.276>cursor, <00:21:32.431>which <00:21:32.587>actually <00:21:32.742>shows <00:21:32.898>what <00:21:33.053>file <00:21:33.209>I <00:21:33.365>am,

498
00:21:35.195 --> 00:21:36.495
<00:21:35.195>uh, <00:21:35.487>I'm <00:21:35.780>dragging <00:21:36.072>right <00:21:36.364>now.

499
00:21:37.235 --> 00:21:40.055
<00:21:37.235>If <00:21:37.390>I <00:21:37.546>kind <00:21:37.701>of <00:21:37.857>stop <00:21:38.012>dragging <00:21:38.168>it, <00:21:38.323>it <00:21:38.479>goes <00:21:38.635>back

500
00:21:40.055 --> 00:21:41.135
<00:21:40.055>to <00:21:40.379>its <00:21:40.703>original <00:21:41.027>position.

501
00:21:41.715 --> 00:21:44.615
<00:21:41.715>If <00:21:41.842>I <00:21:41.969>move <00:21:42.096>this <00:21:42.224>DF <00:21:42.351>file, <00:21:42.478>you <00:21:42.605>can <00:21:42.733>see <00:21:42.860>the <00:21:42.987>PDFI <00:21:43.115>icon,

502
00:21:44.615 --> 00:21:46.895
<00:21:44.615>so <00:21:44.770>I <00:21:44.926>exactly <00:21:45.081>know <00:21:45.237>which <00:21:45.392>kind <00:21:45.548>of <00:21:45.703>file <00:21:45.859>I <00:21:46.015>am.

503
00:21:47.335 --> 00:21:48.575
<00:21:47.335>I <00:21:47.614>am <00:21:47.893>kind <00:21:48.172>of <00:21:48.451>dragging.

504
00:21:49.035 --> 00:21:53.255
<00:21:49.035>If <00:21:49.151>I <00:21:49.268>wanted, <00:21:49.385>I <00:21:49.501>could <00:21:49.618>also <00:21:49.735>add <00:21:49.851>the, <00:21:49.968>this <00:21:50.085>title <00:21:50.201>of <00:21:50.318>the <00:21:50.435>file

505
00:21:53.645 --> 00:21:54.815
<00:21:53.645>with <00:21:53.996>this <00:21:54.347>direct <00:21:54.698>preview.

506
00:21:54.835 --> 00:21:56.455
<00:21:54.835>So <00:21:55.010>this <00:21:55.185>is <00:21:55.360>something <00:21:55.535>that <00:21:55.710>we <00:21:55.885>call <00:21:56.060>direct <00:21:56.235>review.

507
00:21:57.085 --> 00:21:58.975
<00:21:57.085>Here <00:21:57.260>you <00:21:57.435>can <00:21:57.610>see <00:21:57.785>that <00:21:57.960>we <00:21:58.135>have <00:21:58.310>an <00:21:58.485>arrow,

508
00:21:58.975 --> 00:22:01.615
<00:21:58.975>which <00:21:59.175>is <00:21:59.375>the <00:21:59.574>drop <00:21:59.774>preview, <00:21:59.975>which <00:22:00.175>actually <00:22:00.375>shows

509
00:22:01.785 --> 00:22:04.135
<00:22:01.785>where <00:22:01.925>this <00:22:02.065>file <00:22:02.205>is <00:22:02.345>going <00:22:02.485>to <00:22:02.625>drop, <00:22:02.765>which <00:22:02.905>is <00:22:03.045>super <00:22:03.185>handy.

510
00:22:04.515 --> 00:22:05.855
<00:22:04.515>And <00:22:04.716>if <00:22:04.917>I <00:22:05.118>try <00:22:05.319>to <00:22:05.520>move <00:22:05.721>up

511
00:22:05.855 --> 00:22:08.695
<00:22:05.855>and <00:22:06.010>down, <00:22:06.166>you <00:22:06.321>can <00:22:06.477>see <00:22:06.632>exactly <00:22:06.788>which <00:22:06.943>position <00:22:07.099>I'm <00:22:07.255>gonna

512
00:22:08.695 --> 00:22:10.295
<00:22:08.695>be <00:22:09.044>dropping <00:22:09.395>this <00:22:09.745>file <00:22:10.095>to.

513
00:22:10.555 --> 00:22:12.135
<00:22:10.555>And <00:22:10.755>you <00:22:10.955>can <00:22:11.155>also <00:22:11.355>see <00:22:11.555>that <00:22:11.755>there's <00:22:11.955>some,

514
00:22:12.365 --> 00:22:16.495
<00:22:12.365>some <00:22:12.505>animation <00:22:12.645>going <00:22:12.785>on <00:22:12.925>when <00:22:13.065>I <00:22:13.205>sort <00:22:13.345>of <00:22:13.485>drag <00:22:13.625>this, <00:22:13.765>uh,

515
00:22:16.495 --> 00:22:18.255
<00:22:16.495>within <00:22:16.844>this, <00:22:17.195>this <00:22:17.544>particular <00:22:17.895>list.

516
00:22:18.515 --> 00:22:20.815
<00:22:18.515>So <00:22:18.690>I <00:22:18.865>can <00:22:19.040>drop <00:22:19.215>it <00:22:19.390>like <00:22:19.565>all <00:22:19.740>the <00:22:19.915>bottom,

517
00:22:21.235 --> 00:22:23.415
<00:22:21.235>and <00:22:21.435>then <00:22:21.635>I <00:22:21.834>can <00:22:22.034>move <00:22:22.235>this <00:22:22.435>file <00:22:22.635>above,

518
00:22:23.555 --> 00:22:24.855
<00:22:23.555>and <00:22:23.847>this <00:22:24.140>works <00:22:24.432>perfectly <00:22:24.725>fine.

519
00:22:25.415 --> 00:22:27.895
<00:22:25.415>I <00:22:25.615>can <00:22:25.815>also <00:22:26.014>move <00:22:26.215>this <00:22:26.415>file <00:22:26.615>into <00:22:26.815>another

520
00:22:27.895 --> 00:22:29.415
<00:22:27.895>folder <00:22:28.168>so <00:22:28.442>I <00:22:28.715>can <00:22:28.989>move <00:22:29.263>here.

521
00:22:29.515 --> 00:22:32.255
<00:22:29.515>And <00:22:29.670>you <00:22:29.826>can <00:22:29.981>see <00:22:30.137>that <00:22:30.292>the <00:22:30.448>drop <00:22:30.603>preview <00:22:30.759>now <00:22:30.915>is

522
00:22:32.255 --> 00:22:33.735
<00:22:32.255>highlighting <00:22:32.588>it <00:22:32.921>into <00:22:33.254>the <00:22:33.587>folder.

523
00:22:34.675 --> 00:22:36.775
<00:22:34.675>Now <00:22:34.875>this <00:22:35.075>is <00:22:35.274>a <00:22:35.475>really <00:22:35.675>good <00:22:35.875>user <00:22:36.075>experience.

524
00:22:37.195 --> 00:22:38.615
<00:22:37.195>You <00:22:37.377>can <00:22:37.560>see <00:22:37.742>the <00:22:37.925>file <00:22:38.107>is <00:22:38.290>here <00:22:38.473>now,

525
00:22:38.875 --> 00:22:41.255
<00:22:38.875>but <00:22:39.050>this <00:22:39.225>is <00:22:39.400>a <00:22:39.575>really <00:22:39.750>good <00:22:39.925>UI <00:22:40.100>and <00:22:40.275>ux

526
00:22:41.675 --> 00:22:45.015
<00:22:41.675>and <00:22:41.791>the <00:22:41.908>reason <00:22:42.024>that <00:22:42.141>it <00:22:42.258>is <00:22:42.375>a <00:22:42.491>really <00:22:42.608>good <00:22:42.725>UI <00:22:42.841>and <00:22:42.958>UX <00:22:43.075>is

527
00:22:45.015 --> 00:22:47.575
<00:22:45.015>because <00:22:45.248>I <00:22:45.481>didn't <00:22:45.715>have <00:22:45.948>to <00:22:46.181>think <00:22:46.415>about

528
00:22:47.635 --> 00:22:49.175
<00:22:47.635>or <00:22:47.981>worry <00:22:48.328>about <00:22:48.674>the <00:22:49.021>functionality.

529
00:22:49.555 --> 00:22:52.615
<00:22:49.555>The <00:22:49.730>functionality <00:22:49.905>was <00:22:50.080>provided <00:22:50.255>to <00:22:50.430>me <00:22:50.605>by <00:22:50.780>Angular <00:22:50.955>cdk,

530
00:22:52.635 --> 00:22:54.935
<00:22:52.635>and <00:22:52.775>then <00:22:52.915>I <00:22:53.055>could <00:22:53.195>completely <00:22:53.335>focus <00:22:53.475>on <00:22:53.615>how <00:22:53.754>this <00:22:53.895>would <00:22:54.035>look,

531
00:22:55.235 --> 00:22:57.055
<00:22:55.235>how <00:22:55.409>this <00:22:55.584>would <00:22:55.760>be <00:22:55.935>used <00:22:56.110>by <00:22:56.284>an <00:22:56.459>end <00:22:56.635>user,

532
00:22:57.235 --> 00:22:59.455
<00:22:57.235>and <00:22:57.375>what <00:22:57.514>is <00:22:57.655>the <00:22:57.794>best <00:22:57.935>user <00:22:58.074>experience <00:22:58.215>that <00:22:58.354>I <00:22:58.495>can <00:22:58.635>provide

533
00:22:59.555 --> 00:23:01.775
<00:22:59.555>to <00:22:59.730>the <00:22:59.905>end <00:23:00.080>user <00:23:00.255>without <00:23:00.430>having <00:23:00.605>to <00:23:00.780>worry <00:23:00.955>about

534
00:23:01.955 --> 00:23:03.295
<00:23:01.955>how <00:23:02.156>the <00:23:02.357>drag <00:23:02.558>and <00:23:02.759>drop <00:23:02.960>would <00:23:03.161>work.

535
00:23:03.555 --> 00:23:07.965
<00:23:03.555>And <00:23:03.695>that <00:23:03.835>is <00:23:03.975>what <00:23:04.115>is <00:23:04.255>amazing <00:23:04.395>about <00:23:04.535>Angular <00:23:04.675>CDK <00:23:04.815>moving <00:23:04.955>forward

536
00:23:08.025 --> 00:23:09.685
<00:23:08.025>to <00:23:08.225>another <00:23:08.425>example <00:23:08.625>that <00:23:08.825>I <00:23:09.025>can <00:23:09.225>show <00:23:09.425>you.

537
00:23:10.145 --> 00:23:12.125
<00:23:10.145>So <00:23:10.300>this <00:23:10.456>time <00:23:10.611>we <00:23:10.767>are <00:23:10.922>gonna <00:23:11.078>talk <00:23:11.233>about <00:23:11.389>list <00:23:11.545>items

538
00:23:12.225 --> 00:23:13.445
<00:23:12.225>and <00:23:12.591>accessibility <00:23:12.956>around <00:23:13.322>it.

539
00:23:13.665 --> 00:23:15.645
<00:23:13.665>So <00:23:13.865>imagine <00:23:14.065>that <00:23:14.264>we <00:23:14.465>have <00:23:14.665>an <00:23:14.865>auto <00:23:15.065>complete

540
00:23:15.745 --> 00:23:18.485
<00:23:15.745>and <00:23:15.919>we <00:23:16.094>wanted <00:23:16.270>to, <00:23:16.445>uh, <00:23:16.620>just <00:23:16.794>have <00:23:16.969>this <00:23:17.145>feature

541
00:23:18.665 --> 00:23:21.045
<00:23:18.665>or <00:23:18.898>functionality <00:23:19.131>where <00:23:19.365>I <00:23:19.598>could <00:23:19.831>type <00:23:20.065>something,

542
00:23:21.505 --> 00:23:25.085
<00:23:21.505>get <00:23:21.621>some <00:23:21.738>data, <00:23:21.855>and <00:23:21.971>then <00:23:22.088>I <00:23:22.205>should <00:23:22.321>be <00:23:22.438>able <00:23:22.555>to <00:23:22.671>just, <00:23:22.788>uh, <00:23:22.905>scroll

543
00:23:25.085 --> 00:23:28.765
<00:23:25.085>through <00:23:25.240>or <00:23:25.396>just <00:23:25.551>navigate <00:23:25.707>through <00:23:25.862>each <00:23:26.018>item <00:23:26.173>using <00:23:26.329>my <00:23:26.485>keyboard

544
00:23:29.105 --> 00:23:31.525
<00:23:29.105>and <00:23:29.305>then <00:23:29.505>just <00:23:29.705>select <00:23:29.905>an <00:23:30.105>item <00:23:30.305>for <00:23:30.505>instance.

545
00:23:31.785 --> 00:23:34.765
<00:23:31.785>So <00:23:31.960>in <00:23:32.135>this <00:23:32.310>particular <00:23:32.485>scenario, <00:23:32.660>um, <00:23:32.835>if <00:23:33.010>I <00:23:33.185>had

546
00:23:34.965 --> 00:23:38.205
<00:23:34.965>to <00:23:35.081>implement <00:23:35.198>it <00:23:35.314>myself, <00:23:35.431>I <00:23:35.548>would <00:23:35.665>have <00:23:35.781>to <00:23:35.898>have <00:23:36.014>a <00:23:36.131>bunch <00:23:36.248>of, <00:23:36.365>uh,

547
00:23:38.305 --> 00:23:40.325
<00:23:38.305>events <00:23:38.655>found, <00:23:39.005>like <00:23:39.355>keyboard <00:23:39.705>events

548
00:23:40.345 --> 00:23:42.005
<00:23:40.345>and <00:23:40.625>then <00:23:40.905>navigation <00:23:41.185>should <00:23:41.465>be <00:23:41.745>handled.

549
00:23:42.185 --> 00:23:44.765
<00:23:42.185>And <00:23:42.325>then <00:23:42.465>what <00:23:42.605>is <00:23:42.745>the <00:23:42.885>correct, <00:23:43.024>what <00:23:43.165>is <00:23:43.304>the <00:23:43.445>current <00:23:43.585>item

550
00:23:44.795 --> 00:23:46.205
<00:23:44.795>that <00:23:45.112>is <00:23:45.429>selected <00:23:45.746>right <00:23:46.063>now?

551
00:23:46.425 --> 00:23:49.005
<00:23:46.425>And <00:23:46.600>then <00:23:46.774>having <00:23:46.950>all <00:23:47.125>those <00:23:47.300>handlers <00:23:47.475>in <00:23:47.649>my <00:23:47.825>code

552
00:23:49.355 --> 00:23:51.605
<00:23:49.355>with <00:23:49.588>Angular <00:23:49.821>CDA, <00:23:50.055>it's <00:23:50.288>actually <00:23:50.521>really <00:23:50.755>easy

553
00:23:51.605 --> 00:23:54.445
<00:23:51.605>because <00:23:51.760>we <00:23:51.916>can <00:23:52.071>use <00:23:52.227>something <00:23:52.382>called <00:23:52.538>the <00:23:52.693>list <00:23:52.849>key <00:23:53.005>manager

554
00:23:54.755 --> 00:23:58.245
<00:23:54.755>that <00:23:54.955>allows <00:23:55.155>you <00:23:55.355>to <00:23:55.555>bind <00:23:55.755>navigation <00:23:55.955>to <00:23:56.155>list.

555
00:23:58.345 --> 00:24:00.525
<00:23:58.345>And <00:23:58.500>also <00:23:58.656>it <00:23:58.811>remembers <00:23:58.967>what <00:23:59.122>is <00:23:59.278>the <00:23:59.433>last <00:23:59.589>selected <00:23:59.745>item.

556
00:24:01.585 --> 00:24:04.605
<00:24:01.585>So <00:24:01.692>let <00:24:01.800>me <00:24:01.908>show <00:24:02.015>you <00:24:02.123>an <00:24:02.231>example <00:24:02.338>which <00:24:02.446>we <00:24:02.554>are <00:24:02.661>going <00:24:02.769>to <00:24:02.877>use <00:24:02.985>for,

557
00:24:04.785 --> 00:24:05.805
<00:24:04.785>for <00:24:05.091>this <00:24:05.397>particular <00:24:05.703>concept.

558
00:24:07.705 --> 00:24:09.885
<00:24:07.705>So <00:24:07.832>here, <00:24:07.959>right <00:24:08.086>now, <00:24:08.214>you <00:24:08.341>can <00:24:08.468>see <00:24:08.595>that <00:24:08.723>we <00:24:08.850>have <00:24:08.977>a <00:24:09.105>list,

559
00:24:10.305 --> 00:24:14.445
<00:24:10.305>and <00:24:10.421>if <00:24:10.538>I <00:24:10.655>try <00:24:10.771>to <00:24:10.888>press <00:24:11.005>the <00:24:11.121>down <00:24:11.238>arrow <00:24:11.355>right <00:24:11.471>on <00:24:11.588>the <00:24:11.705>document,

560
00:24:14.705 --> 00:24:16.525
<00:24:14.705>you <00:24:14.938>can <00:24:15.171>see <00:24:15.405>that <00:24:15.638>I <00:24:15.871>actually <00:24:16.105>do

561
00:24:16.525 --> 00:24:17.605
<00:24:16.525>the <00:24:16.768>scrolling <00:24:17.011>on <00:24:17.254>the <00:24:17.497>document.

562
00:24:17.785 --> 00:24:18.845
<00:24:17.785>If <00:24:18.103>I <00:24:18.421>click <00:24:18.739>here

563
00:24:18.985 --> 00:24:21.805
<00:24:18.985>and <00:24:19.140>try <00:24:19.296>to <00:24:19.451>press <00:24:19.607>the <00:24:19.762>down <00:24:19.918>key, <00:24:20.073>you <00:24:20.229>can <00:24:20.385>see

564
00:24:21.885 --> 00:24:23.005
<00:24:21.885>that <00:24:22.221>it's <00:24:22.557>navigating <00:24:22.893>away,

565
00:24:23.005 --> 00:24:25.005
<00:24:23.005>but <00:24:23.180>we, <00:24:23.355>we <00:24:23.530>are <00:24:23.705>not <00:24:23.880>able <00:24:24.055>to <00:24:24.230>actually <00:24:24.405>select

566
00:24:25.005 --> 00:24:26.445
<00:24:25.005>or <00:24:25.329>highlight <00:24:25.653>a <00:24:25.977>particular <00:24:26.301>element,

567
00:24:26.745 --> 00:24:29.205
<00:24:26.745>and <00:24:26.885>that's <00:24:27.024>what <00:24:27.165>we <00:24:27.304>are <00:24:27.445>going <00:24:27.584>to <00:24:27.725>do <00:24:27.864>with <00:24:28.004>the <00:24:28.145>CDK.

568
00:24:29.745 --> 00:24:33.405
<00:24:29.745>So <00:24:29.861>in <00:24:29.978>the <00:24:30.094>final <00:24:30.211>version, <00:24:30.328>if <00:24:30.445>I <00:24:30.561>show <00:24:30.678>you <00:24:30.794>with <00:24:30.911>the <00:24:31.028>same, <00:24:31.145>uh,

569
00:24:33.435 --> 00:24:36.085
<00:24:33.435>same <00:24:33.610>application, <00:24:33.784>but <00:24:33.960>with <00:24:34.135>the <00:24:34.310>list <00:24:34.485>key <00:24:34.659>manager <00:24:34.835>implemented,

570
00:24:36.745 --> 00:24:41.005
<00:24:36.745>um, <00:24:36.885>whenever <00:24:37.024>I <00:24:37.165>press <00:24:37.304>the <00:24:37.445>down <00:24:37.584>key <00:24:37.725>on <00:24:37.864>application <00:24:38.004>is <00:24:38.145>start,

571
00:24:41.225 --> 00:24:43.445
<00:24:41.225>you <00:24:41.399>can <00:24:41.574>see <00:24:41.750>that <00:24:41.925>we <00:24:42.100>have <00:24:42.274>this <00:24:42.449>item <00:24:42.625>highlighted.

572
00:24:43.785 --> 00:24:45.725
<00:24:43.785>Now <00:24:44.018>my, <00:24:44.251>my <00:24:44.485>mouse <00:24:44.718>is <00:24:44.951>over <00:24:45.185>here,

573
00:24:46.025 --> 00:24:47.365
<00:24:46.025>and <00:24:46.266>if <00:24:46.507>I <00:24:46.748>kind <00:24:46.989>of <00:24:47.231>navigate,

574
00:24:47.365 --> 00:24:49.165
<00:24:47.365>you <00:24:47.565>can <00:24:47.765>see <00:24:47.965>the <00:24:48.165>selected <00:24:48.365>item <00:24:48.565>right <00:24:48.765>now.

575
00:24:49.505 --> 00:24:51.645
<00:24:49.505>And <00:24:49.705>what's <00:24:49.905>what's <00:24:50.105>amazing, <00:24:50.305>as <00:24:50.505>you <00:24:50.705>just <00:24:50.905>saw

576
00:24:51.645 --> 00:24:54.045
<00:24:51.645>that <00:24:51.820>if <00:24:51.995>I <00:24:52.170>have <00:24:52.345>an <00:24:52.520>item <00:24:52.695>that <00:24:52.870>is <00:24:53.045>selected

577
00:24:54.105 --> 00:24:55.525
<00:24:54.105>and <00:24:54.318>it's <00:24:54.531>out <00:24:54.744>of <00:24:54.957>the <00:24:55.170>view <00:24:55.383>port,

578
00:24:55.985 --> 00:24:59.325
<00:24:55.985>the <00:24:56.159>angle <00:24:56.334>CDA <00:24:56.510>automatically <00:24:56.685>brings <00:24:56.860>that <00:24:57.034>into <00:24:57.209>the <00:24:57.385>view.

579
00:24:59.625 --> 00:25:01.285
<00:24:59.625>And <00:24:59.800>if <00:24:59.975>I <00:25:00.150>keep <00:25:00.325>scrolling <00:25:00.500>down, <00:25:00.675>you <00:25:00.850>can <00:25:01.025>see

580
00:25:01.285 --> 00:25:02.725
<00:25:01.285>that <00:25:01.501>this <00:25:01.717>is <00:25:01.933>a <00:25:02.149>really <00:25:02.365>good <00:25:02.581>experience

581
00:25:02.725 --> 00:25:06.525
<00:25:02.725>because <00:25:02.880>I <00:25:03.036>have <00:25:03.191>always <00:25:03.347>the <00:25:03.502>selected <00:25:03.658>item <00:25:03.813>in <00:25:03.969>my <00:25:04.125>view.

582
00:25:06.585 --> 00:25:09.085
<00:25:06.585>And <00:25:06.760>then <00:25:06.935>I <00:25:07.110>can <00:25:07.285>select <00:25:07.460>this <00:25:07.635>item, <00:25:07.810>press <00:25:07.985>enter.

583
00:25:09.385 --> 00:25:10.405
<00:25:09.385>So <00:25:09.568>right <00:25:09.752>now <00:25:09.935>you <00:25:10.119>can <00:25:10.303>see

584
00:25:10.405 --> 00:25:12.525
<00:25:10.405>that <00:25:10.638>we <00:25:10.871>have <00:25:11.105>this <00:25:11.338>guy <00:25:11.571>Philip <00:25:11.805>selected.

585
00:25:12.585 --> 00:25:14.045
<00:25:12.585>If <00:25:12.847>I <00:25:13.110>move <00:25:13.373>away, <00:25:13.636>click <00:25:13.899>away,

586
00:25:14.145 --> 00:25:16.805
<00:25:14.145>and <00:25:14.272>if <00:25:14.399>I <00:25:14.526>press <00:25:14.654>down, <00:25:14.781>then <00:25:14.908>the <00:25:15.035>next <00:25:15.163>item <00:25:15.290>should <00:25:15.417>be <00:25:15.545>selected,

587
00:25:16.855 --> 00:25:18.205
<00:25:16.855>which <00:25:17.158>is <00:25:17.462>this <00:25:17.766>leak <00:25:18.070>cricket.

588
00:25:18.545 --> 00:25:20.725
<00:25:18.545>So <00:25:18.672>if <00:25:18.799>I <00:25:18.926>press <00:25:19.054>down, <00:25:19.181>you <00:25:19.308>can <00:25:19.435>see <00:25:19.563>that <00:25:19.690>this <00:25:19.817>is <00:25:19.945>selected.

589
00:25:20.785 --> 00:25:22.205
<00:25:20.785>So <00:25:21.424>Angular, <00:25:22.062>CDK

590
00:25:22.205 --> 00:25:24.685
<00:25:22.205>or <00:25:22.379>the <00:25:22.554>list <00:25:22.730>key <00:25:22.905>manager <00:25:23.080>has <00:25:23.254>this <00:25:23.429>estate <00:25:23.605>of

591
00:25:24.685 --> 00:25:27.565
<00:25:24.685>what <00:25:24.918>item <00:25:25.151>was <00:25:25.385>selected, <00:25:25.618>um, <00:25:25.851>by <00:25:26.085>default,

592
00:25:27.565 --> 00:25:29.565
<00:25:27.565>and <00:25:27.705>you <00:25:27.845>can <00:25:27.985>override <00:25:28.125>it <00:25:28.265>based <00:25:28.405>on <00:25:28.545>your <00:25:28.685>needs <00:25:28.825>as <00:25:28.965>well.

593
00:25:29.825 --> 00:25:31.725
<00:25:29.825>But <00:25:30.000>this <00:25:30.175>is <00:25:30.350>a <00:25:30.525>really <00:25:30.700>neat <00:25:30.875>way <00:25:31.050>to <00:25:31.225>provide

594
00:25:32.285 --> 00:25:34.285
<00:25:32.285>keyboard <00:25:32.635>interaction <00:25:32.985>to <00:25:33.335>your <00:25:33.685>list

595
00:25:34.535 --> 00:25:35.845
<00:25:34.535>using <00:25:34.829>the <00:25:35.124>list <00:25:35.419>Key <00:25:35.714>Manager.

596
00:25:35.865 --> 00:25:37.485
<00:25:35.865>And <00:25:36.065>this <00:25:36.265>is, <00:25:36.465>uh, <00:25:36.665>one <00:25:36.865>of <00:25:37.065>the <00:25:37.265>tools

597
00:25:37.485 --> 00:25:39.125
<00:25:37.485>that <00:25:37.718>I <00:25:37.951>really <00:25:38.185>like <00:25:38.418>about <00:25:38.651>the <00:25:38.885>CDK.

598
00:25:39.985 --> 00:25:41.765
<00:25:39.985>Now <00:25:40.264>moving <00:25:40.544>forward, <00:25:40.824>we <00:25:41.104>are <00:25:41.385>going

599
00:25:41.765 --> 00:25:43.365
<00:25:41.765>to <00:25:42.045>talk <00:25:42.325>about <00:25:42.605>something <00:25:42.885>called <00:25:43.165>stepper.

600
00:25:43.865 --> 00:25:44.885
<00:25:43.865>So <00:25:44.171>stepper <00:25:44.477>is <00:25:44.783>something

601
00:25:44.885 --> 00:25:47.125
<00:25:44.885>that <00:25:45.060>you <00:25:45.235>might <00:25:45.410>have <00:25:45.585>seen <00:25:45.760>in <00:25:45.935>different <00:25:46.110>web <00:25:46.285>applications.

602
00:25:47.405 --> 00:25:48.845
<00:25:47.405>I, <00:25:47.621>um, <00:25:47.837>I've <00:25:48.053>seen <00:25:48.269>it <00:25:48.485>a <00:25:48.701>lot.

603
00:25:49.185 --> 00:25:50.445
<00:25:49.185>Uh, <00:25:49.468>if <00:25:49.752>you <00:25:50.035>use <00:25:50.319>Firebase

604
00:25:50.445 --> 00:25:53.245
<00:25:50.445>and <00:25:50.572>if <00:25:50.699>you <00:25:50.826>try <00:25:50.954>to <00:25:51.081>register <00:25:51.208>a <00:25:51.335>new <00:25:51.463>application, <00:25:51.590>they <00:25:51.717>take <00:25:51.845>you

605
00:25:53.245 --> 00:25:57.405
<00:25:53.245>to <00:25:53.361>this <00:25:53.478>stepper, <00:25:53.594>uh, <00:25:53.711>form <00:25:53.828>where <00:25:53.945>you <00:25:54.061>kind <00:25:54.178>of <00:25:54.294>give <00:25:54.411>this <00:25:54.528>a <00:25:54.645>name

606
00:25:57.425 --> 00:25:59.125
<00:25:57.425>and <00:25:57.658>then <00:25:57.891>select <00:25:58.125>the <00:25:58.358>regions <00:25:58.591>and <00:25:58.825>whatnot.

607
00:25:59.465 --> 00:26:01.885
<00:25:59.465>So <00:25:59.639>if <00:25:59.814>we <00:25:59.990>had <00:26:00.165>to <00:26:00.340>implement <00:26:00.514>this <00:26:00.689>stepper <00:26:00.865>ourselves,

608
00:26:02.395 --> 00:26:04.205
<00:26:02.395>that <00:26:02.628>would <00:26:02.861>be <00:26:03.095>a <00:26:03.328>lot <00:26:03.561>of <00:26:03.795>work

609
00:26:04.205 --> 00:26:07.885
<00:26:04.205>because <00:26:04.360>we <00:26:04.516>would <00:26:04.671>be <00:26:04.827>using <00:26:04.982>something <00:26:05.138>like, <00:26:05.293>uh, <00:26:05.449>an <00:26:05.605>NGF

610
00:26:07.885 --> 00:26:10.565
<00:26:07.885>or <00:26:08.025>something <00:26:08.165>keeping <00:26:08.305>the <00:26:08.445>state <00:26:08.585>of <00:26:08.725>which <00:26:08.865>step <00:26:09.004>we <00:26:09.145>are <00:26:09.285>in.

611
00:26:10.795 --> 00:26:13.325
<00:26:10.795>Then <00:26:10.935>we <00:26:11.075>also <00:26:11.215>have <00:26:11.355>to <00:26:11.495>take <00:26:11.635>care <00:26:11.775>of <00:26:11.915>things <00:26:12.055>like, <00:26:12.195>Hey,

612
00:26:13.705 --> 00:26:15.245
<00:26:13.705>is <00:26:14.051>the <00:26:14.398>current <00:26:14.744>step <00:26:15.091>completed?

613
00:26:15.245 --> 00:26:17.565
<00:26:15.245>Should <00:26:15.385>the <00:26:15.524>user <00:26:15.665>be <00:26:15.804>able <00:26:15.945>to <00:26:16.084>go <00:26:16.225>to <00:26:16.364>the <00:26:16.504>next <00:26:16.645>step?

614
00:26:17.745 --> 00:26:19.845
<00:26:17.745>And <00:26:17.885>then <00:26:18.024>there's <00:26:18.165>a <00:26:18.304>question <00:26:18.445>of <00:26:18.584>should <00:26:18.725>the <00:26:18.864>user <00:26:19.004>be <00:26:19.145>able

615
00:26:19.845 --> 00:26:21.925
<00:26:19.845>to <00:26:20.045>come <00:26:20.245>back <00:26:20.445>to <00:26:20.645>previous <00:26:20.845>steps <00:26:21.045>or <00:26:21.245>not?

616
00:26:21.985 --> 00:26:25.405
<00:26:21.985>Should <00:26:22.140>this <00:26:22.296>be <00:26:22.451>a <00:26:22.607>only <00:26:22.762>a <00:26:22.918>linear, <00:26:23.073>uh, <00:26:23.229>stepper <00:26:23.385>or,

617
00:26:26.065 --> 00:26:27.925
<00:26:26.065>or <00:26:26.265>the <00:26:26.465>user <00:26:26.665>can <00:26:26.865>come <00:26:27.065>back, <00:26:27.265>for <00:26:27.465>instance.

618
00:26:28.265 --> 00:26:31.365
<00:26:28.265>And <00:26:28.420>we <00:26:28.576>don't <00:26:28.731>have <00:26:28.887>to <00:26:29.042>necessarily <00:26:29.198>implement <00:26:29.353>a <00:26:29.509>stepper <00:26:29.665>only

619
00:26:31.465 --> 00:26:33.685
<00:26:31.465>for <00:26:31.665>forms, <00:26:31.865>but <00:26:32.064>you <00:26:32.264>could <00:26:32.465>also <00:26:32.665>be <00:26:32.865>more

620
00:26:33.965 --> 00:26:35.005
<00:26:33.965>creative <00:26:34.277>with <00:26:34.589>other <00:26:34.901>things.

621
00:26:35.345 --> 00:26:37.165
<00:26:35.345>Um, <00:26:35.545>for <00:26:35.745>example, <00:26:35.945>I'm <00:26:36.145>gonna <00:26:36.345>show <00:26:36.545>you <00:26:36.745>something

622
00:26:37.165 --> 00:26:38.365
<00:26:37.165>that <00:26:37.380>I <00:26:37.597>built <00:26:37.813>with <00:26:38.029>the <00:26:38.245>stepper.

623
00:26:38.905 --> 00:26:41.725
<00:26:38.905>So <00:26:39.021>the <00:26:39.138>example <00:26:39.254>that <00:26:39.371>we <00:26:39.488>are <00:26:39.605>going <00:26:39.721>to <00:26:39.838>look <00:26:39.955>at <00:26:40.071>is <00:26:40.188>this <00:26:40.305>game

624
00:26:41.835 --> 00:26:43.005
<00:26:41.835>that <00:26:42.186>I <00:26:42.537>developed, <00:26:42.888>um,

625
00:26:43.105 --> 00:26:44.725
<00:26:43.105>and <00:26:43.280>I'm <00:26:43.455>gonna <00:26:43.630>show <00:26:43.805>you <00:26:43.980>where <00:26:44.155>you <00:26:44.330>can <00:26:44.505>access

626
00:26:44.725 --> 00:26:46.085
<00:26:44.725>this <00:26:45.031>later <00:26:45.337>in <00:26:45.643>the <00:26:45.949>talk.

627
00:26:46.265 --> 00:26:48.445
<00:26:46.265>So, <00:26:46.498>uh, <00:26:46.731>so <00:26:46.965>yeah, <00:26:47.198>stay <00:26:47.431>with <00:26:47.665>me.

628
00:26:48.785 --> 00:26:51.605
<00:26:48.785>So <00:26:48.925>we <00:26:49.065>have <00:26:49.205>this, <00:26:49.345>this <00:26:49.485>application <00:26:49.625>where <00:26:49.765>we <00:26:49.905>have <00:26:50.045>three <00:26:50.185>things

629
00:26:51.625 --> 00:26:53.645
<00:26:51.625>or <00:26:51.825>three <00:26:52.025>to <00:26:52.225>four <00:26:52.425>things, <00:26:52.625>whatever <00:26:52.825>we <00:26:53.025>have.

630
00:26:53.875 --> 00:26:56.645
<00:26:53.875>Firstly <00:26:54.030>this <00:26:54.186>player <00:26:54.341>name <00:26:54.497>where <00:26:54.652>the <00:26:54.808>user <00:26:54.963>submits <00:26:55.119>their <00:26:55.275>name,

631
00:26:56.905 --> 00:26:59.405
<00:26:56.905>and <00:26:57.060>then <00:26:57.216>the <00:26:57.371>user <00:26:57.527>goes <00:26:57.682>through <00:26:57.838>this <00:26:57.993>game <00:26:58.149>of <00:26:58.305>guessing

632
00:26:59.435 --> 00:27:02.445
<00:26:59.435>what <00:26:59.635>number <00:26:59.835>would <00:27:00.034>appear <00:27:00.235>after <00:27:00.435>the <00:27:00.635>dice <00:27:00.835>roll.

633
00:27:02.665 --> 00:27:05.165
<00:27:02.665>And <00:27:02.840>finally <00:27:03.014>we <00:27:03.190>have <00:27:03.365>this <00:27:03.540>leader <00:27:03.715>vote <00:27:03.889>right <00:27:04.065>now.

634
00:27:05.165 --> 00:27:07.765
<00:27:05.165>This <00:27:05.305>is <00:27:05.445>too <00:27:05.585>much <00:27:05.725>information <00:27:05.865>in, <00:27:06.004>in <00:27:06.145>just <00:27:06.284>one <00:27:06.425>view <00:27:06.565>because,

635
00:27:07.915 --> 00:27:09.365
<00:27:07.915>because <00:27:08.241>it's <00:27:08.567>a <00:27:08.893>lot, <00:27:09.220>right?

636
00:27:09.365 --> 00:27:10.925
<00:27:09.365>And <00:27:09.565>this <00:27:09.765>is <00:27:09.965>not <00:27:10.165>how <00:27:10.365>I <00:27:10.565>would <00:27:10.765>want

637
00:27:10.925 --> 00:27:12.205
<00:27:10.925>to <00:27:11.089>present <00:27:11.254>this <00:27:11.418>game <00:27:11.583>to <00:27:11.747>the <00:27:11.912>end <00:27:12.077>user.

638
00:27:12.745 --> 00:27:15.325
<00:27:12.745>So <00:27:12.861>what <00:27:12.978>we <00:27:13.094>could <00:27:13.211>do <00:27:13.328>is <00:27:13.445>that <00:27:13.561>we <00:27:13.678>could <00:27:13.794>split <00:27:13.911>this <00:27:14.028>game <00:27:14.145>into

639
00:27:15.325 --> 00:27:17.445
<00:27:15.325>different <00:27:15.605>steps <00:27:15.885>using <00:27:16.165>the <00:27:16.445>stepper <00:27:16.725>API

640
00:27:17.825 --> 00:27:22.085
<00:27:17.825>and <00:27:17.952>with <00:27:18.079>the <00:27:18.206>angular <00:27:18.334>CDK <00:27:18.461>stepper, <00:27:18.588>API, <00:27:18.715>this <00:27:18.843>is <00:27:18.970>how <00:27:19.097>it <00:27:19.225>looks.

641
00:27:22.465 --> 00:27:25.045
<00:27:22.465>Um, <00:27:22.592>and <00:27:22.719>you <00:27:22.846>can <00:27:22.974>see <00:27:23.101>that <00:27:23.228>we <00:27:23.355>are <00:27:23.483>at <00:27:23.610>the <00:27:23.737>first <00:27:23.865>step.

642
00:27:25.425 --> 00:27:27.885
<00:27:25.425>We <00:27:25.600>have <00:27:25.774>a <00:27:25.950>next <00:27:26.125>burden, <00:27:26.300>but <00:27:26.475>this <00:27:26.649>is <00:27:26.825>disabled.

643
00:27:28.065 --> 00:27:30.005
<00:27:28.065>And <00:27:28.298>until <00:27:28.531>I <00:27:28.765>actually <00:27:28.998>provide <00:27:29.231>my <00:27:29.465>name,

644
00:27:30.115 --> 00:27:31.565
<00:27:30.115>this <00:27:30.441>is <00:27:30.767>gonna <00:27:31.093>be <00:27:31.420>disabled.

645
00:27:31.705 --> 00:27:34.885
<00:27:31.705>So <00:27:31.879>let's <00:27:32.054>say <00:27:32.230>we <00:27:32.405>are <00:27:32.580>saying <00:27:32.754>World <00:27:32.929>Congress <00:27:33.105>2021,

646
00:27:36.925 --> 00:27:39.105
<00:27:36.925>and <00:27:37.100>my <00:27:37.274>keyboard <00:27:37.450>is <00:27:37.625>not <00:27:37.800>supporting <00:27:37.975>me <00:27:38.149>right <00:27:38.325>now.

647
00:27:39.685 --> 00:27:41.905
<00:27:39.685>So <00:27:39.840>if <00:27:39.996>I <00:27:40.151>press, <00:27:40.307>you <00:27:40.462>can <00:27:40.618>see <00:27:40.773>that <00:27:40.929>as <00:27:41.085>soon

648
00:27:41.905 --> 00:27:42.985
<00:27:41.905>as <00:27:42.148>I <00:27:42.390>have <00:27:42.634>value <00:27:42.877>here,

649
00:27:43.215 --> 00:27:45.785
<00:27:43.215>this <00:27:43.448>essentially <00:27:43.681>shows <00:27:43.915>me <00:27:44.148>the <00:27:44.381>burden <00:27:44.615>enabled.

650
00:27:46.125 --> 00:27:48.865
<00:27:46.125>If <00:27:46.300>I <00:27:46.475>click <00:27:46.650>on <00:27:46.825>it, <00:27:47.000>now <00:27:47.175>I'm <00:27:47.350>at <00:27:47.525>game,

651
00:27:49.005 --> 00:27:50.705
<00:27:49.005>and <00:27:49.145>you <00:27:49.285>can <00:27:49.425>see <00:27:49.565>that <00:27:49.705>I <00:27:49.845>can <00:27:49.985>go <00:27:50.125>back <00:27:50.265>as <00:27:50.405>well.

652
00:27:50.965 --> 00:27:52.265
<00:27:50.965>So <00:27:51.159>I <00:27:51.355>can <00:27:51.550>go <00:27:51.745>to <00:27:51.940>next <00:27:52.135>again,

653
00:27:52.325 --> 00:27:53.945
<00:27:52.325>and <00:27:52.525>then <00:27:52.725>I <00:27:52.925>can <00:27:53.125>try <00:27:53.325>guessing <00:27:53.525>a <00:27:53.725>number.

654
00:27:54.485 --> 00:27:57.265
<00:27:54.485>Uh, <00:27:54.625>this <00:27:54.764>is <00:27:54.905>pretty <00:27:55.044>hard <00:27:55.185>for <00:27:55.324>me <00:27:55.465>to <00:27:55.604>get <00:27:55.745>this <00:27:55.885>right,

655
00:27:57.265 --> 00:27:59.465
<00:27:57.265>because <00:27:57.498>it's <00:27:57.731>a, <00:27:57.965>oh, <00:27:58.198>I <00:27:58.431>got <00:27:58.665>this.

656
00:27:59.725 --> 00:28:03.905
<00:27:59.725>So <00:27:59.832>you <00:27:59.940>can <00:28:00.048>see <00:28:00.155>that. <00:28:00.263>Um, <00:28:00.371>as <00:28:00.478>soon <00:28:00.586>as <00:28:00.694>I <00:28:00.801>try <00:28:00.909>getting <00:28:01.017>a <00:28:01.125>number,

657
00:28:04.985 --> 00:28:07.195
<00:28:04.985>even <00:28:05.159>if <00:28:05.334>I <00:28:05.510>get <00:28:05.685>a <00:28:05.860>right <00:28:06.034>answer, <00:28:06.209>wrong <00:28:06.385>answer,

658
00:28:07.215 --> 00:28:09.515
<00:28:07.215>in <00:28:07.415>this <00:28:07.615>particular <00:28:07.814>example, <00:28:08.014>this <00:28:08.215>button <00:28:08.415>gets <00:28:08.615>enabled.

659
00:28:09.735 --> 00:28:11.955
<00:28:09.735>So <00:28:09.875>we <00:28:10.014>are <00:28:10.155>not <00:28:10.294>supposed <00:28:10.435>to <00:28:10.574>go <00:28:10.715>to <00:28:10.854>the <00:28:10.995>next <00:28:11.135>step,

660
00:28:11.965 --> 00:28:14.955
<00:28:11.965>which <00:28:12.105>is <00:28:12.245>the <00:28:12.385>leaderboard <00:28:12.524>until <00:28:12.665>we <00:28:12.804>have <00:28:12.945>tried <00:28:13.084>at <00:28:13.225>least <00:28:13.365>once,

661
00:28:15.575 --> 00:28:17.875
<00:28:15.575>uh, <00:28:15.730>according <00:28:15.886>to <00:28:16.041>my <00:28:16.197>logic <00:28:16.352>for <00:28:16.508>this <00:28:16.663>game <00:28:16.819>at <00:28:16.975>least.

662
00:28:18.215 --> 00:28:21.435
<00:28:18.215>And <00:28:18.370>then <00:28:18.526>once <00:28:18.681>we <00:28:18.837>have <00:28:18.992>this, <00:28:19.148>uh, <00:28:19.303>this <00:28:19.459>correct <00:28:19.615>answer,

663
00:28:21.675 --> 00:28:22.995
<00:28:21.675>I <00:28:21.844>actually <00:28:22.014>get <00:28:22.184>some <00:28:22.353>points <00:28:22.523>and <00:28:22.693>I <00:28:22.862>can

664
00:28:22.995 --> 00:28:24.075
<00:28:22.995>see <00:28:23.189>my <00:28:23.383>name <00:28:23.578>in <00:28:23.772>the <00:28:23.967>leaderboard.

665
00:28:24.215 --> 00:28:27.315
<00:28:24.215>So <00:28:24.342>if <00:28:24.469>I <00:28:24.596>go <00:28:24.724>next, <00:28:24.851>I <00:28:24.978>can <00:28:25.105>actually <00:28:25.233>see <00:28:25.360>the <00:28:25.487>leaderboard <00:28:25.615>with,

666
00:28:27.375 --> 00:28:29.275
<00:28:27.375>uh, <00:28:27.550>yeah, <00:28:27.725>my <00:28:27.900>name <00:28:28.075>because <00:28:28.250>I <00:28:28.425>played <00:28:28.600>it <00:28:28.775>already,

667
00:28:29.495 --> 00:28:31.355
<00:28:29.495>and <00:28:29.669>then <00:28:29.844>this <00:28:30.020>name <00:28:30.195>that <00:28:30.370>we <00:28:30.544>just <00:28:30.719>tried <00:28:30.895>out.

668
00:28:31.495 --> 00:28:34.315
<00:28:31.495>And <00:28:31.635>then <00:28:31.774>I <00:28:31.915>can <00:28:32.054>go <00:28:32.195>back, <00:28:32.334>play <00:28:32.475>the <00:28:32.614>game, <00:28:32.754>go <00:28:32.895>forward.

669
00:28:34.595 --> 00:28:37.995
<00:28:34.595>I <00:28:34.711>could <00:28:34.828>also <00:28:34.945>provide <00:28:35.061>a <00:28:35.178>button <00:28:35.295>here <00:28:35.411>to <00:28:35.528>say, <00:28:35.645>Hey, <00:28:35.761>play <00:28:35.878>a <00:28:35.995>game.

670
00:28:38.175 --> 00:28:40.195
<00:28:38.175>And <00:28:38.375>then <00:28:38.575>I <00:28:38.774>would <00:28:38.975>be, <00:28:39.175>uh, <00:28:39.375>gone <00:28:39.575>back

671
00:28:40.195 --> 00:28:41.795
<00:28:40.195>to <00:28:40.475>the <00:28:40.754>previous <00:28:41.034>step <00:28:41.314>and <00:28:41.595>whatnot.

672
00:28:42.295 --> 00:28:44.835
<00:28:42.295>So <00:28:42.435>this <00:28:42.575>is <00:28:42.715>a <00:28:42.855>really <00:28:42.995>neat <00:28:43.135>example <00:28:43.275>of <00:28:43.415>using <00:28:43.555>the <00:28:43.695>stepper,

673
00:28:44.975 --> 00:28:46.275
<00:28:44.975>um, <00:28:45.208>in <00:28:45.443>sort <00:28:45.677>of <00:28:45.911>a <00:28:46.145>game.

674
00:28:47.745 --> 00:28:50.445
<00:28:47.745>Now <00:28:47.900>let's <00:28:48.056>talk <00:28:48.211>about <00:28:48.367>one <00:28:48.522>more <00:28:48.678>thing, <00:28:48.833>which <00:28:48.989>is <00:28:49.145>popovers.

675
00:28:50.445 --> 00:28:52.085
<00:28:50.445>And <00:28:50.585>this <00:28:50.725>is <00:28:50.865>gonna <00:28:51.004>be <00:28:51.145>the <00:28:51.284>last <00:28:51.425>thing <00:28:51.564>that <00:28:51.705>we <00:28:51.845>discussed.

676
00:28:52.225 --> 00:28:55.805
<00:28:52.225>Um, <00:28:52.365>according <00:28:52.504>to <00:28:52.645>the <00:28:52.784>CDK <00:28:52.925>or <00:28:53.064>with <00:28:53.205>the <00:28:53.344>relation <00:28:53.485>to <00:28:53.625>CDK.

677
00:28:56.305 --> 00:28:58.245
<00:28:56.305>Now <00:28:56.538>this <00:28:56.771>popover <00:28:57.005>is <00:28:57.238>an <00:28:57.471>interesting <00:28:57.705>thing

678
00:28:58.245 --> 00:29:00.045
<00:28:58.245>that <00:28:58.478>we <00:28:58.711>have <00:28:58.945>usually <00:28:59.178>in <00:28:59.411>our <00:28:59.645>applications.

679
00:29:00.465 --> 00:29:04.445
<00:29:00.465>Uh, <00:29:00.605>and <00:29:00.745>it's <00:29:00.885>even <00:29:01.024>more <00:29:01.165>interesting, <00:29:01.304>um, <00:29:01.445>how <00:29:01.584>we <00:29:01.725>position <00:29:01.865>it

680
00:29:04.445 --> 00:29:07.045
<00:29:04.445>because <00:29:04.620>if <00:29:04.794>it's <00:29:04.970>just <00:29:05.145>a <00:29:05.320>popover <00:29:05.495>within <00:29:05.669>a <00:29:05.845>button

681
00:29:07.045 --> 00:29:08.765
<00:29:07.045>that <00:29:07.325>always <00:29:07.605>stays <00:29:07.885>there, <00:29:08.165>that's <00:29:08.445>fine.

682
00:29:08.945 --> 00:29:12.565
<00:29:08.945>But <00:29:09.100>if <00:29:09.256>this <00:29:09.411>popover <00:29:09.567>was, <00:29:09.722>let's <00:29:09.878>say <00:29:10.033>an <00:29:10.189>options <00:29:10.345>popover,

683
00:29:12.695 --> 00:29:14.605
<00:29:12.695>where <00:29:12.895>you <00:29:13.095>would <00:29:13.294>have <00:29:13.495>a <00:29:13.695>list <00:29:13.895>of <00:29:14.095>items

684
00:29:15.185 --> 00:29:18.645
<00:29:15.185>and <00:29:15.312>then <00:29:15.439>you <00:29:15.566>would <00:29:15.694>have <00:29:15.821>a <00:29:15.948>popover <00:29:16.075>for <00:29:16.203>each, <00:29:16.330>uh, <00:29:16.457>list <00:29:16.585>item,

685
00:29:18.785 --> 00:29:21.005
<00:29:18.785>so <00:29:18.940>you <00:29:19.096>could <00:29:19.251>edit <00:29:19.407>that <00:29:19.562>item <00:29:19.718>or <00:29:19.873>delete <00:29:20.029>that <00:29:20.185>item

686
00:29:21.065 --> 00:29:24.085
<00:29:21.065>and <00:29:21.205>you <00:29:21.345>show <00:29:21.485>this <00:29:21.625>popover <00:29:21.765>there, <00:29:21.905>then <00:29:22.045>it <00:29:22.185>would <00:29:22.325>really <00:29:22.465>matter

687
00:29:24.095 --> 00:29:25.285
<00:29:24.095>where <00:29:24.362>the <00:29:24.630>list <00:29:24.898>item <00:29:25.166>is

688
00:29:25.285 --> 00:29:26.885
<00:29:25.285>because <00:29:25.518>then <00:29:25.751>you <00:29:25.985>would <00:29:26.218>have <00:29:26.451>the <00:29:26.685>have

689
00:29:26.885 --> 00:29:28.605
<00:29:26.885>to <00:29:27.118>position <00:29:27.351>the <00:29:27.585>popover <00:29:27.818>based <00:29:28.051>on <00:29:28.285>the

690
00:29:28.605 --> 00:29:29.965
<00:29:28.605>availability <00:29:29.013>space <00:29:29.421>on <00:29:29.829>screen.

691
00:29:30.345 --> 00:29:32.405
<00:29:30.345>And <00:29:30.485>this <00:29:30.625>could <00:29:30.765>take <00:29:30.905>a <00:29:31.045>lot <00:29:31.185>of <00:29:31.325>coding <00:29:31.465>if <00:29:31.605>we <00:29:31.745>had

692
00:29:32.405 --> 00:29:33.885
<00:29:32.405>to <00:29:32.849>develop <00:29:33.293>it <00:29:33.737>ourselves.

693
00:29:33.985 --> 00:29:35.085
<00:29:33.985>And <00:29:34.315>not <00:29:34.645>just <00:29:34.975>positioning,

694
00:29:35.085 --> 00:29:38.685
<00:29:35.085>but <00:29:35.225>also <00:29:35.365>in <00:29:35.505>the <00:29:35.645>beginning, <00:29:35.785>where <00:29:35.925>would <00:29:36.065>we <00:29:36.205>show <00:29:36.345>this <00:29:36.485>popover?

695
00:29:39.185 --> 00:29:40.805
<00:29:39.185>So <00:29:39.465>essentially <00:29:39.745>what <00:29:40.024>we <00:29:40.304>are <00:29:40.585>going

696
00:29:40.805 --> 00:29:44.285
<00:29:40.805>to <00:29:40.932>look <00:29:41.059>at <00:29:41.186>is <00:29:41.314>another <00:29:41.441>example <00:29:41.568>with <00:29:41.695>the <00:29:41.823>CDK <00:29:41.950>overlay <00:29:42.077>that <00:29:42.205>we,

697
00:29:44.555 --> 00:29:46.525
<00:29:44.555>that <00:29:44.788>we <00:29:45.021>can <00:29:45.255>get <00:29:45.488>from <00:29:45.721>the <00:29:45.955>C-D-K-A-P-I,

698
00:29:46.745 --> 00:29:49.885
<00:29:46.745>and <00:29:46.885>then <00:29:47.024>we <00:29:47.165>can <00:29:47.304>use <00:29:47.445>this <00:29:47.584>overlay <00:29:47.725>to <00:29:47.864>generate <00:29:48.004>this <00:29:48.145>popover

699
00:29:50.185 --> 00:29:52.085
<00:29:50.185>and <00:29:50.340>kind <00:29:50.496>of <00:29:50.651>play <00:29:50.807>around <00:29:50.962>with <00:29:51.118>the <00:29:51.273>positioning <00:29:51.429>a <00:29:51.585>bit.

700
00:29:52.085 --> 00:29:53.685
<00:29:52.085>And <00:29:52.240>I'm <00:29:52.396>going <00:29:52.551>to <00:29:52.707>show <00:29:52.862>you <00:29:53.018>how <00:29:53.173>cool <00:29:53.329>that <00:29:53.485>is.

701
00:29:53.985 --> 00:29:56.565
<00:29:53.985>So <00:29:54.112>we <00:29:54.239>are <00:29:54.366>going <00:29:54.494>to <00:29:54.621>look <00:29:54.748>at <00:29:54.875>this <00:29:55.003>similar <00:29:55.130>example <00:29:55.257>as <00:29:55.385>before,

702
00:29:56.945 --> 00:29:59.165
<00:29:56.945>but <00:29:57.178>this <00:29:57.411>time <00:29:57.645>what <00:29:57.878>we <00:29:58.111>want <00:29:58.345>is

703
00:29:59.485 --> 00:30:01.245
<00:29:59.485>whenever <00:29:59.685>we <00:29:59.885>click <00:30:00.084>a <00:30:00.284>particular <00:30:00.485>item, <00:30:00.685>we <00:30:00.885>need

704
00:30:01.245 --> 00:30:03.325
<00:30:01.245>to <00:30:01.400>show <00:30:01.556>some <00:30:01.711>options, <00:30:01.867>as <00:30:02.022>I <00:30:02.178>just <00:30:02.333>mentioned <00:30:02.489>with <00:30:02.645>you.

705
00:30:03.705 --> 00:30:06.685
<00:30:03.705>And <00:30:03.845>then <00:30:03.985>we <00:30:04.125>need <00:30:04.264>to <00:30:04.405>see <00:30:04.544>where <00:30:04.685>this <00:30:04.824>popover <00:30:04.965>gets <00:30:05.105>shown.

706
00:30:07.145 --> 00:30:10.725
<00:30:07.145>So <00:30:07.285>if <00:30:07.425>I <00:30:07.565>go <00:30:07.705>to <00:30:07.845>the <00:30:07.985>final <00:30:08.125>example, <00:30:08.264>uh, <00:30:08.405>here <00:30:08.545>is

707
00:30:10.725 --> 00:30:12.245
<00:30:10.725>what <00:30:11.067>it <00:30:11.408>essentially <00:30:11.751>looks <00:30:12.092>like.

708
00:30:12.745 --> 00:30:16.245
<00:30:12.745>So <00:30:12.872>if <00:30:12.999>I <00:30:13.126>click <00:30:13.254>on <00:30:13.381>this <00:30:13.508>item, <00:30:13.635>we <00:30:13.763>get <00:30:13.890>this <00:30:14.017>popover <00:30:14.145>shown,

709
00:30:16.585 --> 00:30:18.405
<00:30:16.585>you <00:30:16.785>can <00:30:16.985>see <00:30:17.185>that <00:30:17.385>if <00:30:17.585>I <00:30:17.785>scroll <00:30:17.985>up

710
00:30:18.405 --> 00:30:21.485
<00:30:18.405>and <00:30:18.532>down, <00:30:18.659>the <00:30:18.786>position <00:30:18.914>of <00:30:19.041>the <00:30:19.168>pop <00:30:19.295>is <00:30:19.423>still <00:30:19.550>remains <00:30:19.677>the <00:30:19.805>same,

711
00:30:21.485 --> 00:30:24.445
<00:30:21.485>which <00:30:21.625>means <00:30:21.764>that <00:30:21.905>angular <00:30:22.044>c, <00:30:22.185>DK <00:30:22.324>knows <00:30:22.465>where <00:30:22.604>to <00:30:22.745>position <00:30:22.885>it

712
00:30:24.515 --> 00:30:27.605
<00:30:24.515>with <00:30:24.748>respective <00:30:24.981>to <00:30:25.215>its <00:30:25.448>trigger, <00:30:25.681>for <00:30:25.915>instance.

713
00:30:27.625 --> 00:30:30.005
<00:30:27.625>And <00:30:27.800>here, <00:30:27.975>this, <00:30:28.150>this <00:30:28.325>list <00:30:28.500>item <00:30:28.675>is <00:30:28.850>the <00:30:29.025>trigger.

714
00:30:30.515 --> 00:30:33.205
<00:30:30.515>Then <00:30:30.642>we <00:30:30.769>can <00:30:30.896>also <00:30:31.024>configure <00:30:31.151>would <00:30:31.278>it <00:30:31.405>be <00:30:31.533>shown <00:30:31.660>at <00:30:31.787>the <00:30:31.915>bottom

715
00:30:33.205 --> 00:30:35.205
<00:30:33.205>right, <00:30:33.485>uh, <00:30:33.764>the <00:30:34.044>top <00:30:34.324>left, <00:30:34.605>uh,

716
00:30:35.205 --> 00:30:36.845
<00:30:35.205>and <00:30:35.438>the <00:30:35.671>other <00:30:35.905>possible <00:30:36.138>options <00:30:36.371>as <00:30:36.605>well.

717
00:30:36.985 --> 00:30:39.445
<00:30:36.985>And <00:30:37.140>then <00:30:37.296>what <00:30:37.451>should <00:30:37.607>be <00:30:37.762>the <00:30:37.918>direction <00:30:38.073>of <00:30:38.229>this <00:30:38.385>popover?

718
00:30:39.445 --> 00:30:42.685
<00:30:39.445>Should <00:30:39.620>it <00:30:39.794>be, <00:30:39.970>uh, <00:30:40.145>shown <00:30:40.320>leftwards <00:30:40.495>or, <00:30:40.669>or <00:30:40.845>rightwards?

719
00:30:42.785 --> 00:30:44.085
<00:30:42.785>I'm <00:30:42.952>not <00:30:43.119>sure <00:30:43.286>if <00:30:43.453>those <00:30:43.620>are <00:30:43.787>even <00:30:43.955>words,

720
00:30:44.265 --> 00:30:47.325
<00:30:44.265>but <00:30:44.420>yeah, <00:30:44.576>uh, <00:30:44.731>I, <00:30:44.887>I <00:30:45.042>know <00:30:45.198>you <00:30:45.353>get <00:30:45.509>the <00:30:45.665>point.

721
00:30:47.785 --> 00:30:50.325
<00:30:47.785>So <00:30:47.960>if <00:30:48.135>I <00:30:48.310>click <00:30:48.485>it <00:30:48.660>here, <00:30:48.835>it <00:30:49.010>shows <00:30:49.185>downwards.

722
00:30:50.545 --> 00:30:53.245
<00:30:50.545>Uh, <00:30:50.672>if <00:30:50.799>I <00:30:50.926>click <00:30:51.054>outside, <00:30:51.181>you <00:30:51.308>can <00:30:51.435>see <00:30:51.563>that <00:30:51.690>it <00:30:51.817>gets <00:30:51.945>closed.

723
00:30:53.825 --> 00:30:56.765
<00:30:53.825>Uh, <00:30:53.980>if <00:30:54.136>I <00:30:54.291>want <00:30:54.447>to, <00:30:54.602>uh, <00:30:54.758>want <00:30:54.913>to <00:30:55.069>make <00:30:55.225>sure

724
00:30:56.765 --> 00:30:58.885
<00:30:56.765>that <00:30:56.940>when <00:30:57.115>this <00:30:57.290>popover <00:30:57.465>is <00:30:57.640>open, <00:30:57.815>I'm <00:30:57.990>not <00:30:58.165>able

725
00:30:58.885 --> 00:31:01.685
<00:30:58.885>to <00:30:59.040>click <00:30:59.196>other <00:30:59.351>items, <00:30:59.507>I <00:30:59.662>can <00:30:59.818>provide <00:30:59.973>a <00:31:00.129>backdrop, <00:31:00.285>uh,

726
00:31:01.685 --> 00:31:04.525
<00:31:01.685>with <00:31:01.860>this, <00:31:02.034>uh, <00:31:02.210>CDK <00:31:02.385>over <00:31:02.560>API, <00:31:02.735>if <00:31:02.909>I <00:31:03.085>wanted

727
00:31:04.625 --> 00:31:07.845
<00:31:04.625>to <00:31:04.752>allow <00:31:04.879>the <00:31:05.006>user <00:31:05.134>even <00:31:05.261>to <00:31:05.388>click <00:31:05.515>when <00:31:05.643>this <00:31:05.770>popover <00:31:05.897>is <00:31:06.025>open,

728
00:31:07.845 --> 00:31:08.885
<00:31:07.845>that <00:31:08.157>is <00:31:08.469>also <00:31:08.781>possible.

729
00:31:09.265 --> 00:31:11.925
<00:31:09.265>Uh, <00:31:09.440>but <00:31:09.615>if <00:31:09.790>I <00:31:09.965>open <00:31:10.140>a <00:31:10.315>popover <00:31:10.490>right <00:31:10.665>here

730
00:31:12.585 --> 00:31:13.645
<00:31:12.585>and <00:31:12.823>you, <00:31:13.062>you <00:31:13.300>can <00:31:13.539>see

731
00:31:13.725 --> 00:31:15.565
<00:31:13.725>that <00:31:13.958>we <00:31:14.191>don't <00:31:14.425>have <00:31:14.658>much <00:31:14.891>space <00:31:15.125>downwards.

732
00:31:15.745 --> 00:31:17.685
<00:31:15.745>So <00:31:16.024>this <00:31:16.304>popover <00:31:16.584>now <00:31:16.864>opens <00:31:17.145>upwards,

733
00:31:17.825 --> 00:31:21.645
<00:31:17.825>and <00:31:17.952>this <00:31:18.079>is <00:31:18.206>all <00:31:18.334>being <00:31:18.461>handled <00:31:18.588>by <00:31:18.715>the <00:31:18.843>CDK, <00:31:18.970>this <00:31:19.097>tiny <00:31:19.225>arrow

734
00:31:21.755 --> 00:31:24.485
<00:31:21.755>that <00:31:21.910>you <00:31:22.066>see, <00:31:22.221>which <00:31:22.377>indicates <00:31:22.532>the <00:31:22.688>position <00:31:22.843>that <00:31:22.999>is <00:31:23.155>not

735
00:31:24.645 --> 00:31:26.045
<00:31:24.645>provided <00:31:24.825>by <00:31:25.005>the <00:31:25.185>CDK, <00:31:25.365>because <00:31:25.545>as <00:31:25.725>I <00:31:25.905>said,

736
00:31:26.125 --> 00:31:27.445
<00:31:26.125>CDK <00:31:26.521>only <00:31:26.917>provides <00:31:27.312>functionality.

737
00:31:27.665 --> 00:31:28.925
<00:31:27.665>We <00:31:27.891>are <00:31:28.118>supposed <00:31:28.345>to <00:31:28.572>style <00:31:28.799>everything.

738
00:31:29.065 --> 00:31:31.005
<00:31:29.065>So <00:31:29.298>I'm <00:31:29.531>using <00:31:29.765>my <00:31:29.998>own, <00:31:30.231>uh, <00:31:30.465>logic

739
00:31:31.265 --> 00:31:35.165
<00:31:31.265>or <00:31:31.392>my <00:31:31.519>own <00:31:31.646>code <00:31:31.774>to <00:31:31.901>sort <00:31:32.028>of, <00:31:32.155>uh, <00:31:32.283>move <00:31:32.410>this <00:31:32.537>arrow <00:31:32.665>up

740
00:31:35.165 --> 00:31:36.405
<00:31:35.165>or <00:31:35.388>down <00:31:35.611>based <00:31:35.834>on <00:31:36.057>the <00:31:36.281>position.

741
00:31:36.705 --> 00:31:39.685
<00:31:36.705>But <00:31:36.845>what's <00:31:36.985>important <00:31:37.125>is <00:31:37.264>that <00:31:37.405>if <00:31:37.544>I <00:31:37.685>sort <00:31:37.824>of <00:31:37.965>go <00:31:38.105>downwards

742
00:31:40.105 --> 00:31:44.045
<00:31:40.105>and, <00:31:40.232>uh, <00:31:40.359>let's <00:31:40.486>say <00:31:40.614>if <00:31:40.741>I <00:31:40.868>open <00:31:40.995>this, <00:31:41.123>this <00:31:41.250>guy <00:31:41.377>here, <00:31:41.505>uh,

743
00:31:44.065 --> 00:31:46.085
<00:31:44.065>and <00:31:44.240>if <00:31:44.415>I <00:31:44.590>try <00:31:44.765>to, <00:31:44.940>no, <00:31:45.115>not <00:31:45.290>this <00:31:45.465>one,

744
00:31:46.085 --> 00:31:48.885
<00:31:46.085>but <00:31:46.212>let's <00:31:46.339>say <00:31:46.466>this <00:31:46.594>one <00:31:46.721>right <00:31:46.848>now <00:31:46.975>we <00:31:47.103>have <00:31:47.230>a <00:31:47.357>space <00:31:47.485>downwards.

745
00:31:48.905 --> 00:31:52.245
<00:31:48.905>And <00:31:49.021>even <00:31:49.138>in <00:31:49.254>this <00:31:49.371>situation, <00:31:49.488>if <00:31:49.605>I <00:31:49.721>try <00:31:49.838>to <00:31:49.955>scroll, <00:31:50.071>you <00:31:50.188>can <00:31:50.305>see

746
00:31:52.245 --> 00:31:55.405
<00:31:52.245>that <00:31:52.478>angular <00:31:52.711>CDK <00:31:52.945>automatically <00:31:53.178>positions <00:31:53.411>it <00:31:53.645>according

747
00:31:55.405 --> 00:31:56.845
<00:31:55.405>to <00:31:55.837>the <00:31:56.269>available <00:31:56.701>space.

748
00:31:57.145 --> 00:31:59.285
<00:31:57.145>And <00:31:57.300>that <00:31:57.456>is <00:31:57.611>really <00:31:57.767>handy <00:31:57.922>when <00:31:58.078>we <00:31:58.233>are <00:31:58.389>talking <00:31:58.545>about

749
00:31:59.285 --> 00:32:01.445
<00:31:59.285>accessibility, <00:31:59.565>a <00:31:59.845>really <00:32:00.125>good <00:32:00.405>user <00:32:00.685>experience.

750
00:32:01.585 --> 00:32:04.165
<00:32:01.585>So <00:32:01.692>this <00:32:01.800>is <00:32:01.908>what <00:32:02.015>you <00:32:02.123>could <00:32:02.231>use <00:32:02.338>out <00:32:02.446>of <00:32:02.554>the <00:32:02.661>box <00:32:02.769>from <00:32:02.877>Angular <00:32:02.985>C,

751
00:32:04.165 --> 00:32:07.605
<00:32:04.165>DK, <00:32:04.320>and <00:32:04.476>uh, <00:32:04.631>and <00:32:04.787>yeah, <00:32:04.942>uh, <00:32:05.098>I <00:32:05.253>think <00:32:05.409>that's, <00:32:05.565>uh,

752
00:32:07.605 --> 00:32:09.525
<00:32:07.605>really <00:32:07.955>cool <00:32:08.305>in <00:32:08.655>my <00:32:09.005>opinion.

753
00:32:10.665 --> 00:32:14.645
<00:32:10.665>Now, <00:32:10.840>a <00:32:11.014>shameless <00:32:11.190>plug, <00:32:11.365>um, <00:32:11.540>for, <00:32:11.715>for <00:32:11.889>this <00:32:12.065>talk.

754
00:32:14.985 --> 00:32:18.285
<00:32:14.985>So <00:32:15.101>all <00:32:15.218>of <00:32:15.334>the <00:32:15.451>examples <00:32:15.568>that <00:32:15.685>I <00:32:15.801>showed <00:32:15.918>you <00:32:16.034>with <00:32:16.151>the <00:32:16.268>Angular <00:32:16.385>c,

755
00:32:18.285 --> 00:32:22.165
<00:32:18.285>DK, <00:32:18.425>they <00:32:18.565>all <00:32:18.705>are <00:32:18.845>from <00:32:18.985>my <00:32:19.125>book <00:32:19.265>that <00:32:19.405>I've <00:32:19.545>written, <00:32:19.685>um,

756
00:32:22.445 --> 00:32:23.885
<00:32:22.445>spanning <00:32:22.877>around <00:32:23.309>a <00:32:23.741>year.

757
00:32:24.145 --> 00:32:27.125
<00:32:24.145>And <00:32:24.300>I <00:32:24.456>compiled <00:32:24.611>in <00:32:24.767>90 <00:32:24.922>recipes <00:32:25.078>that <00:32:25.233>you <00:32:25.389>can <00:32:25.545>use

758
00:32:27.125 --> 00:32:28.405
<00:32:27.125>to <00:32:27.413>polish <00:32:27.701>your <00:32:27.989>angular <00:32:28.277>skills.

759
00:32:28.905 --> 00:32:31.205
<00:32:28.905>And <00:32:29.080>the <00:32:29.254>all <00:32:29.430>these <00:32:29.605>recipes <00:32:29.780>that <00:32:29.955>I <00:32:30.129>showed <00:32:30.305>you,

760
00:32:31.255 --> 00:32:34.165
<00:32:31.255>these <00:32:31.410>are <00:32:31.566>from <00:32:31.721>only <00:32:31.877>one <00:32:32.032>chapter <00:32:32.188>out <00:32:32.343>of <00:32:32.499>13 <00:32:32.655>chapters.

761
00:32:34.305 --> 00:32:36.845
<00:32:34.305>So <00:32:34.480>we <00:32:34.655>have <00:32:34.830>chapters <00:32:35.005>like <00:32:35.180>unit <00:32:35.355>testing, <00:32:35.530>end-to-end <00:32:35.705>testing,

762
00:32:37.165 --> 00:32:39.885
<00:32:37.165>angular <00:32:37.514>animations, <00:32:37.865>angular <00:32:38.215>forms, <00:32:38.565>um,

763
00:32:40.835 --> 00:32:43.565
<00:32:40.835>performance <00:32:41.068>optimizations <00:32:41.301>with <00:32:41.535>angular <00:32:41.768>progressive <00:32:42.001>web <00:32:42.235>apps

764
00:32:43.565 --> 00:32:44.805
<00:32:43.565>with <00:32:43.937>Angular <00:32:44.309>and <00:32:44.681>whatnot.

765
00:32:45.265 --> 00:32:46.285
<00:32:45.265>So <00:32:45.494>these <00:32:45.724>are <00:32:45.953>just <00:32:46.183>five

766
00:32:46.285 --> 00:32:49.525
<00:32:46.285>or <00:32:46.412>six <00:32:46.539>recipes <00:32:46.666>of <00:32:46.794>the <00:32:46.921>90 <00:32:47.048>recipes <00:32:47.175>that <00:32:47.303>you <00:32:47.430>can <00:32:47.557>work <00:32:47.685>with.

767
00:32:49.585 --> 00:32:52.205
<00:32:49.585>So <00:32:49.760>this <00:32:49.935>is <00:32:50.110>gonna <00:32:50.285>be <00:32:50.460>released <00:32:50.635>in <00:32:50.810>July <00:32:50.985>mid,

768
00:32:52.605 --> 00:32:53.965
<00:32:52.605>I <00:32:52.849>think <00:32:53.094>July <00:32:53.339>15th <00:32:53.584>most <00:32:53.829>likely.

769
00:32:54.305 --> 00:32:56.245
<00:32:54.305>Uh, <00:32:54.505>and <00:32:54.705>you <00:32:54.905>can <00:32:55.105>already <00:32:55.305>pre-order <00:32:55.505>this <00:32:55.705>book

770
00:32:56.345 --> 00:32:57.845
<00:32:56.345>to <00:32:56.682>polish <00:32:57.020>your <00:32:57.357>angular <00:32:57.695>skills.

771
00:32:57.905 --> 00:32:59.645
<00:32:57.905>And <00:32:58.105>you <00:32:58.305>can <00:32:58.504>always <00:32:58.705>let <00:32:58.905>me <00:32:59.105>know, <00:32:59.305>uh,

772
00:32:59.665 --> 00:33:01.725
<00:32:59.665>on <00:32:59.840>my <00:33:00.014>socials <00:33:00.190>if <00:33:00.365>you <00:33:00.540>find <00:33:00.715>this <00:33:00.889>book <00:33:01.065>helpful,

773
00:33:01.735 --> 00:33:03.205
<00:33:01.735>which <00:33:01.955>I, <00:33:02.176>I'm <00:33:02.396>pretty <00:33:02.617>sure <00:33:02.837>you <00:33:03.058>would.

774
00:33:03.465 --> 00:33:05.565
<00:33:03.465>Um, <00:33:03.639>I'm <00:33:03.814>telling <00:33:03.990>from <00:33:04.165>the <00:33:04.340>experience <00:33:04.514>of <00:33:04.689>writing <00:33:04.865>it

775
00:33:06.505 --> 00:33:08.085
<00:33:06.505>now <00:33:06.705>towards <00:33:06.905>the <00:33:07.105>end <00:33:07.305>of, <00:33:07.505>uh, <00:33:07.705>the <00:33:07.905>talk,

776
00:33:08.165 --> 00:33:09.605
<00:33:08.165>I <00:33:08.380>would <00:33:08.597>leave <00:33:08.813>one <00:33:09.029>message <00:33:09.245>for <00:33:09.461>you.

777
00:33:09.785 --> 00:33:11.205
<00:33:09.785>Uh, <00:33:10.104>if <00:33:10.424>you <00:33:10.743>like <00:33:11.062>snowboarding

778
00:33:11.465 --> 00:33:14.325
<00:33:11.465>and <00:33:11.605>uh, <00:33:11.745>you <00:33:11.885>wanna <00:33:12.024>take <00:33:12.165>your <00:33:12.304>dog <00:33:12.445>two <00:33:12.584>snowboarding <00:33:12.725>as <00:33:12.865>well,

779
00:33:14.745 --> 00:33:18.165
<00:33:14.745>uh, <00:33:14.885>don't <00:33:15.024>do <00:33:15.165>that <00:33:15.304>because <00:33:15.445>you <00:33:15.584>would <00:33:15.725>potentially <00:33:15.864>end <00:33:16.004>up <00:33:16.145>in

780
00:33:18.165 --> 00:33:20.205
<00:33:18.165>something <00:33:18.398>like <00:33:18.631>this, <00:33:18.865>which <00:33:19.098>might <00:33:19.331>be <00:33:19.565>happy

781
00:33:20.265 --> 00:33:22.605
<00:33:20.265>or <00:33:20.392>sad <00:33:20.519>for <00:33:20.646>you <00:33:20.774>depending <00:33:20.901>on <00:33:21.028>the <00:33:21.155>kind <00:33:21.283>of <00:33:21.410>person <00:33:21.537>you <00:33:21.665>are.

782
00:33:23.665 --> 00:33:26.325
<00:33:23.665>And <00:33:23.820>with <00:33:23.976>that, <00:33:24.131>I'm <00:33:24.287>gonna <00:33:24.442>thank <00:33:24.598>you, <00:33:24.753>uh, <00:33:24.909>via <00:33:25.065>developers

783
00:33:26.345 --> 00:33:27.565
<00:33:26.345>for <00:33:26.711>having <00:33:27.077>me <00:33:27.443>today.

784
00:33:27.745 --> 00:33:29.845
<00:33:27.745>Um, <00:33:27.919>as <00:33:28.094>I <00:33:28.270>said, <00:33:28.445>if <00:33:28.620>you <00:33:28.794>wanna <00:33:28.969>follow <00:33:29.145>me,

785
00:33:29.845 --> 00:33:32.885
<00:33:29.845>you <00:33:29.985>can <00:33:30.125>follow <00:33:30.265>me <00:33:30.405>on <00:33:30.545>my <00:33:30.685>socials, <00:33:30.825>just <00:33:30.965>go <00:33:31.105>to <00:33:31.245>s.com/socials

786
00:33:32.885 --> 00:33:35.125
<00:33:32.885>and <00:33:33.040>you <00:33:33.196>should <00:33:33.351>find <00:33:33.507>all <00:33:33.662>the <00:33:33.818>links <00:33:33.973>that <00:33:34.129>you <00:33:34.285>need.

787
00:33:35.505 --> 00:33:38.325
<00:33:35.505>Um, <00:33:35.680>and <00:33:35.855>yeah, <00:33:36.030>let's <00:33:36.205>stay <00:33:36.380>in <00:33:36.555>charge. <00:33:36.730>Thank <00:33:36.905>you.

788
00:33:40.155 --> 00:33:43.865
<00:33:40.155>Thank <00:33:40.310>you <00:33:40.466>so <00:33:40.621>much <00:33:40.777>for <00:33:40.932>your, <00:33:41.088>uh, <00:33:41.243>talk, <00:33:41.399>uh, <00:33:41.555>ed.

789
00:33:43.925 --> 00:33:46.105
<00:33:43.925>Uh, <00:33:44.274>that's <00:33:44.625>been <00:33:44.975>quite <00:33:45.325>interesting.

790
00:33:46.495 --> 00:33:50.265
<00:33:46.495>It's <00:33:46.622>quite <00:33:46.749>nice <00:33:46.876>how <00:33:47.004>fast <00:33:47.131>you <00:33:47.258>can <00:33:47.385>do <00:33:47.513>complex <00:33:47.640>things <00:33:47.767>with <00:33:47.895>uh,

791
00:33:51.255 --> 00:33:52.705
<00:33:51.255>this <00:33:51.516>tool <00:33:51.777>you <00:33:52.038>just <00:33:52.299>showed <00:33:52.560>us.

792
00:33:52.965 --> 00:33:55.985
<00:33:52.965>Mm-hmm. <00:33:53.198>Um, <00:33:53.431>alright, <00:33:53.665>we <00:33:53.898>have <00:33:54.131>some, <00:33:54.365>uh,

793
00:33:56.425 --> 00:33:59.065
<00:33:56.425>questions <00:33:56.705>in <00:33:56.985>the, <00:33:57.264>from <00:33:57.544>the <00:33:57.825>audience.

794
00:33:59.445 --> 00:34:03.465
<00:33:59.445>Let <00:33:59.620>me <00:33:59.794>just <00:33:59.970>go, <00:34:00.145>uh, <00:34:00.320>one <00:34:00.495>is <00:34:00.669>from <00:34:00.845>uh,

795
00:34:05.375 --> 00:34:08.385
<00:34:05.375>Giacomo <00:34:06.075>Giacomo <00:34:06.775>Barbado.

796
00:34:09.455 --> 00:34:10.825
<00:34:09.455>Most <00:34:09.866>apps <00:34:10.277>are <00:34:10.687>responsive.

797
00:34:11.605 --> 00:34:14.985
<00:34:11.605>How <00:34:11.780>to <00:34:11.955>define <00:34:12.130>a <00:34:12.304>responsive <00:34:12.480>item <00:34:12.655>size <00:34:12.830>when <00:34:13.005>using

798
00:34:15.055 --> 00:34:16.105
<00:34:15.054>virtual <00:34:16.000>scroll.

799
00:34:16.405 --> 00:34:18.065
<00:34:16.405>Is <00:34:16.755>item <00:34:17.105>size <00:34:17.455>a <00:34:17.805>requirement?

800
00:34:19.435 --> 00:34:20.495
<00:34:19.435>That's <00:34:19.673>a <00:34:19.911>really <00:34:20.150>good <00:34:20.389>question.

801
00:34:20.955 --> 00:34:23.815
<00:34:20.955>So <00:34:21.154>item <00:34:21.355>size <00:34:21.554>is <00:34:21.755>a <00:34:21.955>requirement <00:34:22.154>to <00:34:22.355>identify

802
00:34:24.075 --> 00:34:25.775
<00:34:24.074>how <00:34:24.355>many <00:34:24.634>items <00:34:24.915>we <00:34:25.194>should <00:34:25.475>render.

803
00:34:25.835 --> 00:34:29.775
<00:34:25.835>It <00:34:25.975>doesn't <00:34:26.115>have <00:34:26.255>to <00:34:26.395>be <00:34:26.534>the <00:34:26.675>exact <00:34:26.815>size <00:34:26.955>of <00:34:27.095>the <00:34:27.235>element,

804
00:34:30.355 --> 00:34:35.055
<00:34:30.355>but <00:34:30.495>we <00:34:30.635>should <00:34:30.775>be <00:34:30.915>sort <00:34:31.054>of <00:34:31.195>smart <00:34:31.335>about <00:34:31.475>providing, <00:34:31.615>um, <00:34:31.755>so

805
00:34:35.055 --> 00:34:37.695
<00:34:35.054>to <00:34:35.254>say <00:34:35.455>a <00:34:35.654>more <00:34:35.855>higher <00:34:36.054>item <00:34:36.254>size <00:34:36.455>instead

806
00:34:37.695 --> 00:34:38.775
<00:34:37.695>of <00:34:37.938>the <00:34:38.181>lower <00:34:38.424>item <00:34:38.667>size.

807
00:34:38.995 --> 00:34:41.655
<00:34:38.995>And <00:34:39.122>the <00:34:39.249>reason <00:34:39.376>for <00:34:39.504>that <00:34:39.631>is <00:34:39.758>if <00:34:39.885>you <00:34:40.013>get <00:34:40.140>a <00:34:40.267>big <00:34:40.395>list

808
00:34:42.235 --> 00:34:44.895
<00:34:42.235>but <00:34:42.375>you <00:34:42.515>have, <00:34:42.655>uh, <00:34:42.795>reduced <00:34:42.935>the <00:34:43.075>height <00:34:43.215>of <00:34:43.355>the <00:34:43.495>items, <00:34:43.635>uh,

809
00:34:44.895 --> 00:34:46.855
<00:34:44.895>and <00:34:45.094>let's <00:34:45.295>say <00:34:45.495>you <00:34:45.695>say <00:34:45.895>you <00:34:46.094>end <00:34:46.295>up,

810
00:34:46.855 --> 00:34:49.575
<00:34:46.855>you <00:34:46.995>might <00:34:47.135>end <00:34:47.275>up <00:34:47.415>showing <00:34:47.554>three <00:34:47.695>items <00:34:47.835>rather <00:34:47.975>than <00:34:48.115>six <00:34:48.255>items,

811
00:34:49.995 --> 00:34:53.655
<00:34:49.995>but <00:34:50.150>if <00:34:50.306>you <00:34:50.461>have <00:34:50.617>rendered <00:34:50.772>10 <00:34:50.928>items <00:34:51.083>instead <00:34:51.239>of <00:34:51.395>six,

812
00:34:53.675 --> 00:34:55.175
<00:34:53.675>that's <00:34:53.945>even <00:34:54.215>fine <00:34:54.485>because <00:34:54.755>then <00:34:55.025>you

813
00:34:55.175 --> 00:34:56.215
<00:34:55.175>can <00:34:55.362>just <00:34:55.549>scroll <00:34:55.736>and <00:34:55.923>see <00:34:56.111>them.

814
00:34:56.475 --> 00:35:00.095
<00:34:56.475>So <00:34:56.602>the <00:34:56.729>item <00:34:56.856>size <00:34:56.984>is <00:34:57.111>for <00:34:57.238>angular <00:34:57.365>to <00:34:57.493>sort <00:34:57.620>of <00:34:57.747>list <00:34:57.875>down

815
00:35:00.155 --> 00:35:02.415
<00:35:00.155>how <00:35:00.330>many <00:35:00.505>items <00:35:00.680>should <00:35:00.855>I <00:35:01.030>render <00:35:01.205>in <00:35:01.380>one <00:35:01.555>go.

816
00:35:02.795 --> 00:35:04.455
<00:35:02.795>Um, <00:35:02.995>and <00:35:03.195>it <00:35:03.395>doesn't <00:35:03.595>have <00:35:03.795>to <00:35:03.995>be <00:35:04.195>accurate.

817
00:35:04.475 --> 00:35:07.095
<00:35:04.475>So <00:35:04.602>you <00:35:04.729>have <00:35:04.856>to <00:35:04.984>make <00:35:05.111>sure <00:35:05.238>that <00:35:05.365>you <00:35:05.493>always <00:35:05.620>provide <00:35:05.747>a <00:35:05.875>higher

818
00:35:07.795 --> 00:35:10.375
<00:35:07.795>or, <00:35:07.950>or <00:35:08.106>if <00:35:08.261>you <00:35:08.417>know <00:35:08.572>that <00:35:08.728>your <00:35:08.883>application <00:35:09.039>is <00:35:09.195>responsive,

819
00:35:10.395 --> 00:35:13.575
<00:35:10.395>you <00:35:10.511>know <00:35:10.628>that <00:35:10.745>what <00:35:10.861>is <00:35:10.978>the <00:35:11.095>maximum <00:35:11.211>size <00:35:11.328>that <00:35:11.445>this <00:35:11.561>guy <00:35:11.678>can <00:35:11.795>get

820
00:35:13.835 --> 00:35:15.295
<00:35:13.835>and <00:35:14.054>then <00:35:14.273>you <00:35:14.492>can <00:35:14.711>just <00:35:14.930>provide <00:35:15.149>that.

821
00:35:17.305 --> 00:35:19.475
<00:35:17.305>Alright, <00:35:17.771>thank <00:35:18.238>you <00:35:18.705>Mohammed.

822
00:35:20.175 --> 00:35:24.115
<00:35:20.175>Um, <00:35:20.330>another <00:35:20.486>question <00:35:20.641>from, <00:35:20.797>uh, <00:35:20.952>the <00:35:21.108>audience <00:35:21.263>from <00:35:21.419>Jake <00:35:21.575>Lee.

823
00:35:25.015 --> 00:35:28.115
<00:35:25.015>Uh, <00:35:25.154>what's <00:35:25.295>the <00:35:25.435>best <00:35:25.575>way <00:35:25.714>to <00:35:25.855>start <00:35:25.995>with <00:35:26.134>Angular <00:35:26.275>for <00:35:26.415>someone

824
00:35:28.215 --> 00:35:31.115
<00:35:28.215>who <00:35:28.390>come, <00:35:28.565>who <00:35:28.740>is <00:35:28.915>coming <00:35:29.090>from <00:35:29.265>the <00:35:29.440>VTS <00:35:29.615>background?

825
00:35:32.335 --> 00:35:33.795
<00:35:32.335>Uh, <00:35:32.773>really <00:35:33.211>good <00:35:33.649>question.

826
00:35:33.895 --> 00:35:36.035
<00:35:33.895>So <00:35:34.095>I <00:35:34.295>can <00:35:34.495>recommend <00:35:34.695>two <00:35:34.895>resources <00:35:35.095>for <00:35:35.295>that.

827
00:35:36.135 --> 00:35:37.675
<00:35:36.135>One <00:35:36.597>is <00:35:37.059>the <00:35:37.521>angular.io,

828
00:35:37.685 --> 00:35:40.195
<00:35:37.685>which <00:35:37.840>has <00:35:37.996>a <00:35:38.151>really <00:35:38.307>good <00:35:38.462>tutorial <00:35:38.618>out <00:35:38.773>of <00:35:38.929>the <00:35:39.085>box.

829
00:35:40.495 --> 00:35:42.675
<00:35:40.495>And <00:35:40.634>the <00:35:40.775>second <00:35:40.915>one <00:35:41.055>is <00:35:41.194>my <00:35:41.335>book. <00:35:41.475>Uh, <00:35:41.615>go <00:35:41.755>buy <00:35:41.895>it.

830
00:35:45.425 --> 00:35:45.715
Nice.