WEBVTT 00:02.730 --> 00:05.230 In this lesson we're going to create a new component. 00:05.280 --> 00:10.740 The question component that we going to use to show the details of single questions. 00:10.890 --> 00:16.170 Considering that as you probably remember to retrieve the details of single question instances we are 00:16.170 --> 00:17.650 using the slugger. 00:17.940 --> 00:22.660 On the on component we are going to make the question clickable using a router linker. 00:22.890 --> 00:28.380 And because we have access to all the probabilities of the single questioning instances we are going 00:28.380 --> 00:35.850 to pass this lag field of each single question as a prop to the new question component so that it can 00:35.850 --> 00:40.890 then be used to retrieve the details of this single question Is this not what it is. 00:40.890 --> 00:44.640 Because it's actually an easier process than one might think. 00:44.640 --> 00:53.610 So let's create a new component question that view and inside of this component let's define template 00:55.230 --> 00:55.860 script. 00:56.360 --> 01:02.660 And also style let's define a name for the component. 01:02.700 --> 01:10.490 You can just call it a question and then let's define it so because remember we need does logger passed 01:10.580 --> 01:15.430 as a prop which is going to be of type String. 01:15.620 --> 01:18.260 We've required it through. 01:18.260 --> 01:21.410 So right now we could just leave it this way. 01:21.500 --> 01:23.810 So yeah I'm going to define a diva. 01:23.950 --> 01:25.960 The root h the metal element. 01:26.140 --> 01:27.200 Class. 01:27.470 --> 01:29.250 Single question. 01:29.270 --> 01:30.680 We have a bit of a margin on top. 01:30.680 --> 01:32.840 Empty too. 01:33.010 --> 01:38.100 Then here I'm going to define another diva container. 01:38.120 --> 01:45.900 For now let's just pass this lug like so so far when passing a prop to our component. 01:45.920 --> 01:51.710 We've always done that from within another component like in the case of the up and dirt. 01:51.710 --> 01:58.570 If you fail we would just use the component inside of the template of the component itself passing down 01:58.600 --> 02:01.960 the values needed for each specific prop. 02:02.030 --> 02:08.990 In this case however things need to be different because you are not including a component directly 02:09.050 --> 02:10.870 inside of another component. 02:10.880 --> 02:18.800 We just want to call a component using your router and then the content of the component will be shown. 02:19.370 --> 02:29.500 Yeah luckily for us view router allows us to create different parts that own so accept parameters in 02:29.500 --> 02:35.350 a very similar way to what we can do inside of the user as told by fire. 02:36.470 --> 02:40.840 So let's define the path for that question component. 02:40.880 --> 02:50.850 First of all I'm going to import it so import question from views question that view. 02:50.920 --> 02:51.190 Yeah. 02:51.230 --> 02:53.710 I'm going to define another path. 02:57.290 --> 03:05.730 Then I can just call question the component of force is going to be question in the path question for 03:05.730 --> 03:08.640 what is less sure call on and slug. 03:08.670 --> 03:15.360 So this is the way you define parameters for your parts and in order to have those parameters passed 03:15.480 --> 03:22.070 as prop to the component you need to define props through what we can do now. 03:22.080 --> 03:23.940 I can also delete this comment. 03:24.020 --> 03:33.180 You still go back to the old daughter view component and yeah we can define router link. 03:35.190 --> 03:35.700 This way. 03:37.290 --> 03:41.010 And then today to proper. 03:41.160 --> 03:49.480 First of all we bust the name of the path which in most cases question and then we also need to pass 03:49.820 --> 03:53.420 firearms parameters is an object. 03:53.520 --> 03:54.570 Have a slug. 03:54.650 --> 04:05.050 It was a question slug so if we now open up Chrome in the OP page we see that each question is clickable. 04:05.390 --> 04:12.330 And if you click in one of em what we get is the slug of the question that has been passed as a parameter. 04:12.330 --> 04:15.850 Let's make these links look a bit better by stating them. 04:16.170 --> 04:21.090 So here we can find a class attribute to a new class. 04:21.160 --> 04:28.010 The question Lincoln and we can now define this class yet to be no 04:32.870 --> 04:36.770 and of course this is to be at its way. 04:38.030 --> 04:45.290 So first of all let's add funds weight balls and then let's make the caller black. 04:46.550 --> 04:50.690 But let's change the caller went when to need with the mouse. 04:51.170 --> 04:54.370 So call on all of it. 04:54.740 --> 05:00.230 And yet you have a special caller prepared for this color combination which is kind of a lighter gray 05:00.990 --> 05:08.240 and you had to we can also define text the quotation as simply known. 05:08.440 --> 05:16.920 And if you now go back to Chrome much better back to the question that you component let's implement 05:16.950 --> 05:20.310 all the code needed to actually make the component useful. 05:20.310 --> 05:28.140 So first of all I'm going to import API service and actually to make it explicit I can also add the 05:28.140 --> 05:30.360 GSA extension once again. 05:30.390 --> 05:39.030 So it's way so we are going to use API service to get the details of a single question from the API 05:39.090 --> 05:40.750 using this slugger. 05:40.780 --> 05:50.230 Therefore here I can define data which is going to return a single question object. 05:50.230 --> 05:51.660 Let us now define methods 05:55.710 --> 05:59.440 we can call the method to get question data. 06:03.120 --> 06:06.910 And yet first of all let and find equals. 06:06.910 --> 06:12.240 I'm going to use the back to excel to define API questions. 06:12.400 --> 06:20.890 And now he added because you are using the back to accept we can add this looks like and these dots 06:20.900 --> 06:22.130 lag of course. 06:22.160 --> 06:24.350 Is this like past is a problem. 06:25.100 --> 06:29.280 So yeah we can now use VBA said to be a function 06:32.600 --> 06:41.090 in the ad below DNA data and considering that we a decent point about only getting the details of the 06:41.090 --> 06:42.450 question itself. 06:42.590 --> 06:46.910 Who can set d not question as data. 06:46.910 --> 06:49.220 Same as we've done here in their home component. 06:49.250 --> 06:58.710 We can use the created life cycle Luca to collect method as soon as the component is created. 06:58.710 --> 07:02.240 So we've the data passed to our question property. 07:02.370 --> 07:05.370 We can now change the content of the template. 07:05.580 --> 07:11.170 Let's add an h1 tag with question content. 07:11.190 --> 07:12.230 The question itself. 07:12.810 --> 07:17.280 Then yeah we can copy the same code defined appear 07:20.860 --> 07:23.510 so that we can show the details of the question author. 07:24.950 --> 07:31.040 And in this span we are using SPSS Glasser author name that is defined yet in the all middle to view 07:31.740 --> 07:32.790 components. 07:32.960 --> 07:39.190 And considering that you are not using scoped there's SEO says classes are also available from the other 07:39.200 --> 07:41.470 components such as Question data view. 07:41.840 --> 07:47.660 And if this is great for example for the code we've defined here in ARPA dot view because we know that 07:47.690 --> 07:53.840 we want to use this font family for the whole application and you also want all the battles of the application 07:53.840 --> 07:55.670 to behave like DSA. 07:56.060 --> 08:02.660 So if this is okay it's not the same finger as reference in a specific class like the ISA from another 08:02.660 --> 08:07.750 component that may turn out to be very confusing later on when trying to modify your application. 08:07.760 --> 08:13.700 So even though the properties are the same let's add code and maybe you can actually also change the 08:13.700 --> 08:20.450 name to question photo sway. 08:25.690 --> 08:34.680 And let's just copy the CSF property to the question not have a component and considering that this 08:34.710 --> 08:42.930 is in fact the question component we can just leave it as of our name. 08:43.000 --> 08:48.150 Let's also add more information that is for example in this case can be very useful to know when the 08:48.150 --> 08:49.560 question was created. 08:49.560 --> 08:55.390 So question though it's created at. 08:55.500 --> 09:02.490 So as soon as the question that a few component is needed once created the get question data method 09:02.550 --> 09:10.650 is called using d end point which actually in this case is to be for what is less API and so on. 09:10.710 --> 09:13.210 And that's because without default what is less clear. 09:13.260 --> 09:19.050 The endpoint is also created based on the actual routes defined in the router though. 09:19.060 --> 09:23.880 J Yes file and therefore forum it's okay because we have a is Lesher. 09:24.030 --> 09:30.570 That's why Yeah we haven't used it but of course it becomes a problem if you try to get data from an 09:30.570 --> 09:36.660 endpoint that doesn't exist such as last question as Lesh API questions and so on. 09:36.690 --> 09:42.750 So if we now go back to Chrome we see that of course the on page you still working and clicking on one 09:42.840 --> 09:43.500 of the links. 09:43.770 --> 09:49.740 This time we get all the details of the question and same thing of course applies to the second question 09:50.690 --> 09:56.600 before finish in the lesson there is one more thing that we need to do because as you can see the title 09:56.600 --> 09:59.210 of the page is still Question Time. 09:59.300 --> 10:04.400 We want however to use the question itself has a title for the window as well. 10:04.640 --> 10:12.380 So let's go back to these wells to your code and yet we can define another method set the page title 10:12.440 --> 10:19.450 which accepts title as a parameter and yet we can simply said document the page itself. 10:19.450 --> 10:31.200 The title as title we can now call this method from here with these dot sets title passing it data. 10:33.230 --> 10:41.020 That content which is the question itself and if we now go back to crawl we can see that the title of 10:41.020 --> 10:42.810 the page is changed. 10:42.960 --> 10:45.820 The same thing happens for another question. 10:45.820 --> 10:49.750 However as you probably noticed the title stays the same. 10:49.750 --> 10:56.080 Going back to the home page and so to fix that we could define an other matter inside of the home component 10:56.460 --> 10:59.980 or considering that the title of the page is static. 10:59.980 --> 11:01.620 It doesn't change dynamically. 11:01.620 --> 11:08.920 As for the question page and considering that we are already using the created life cycle look into 11:08.950 --> 11:10.470 home that component. 11:10.510 --> 11:20.910 We can simply define document dot title as question time and if we now go back to Chrome we see that 11:20.910 --> 11:27.240 the title has already changed and visiting the details of a single question changes the title of the 11:27.240 --> 11:32.460 page accordingly but going back to the home page we still get question time.