1 00:00:00,150 --> 00:00:06,660 In this lecture, we are going to create a directive for copying links to the clipboard on the Manage 2 00:00:06,660 --> 00:00:07,200 page. 3 00:00:07,380 --> 00:00:12,660 There is a tiny button next to the title of a clip to copy the URL to their clipboard. 4 00:00:13,080 --> 00:00:16,200 We should provide a way to make sharing clips easier. 5 00:00:16,530 --> 00:00:21,240 Copying the link to the user's clipboard will provide a better user experience. 6 00:00:21,690 --> 00:00:25,380 There are two APIs for copying data to the clipboard. 7 00:00:25,680 --> 00:00:30,540 In the resource section of this lecture, I provide a link to both APIs. 8 00:00:30,780 --> 00:00:33,990 The first API is called the Clipboard API. 9 00:00:34,320 --> 00:00:37,980 It's a very new and modern API implemented by browsers. 10 00:00:38,190 --> 00:00:43,560 Going forward, this is the recommended API for interacting with a user's clipboard. 11 00:00:44,130 --> 00:00:47,460 The second API is the execute command function. 12 00:00:47,820 --> 00:00:52,770 Traditionally, you would use this function to copy content to a user's clipboard. 13 00:00:53,070 --> 00:00:54,810 However, it's deprecated. 14 00:00:55,140 --> 00:00:57,810 You may see some developers continue to use it. 15 00:00:58,020 --> 00:01:01,840 If you need support for older browsers, you must use this function. 16 00:01:02,220 --> 00:01:05,730 The clipboard API is not stable in most browsers. 17 00:01:06,000 --> 00:01:07,950 It's a very experimental feature. 18 00:01:08,520 --> 00:01:11,490 We're using FFmpeg to process files. 19 00:01:11,730 --> 00:01:15,030 Our environment is utilizing cutting edge features. 20 00:01:15,330 --> 00:01:19,410 Therefore, I think it makes sense to use the clipboard API. 21 00:01:19,770 --> 00:01:23,710 Let's begin copying the link to the clipboard in your editor. 22 00:01:23,820 --> 00:01:25,890 Open the Manage template file. 23 00:01:28,430 --> 00:01:32,210 You can find the link by searching for a comment that says links. 24 00:01:34,780 --> 00:01:37,630 Underneath this comment, we have two links. 25 00:01:37,930 --> 00:01:40,510 One link will redirect the user to the clip. 26 00:01:40,870 --> 00:01:44,020 The other link should copy the link to the user's clipboard. 27 00:01:44,350 --> 00:01:47,710 Let's make both links functional on the first link. 28 00:01:47,860 --> 00:01:52,630 Replace the H Riff attribute with a binding on the Router Link directive. 29 00:01:55,210 --> 00:02:03,220 The directive will be bound to an array with the following values forward slash clip and clip dots documented. 30 00:02:06,120 --> 00:02:09,509 For the second link, we are going to bind the click event. 31 00:02:09,810 --> 00:02:15,060 If this event is emitted from the element will run a function called copy to clipboard. 32 00:02:17,560 --> 00:02:23,830 We're going to pass on the event object and clip Dot's document ID property to this function. 33 00:02:26,370 --> 00:02:29,460 We should prevent the default behavior of clicking on a link. 34 00:02:29,820 --> 00:02:34,170 Otherwise, we may be redirected while copying data to the clipboard. 35 00:02:34,530 --> 00:02:37,290 The ID will be necessary for building the link. 36 00:02:37,650 --> 00:02:39,870 Let's move on to defining this function. 37 00:02:40,200 --> 00:02:42,690 Open the Manage component class file. 38 00:02:45,280 --> 00:02:51,070 At the bottom of this class to find the copy to clipboard function as an asynchronous function. 39 00:02:53,740 --> 00:02:57,610 The clipboard API is asynchronous for readability. 40 00:02:57,850 --> 00:03:02,490 Async await syntax will help us greatly inside the argument. 41 00:03:02,980 --> 00:03:06,820 And the event object annotated with the mouse event type. 42 00:03:09,370 --> 00:03:13,150 As for the ID argument, we're going to use a union type. 43 00:03:13,510 --> 00:03:16,210 The value can be a string or undefined. 44 00:03:18,780 --> 00:03:20,790 This type might seem strange. 45 00:03:21,000 --> 00:03:24,120 We are allowing and undefined value in our function. 46 00:03:24,510 --> 00:03:28,020 The clip object is annotated with the I clip model. 47 00:03:28,410 --> 00:03:33,720 Our custom type allows for the Document ID property on an object to be optional. 48 00:03:34,080 --> 00:03:39,690 TypeScript is assuming the value may be undefined before copying to the clipboard. 49 00:03:39,720 --> 00:03:43,110 We should add a condition to check if the value is empty. 50 00:03:43,680 --> 00:03:50,070 First, let's prevent the default behavior of the method inside the function called the prevent default 51 00:03:50,070 --> 00:03:52,080 method on the event object. 52 00:03:54,550 --> 00:03:59,710 Next, create a conditional statement to check if the ID argument is empty. 53 00:04:00,010 --> 00:04:02,260 If it is, we'll return the function. 54 00:04:04,720 --> 00:04:06,400 Let's assume there is an IED. 55 00:04:06,700 --> 00:04:13,750 We should begin copying the link to the clipboard to find a variable called URL with the following value 56 00:04:14,050 --> 00:04:17,920 location origin slash clip slash ID. 57 00:04:21,839 --> 00:04:24,750 The location object is defined by the browser. 58 00:04:25,050 --> 00:04:28,530 It contains information on the current location of the browser. 59 00:04:28,920 --> 00:04:36,170 We're accessing a read only property called Origin to grab the current base URL after this URL. 60 00:04:36,210 --> 00:04:38,370 We're upending the path to the clip. 61 00:04:38,800 --> 00:04:45,720 Afterward, let's call the Navigator Dot Clipboard Dot write text function with the await keyword. 62 00:04:48,290 --> 00:04:53,060 Clipboard functions can be accessed through the Navigator clipboard object. 63 00:04:53,450 --> 00:04:55,940 Not all functions are supported in browsers. 64 00:04:56,180 --> 00:04:58,610 You may have trouble with specific functions. 65 00:04:58,820 --> 00:05:01,950 Luckily, the right text function is all we need. 66 00:05:02,250 --> 00:05:03,980 It'll add text to users. 67 00:05:03,980 --> 00:05:07,130 Clipboard let's pass in the URL variable. 68 00:05:09,580 --> 00:05:15,880 Lastly, we should notify the user we've copied the link to their clipboard below the promise called 69 00:05:15,880 --> 00:05:19,510 the alert function with the following message link copied. 70 00:05:22,050 --> 00:05:25,530 Let's try testing our clipboard functionality in the browser. 71 00:05:25,800 --> 00:05:28,680 I want you to press the copy button for any clip. 72 00:05:31,250 --> 00:05:37,130 I'll be shown an alert box, which tells me the function was called, but the true test is if we're 73 00:05:37,130 --> 00:05:39,590 able to paste the link in the address bar. 74 00:05:39,890 --> 00:05:40,850 Let's find out. 75 00:05:41,390 --> 00:05:44,130 Awesome by storing the link in the clipboard. 76 00:05:44,150 --> 00:05:46,550 We've enhanced the user experience. 77 00:05:46,790 --> 00:05:49,220 It's a small feature, but a convenient one. 78 00:05:49,580 --> 00:05:55,790 You can take this solution further by creating a custom directive to allow any value to be copied. 79 00:05:56,210 --> 00:06:02,570 I'll let you tackle this as an exercise in the next lecture, we're going to continue making improvements 80 00:06:02,570 --> 00:06:03,410 to our app.