Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,980 --> 00:00:01,240
All right.
2
00:00:01,270 --> 00:00:04,450
So we just covered a little side topic so let's get back on track.
3
00:00:04,490 --> 00:00:09,330
Remember our whole goal right now is to create that card component and the goal is to have some H T
4
00:00:09,330 --> 00:00:11,630
mole inside there that is reusable in nature.
5
00:00:12,140 --> 00:00:16,070
Basically we want to take a lot of that each team out that is currently inside of the app component
6
00:00:16,100 --> 00:00:21,320
HDMI file and display this card related stuff right here multiple times.
7
00:00:21,390 --> 00:00:27,370
So we need to take this big block of HMO and move it over to our card component template file though
8
00:00:27,620 --> 00:00:33,010
again inside of app component each team l going to find where we have div with class of card.
9
00:00:33,170 --> 00:00:38,660
I'm going to select everything down to the very bottom of the file I'll then cut all this stuff.
10
00:00:38,760 --> 00:00:43,290
Well then go over to our card components but here's the template file.
11
00:00:43,450 --> 00:00:49,730
I'm going to remove that paragraph element and then I'll paste everything inside OK.
12
00:00:49,800 --> 00:00:52,110
I'm now going to save both these different files.
13
00:00:52,290 --> 00:00:56,960
And then finally I'm going to go over to the browser and see what we get back over here.
14
00:00:56,970 --> 00:01:01,920
You'll notice that well we still see our card over back in that original scenario where the card is
15
00:01:01,920 --> 00:01:04,860
stretching up to fill the entire screen.
16
00:01:04,890 --> 00:01:09,230
Remember we had previously solve this by using a little custom CSX.
17
00:01:09,460 --> 00:01:13,700
The why did moving that each team l break our CSX.
18
00:01:13,730 --> 00:01:19,980
Well it's a really simple reason Mary recall looking at this diagram just a little bit ago and I'd said
19
00:01:20,010 --> 00:01:26,640
that any CSX that we placed inside of our app component CSX file was only going to effect each CML created
20
00:01:26,640 --> 00:01:28,360
by our app component.
21
00:01:28,470 --> 00:01:31,590
That is exactly what we are currently seeing on the screen.
22
00:01:31,650 --> 00:01:37,860
We currently have a little bit of a mismatch here here's what we just had a second ago we had our component
23
00:01:37,860 --> 00:01:44,340
template file that created an element with class cart and then inside of the accompanying CSX file we
24
00:01:44,340 --> 00:01:50,580
had a selector specifically or that element we have now moved that element right there into another
25
00:01:50,580 --> 00:01:51,450
template file.
26
00:01:51,480 --> 00:01:59,360
Now it's inside of card component HDL the app components the SS file can not affect any HCM well placed
27
00:01:59,360 --> 00:02:01,180
inside of another file.
28
00:02:01,480 --> 00:02:05,400
So in other words that rule is not affecting that element anymore.
29
00:02:05,410 --> 00:02:11,570
There is no cross over though if we want to have this rule affect that element we have to move that
30
00:02:11,570 --> 00:02:13,640
rule over to the other component as well.
31
00:02:15,100 --> 00:02:18,790
That's exactly what we're going to do back inside of my editor.
32
00:02:18,910 --> 00:02:26,660
I will find the app component that's the SS file here's that selector I'm going to cut that I'll take
33
00:02:26,660 --> 00:02:33,720
it over to the card components the SS file and paste that selector inside all then save both these files
34
00:02:34,110 --> 00:02:38,070
and then let's go check our browser once again over here.
35
00:02:38,070 --> 00:02:42,720
Now my card is back to that nice slim size all right.
36
00:02:42,730 --> 00:02:48,130
Just one more time I want to repeat that this entire idea of CSF scoping that we just saw in action
37
00:02:48,400 --> 00:02:52,750
is kind of like magic in normal CSX running inside the browser.
38
00:02:52,750 --> 00:02:56,510
Any rule we put together is going to affect every element inside the screen.
39
00:02:56,530 --> 00:03:01,870
That's normal CSX and so angular has a little bit of built in magic to make sure that we've we've got
40
00:03:01,870 --> 00:03:03,520
some CSX inside of one file.
41
00:03:03,520 --> 00:03:10,190
It's only going to affect elements that are created inside of that specific template.
42
00:03:10,240 --> 00:03:15,750
Another thing I want to point out just to make sure it's really crystal clear our app component template
43
00:03:16,020 --> 00:03:18,230
reads an instance of app card.
44
00:03:18,270 --> 00:03:22,120
So technically we are showing the card inside of our app component.
45
00:03:22,200 --> 00:03:28,170
Nonetheless the CSX that we tied to our app component is not going to affect anything that gets placed
46
00:03:28,170 --> 00:03:30,330
inside of that app card component.
47
00:03:30,740 --> 00:03:35,910
But really when it comes down to figuring out how CSX works we really say take a look at your template
48
00:03:35,910 --> 00:03:36,540
file.
49
00:03:36,690 --> 00:03:42,570
You can only write CSX that is going to affect the exact elements that are listed inside of here.
50
00:03:42,570 --> 00:03:44,640
So in other words right now are app components.
51
00:03:44,640 --> 00:03:46,380
Yes that's file that is now empty.
52
00:03:46,380 --> 00:03:51,750
We can only write CSX inside there that is going to affect the app dash card element itself.
53
00:03:51,750 --> 00:03:55,090
We really can't affect anything else OK.
54
00:03:55,210 --> 00:03:59,500
So now that we've got a better understanding of the CSX stuff and we've really seen this kind of scoping
55
00:03:59,560 --> 00:04:03,250
action while scoping stuff in action I should say.
56
00:04:03,250 --> 00:04:07,390
Well let's take one more pause and start to move on to the next video where we're now going to start
57
00:04:07,390 --> 00:04:12,550
to create multiple instances of our app card and then figure out how to actually customize each one.
6319
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
