In this lecture, we are going to create a directive for copying links to the clipboard on the Manage
page.
There is a tiny button next to the title of a clip to copy the URL to their clipboard.
We should provide a way to make sharing clips easier.
Copying the link to the user's clipboard will provide a better user experience.
There are two APIs for copying data to the clipboard.
In the resource section of this lecture, I provide a link to both APIs.
The first API is called the Clipboard API.
It's a very new and modern API implemented by browsers.
Going forward, this is the recommended API for interacting with a user's clipboard.
The second API is the execute command function.
Traditionally, you would use this function to copy content to a user's clipboard.
However, it's deprecated.
You may see some developers continue to use it.
If you need support for older browsers, you must use this function.
The clipboard API is not stable in most browsers.
It's a very experimental feature.
We're using FFmpeg to process files.
Our environment is utilizing cutting edge features.
Therefore, I think it makes sense to use the clipboard API.
Let's begin copying the link to the clipboard in your editor.
Open the Manage template file.
You can find the link by searching for a comment that says links.
Underneath this comment, we have two links.
One link will redirect the user to the clip.
The other link should copy the link to the user's clipboard.
Let's make both links functional on the first link.
Replace the H Riff attribute with a binding on the Router Link directive.
The directive will be bound to an array with the following values forward slash clip and clip dots documented.
For the second link, we are going to bind the click event.
If this event is emitted from the element will run a function called copy to clipboard.
We're going to pass on the event object and clip Dot's document ID property to this function.
We should prevent the default behavior of clicking on a link.
Otherwise, we may be redirected while copying data to the clipboard.
The ID will be necessary for building the link.
Let's move on to defining this function.
Open the Manage component class file.
At the bottom of this class to find the copy to clipboard function as an asynchronous function.
The clipboard API is asynchronous for readability.
Async await syntax will help us greatly inside the argument.
And the event object annotated with the mouse event type.
As for the ID argument, we're going to use a union type.
The value can be a string or undefined.
This type might seem strange.
We are allowing and undefined value in our function.
The clip object is annotated with the I clip model.
Our custom type allows for the Document ID property on an object to be optional.
TypeScript is assuming the value may be undefined before copying to the clipboard.
We should add a condition to check if the value is empty.
First, let's prevent the default behavior of the method inside the function called the prevent default
method on the event object.
Next, create a conditional statement to check if the ID argument is empty.
If it is, we'll return the function.
Let's assume there is an IED.
We should begin copying the link to the clipboard to find a variable called URL with the following value
location origin slash clip slash ID.
The location object is defined by the browser.
It contains information on the current location of the browser.
We're accessing a read only property called Origin to grab the current base URL after this URL.
We're upending the path to the clip.
Afterward, let's call the Navigator Dot Clipboard Dot write text function with the await keyword.
Clipboard functions can be accessed through the Navigator clipboard object.
Not all functions are supported in browsers.
You may have trouble with specific functions.
Luckily, the right text function is all we need.
It'll add text to users.
Clipboard let's pass in the URL variable.
Lastly, we should notify the user we've copied the link to their clipboard below the promise called
the alert function with the following message link copied.
Let's try testing our clipboard functionality in the browser.
I want you to press the copy button for any clip.
I'll be shown an alert box, which tells me the function was called, but the true test is if we're
able to paste the link in the address bar.
Let's find out.
Awesome by storing the link in the clipboard.
We've enhanced the user experience.
It's a small feature, but a convenient one.
You can take this solution further by creating a custom directive to allow any value to be copied.
I'll let you tackle this as an exercise in the next lecture, we're going to continue making improvements
to our app.