$el: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

15. $el

Transcript

00:00

We briefly looked at L earlier, which references the current component that Alpine is on.

00:06

However, what we're going to do in this part is look at two really cool examples of how we can use this. Just to kind of refresh your memory, let's create out a div in here, set X data, and let's go ahead and say X init and just console log out L. I don't think we've looked at X init yet, but all that does is run something in here when this component initializes.

00:30

Let's go over and check this out. You can see that, sure enough, we get that div back. This, of course, can apply to any components. So, for example, if this was a text area, it would work in the same way. It just gives you that component back or that element back.

00:44

OK, so let's look at two cool examples. The first one is going to be an instant markdown outputter. That's the only way I can describe it. Let's go ahead and create some div out here, and let's say X data, and let's again use X init.

00:59

We can actually get rid of the assignment on X data, and I've already pulled the marked library in that we looked at a little bit earlier. Effectively, I want to transform any content that's within this div into markdown. So, for example, this is markdown,

01:15

and if we go over and give that a refresh, at the moment, of course, it just doesn't work because we just have two asterisks and nothing's being parsed. Now, inside of X init, what we can now do is access L, and because that's a native element and we can access any of the properties on it via JavaScript,

01:31

we could, for example, say innerHTML, and we could set that to any value. So I could just set that to ABC, and when this is initialized, it just changes over to ABC. So that gives us the opportunity to use the marked library to go ahead and take the inner text of this, again via L inner text,

01:50

and transform it into markdown. So if we go over, give that a refresh, there we go. We get this is markdown being transformed into markdown. So I wouldn't recommend doing this over and over again for lots of different components.

02:02

You'd probably have a huge block of markdown within one component, but it's good to see that this can be done in just a, well, pretty much one line of code. Now, the next example we're going to look at is an element on the page which we can copy and paste by clicking on it.

02:16

So let's go and start with just a div in here, and I want any of the content inside of here, maybe it's an API key, something to be copied and pasted when we click on that text. So again, let's go ahead and bring X data in just to initialize this component,

02:30

and let's use a click event in here to copy and paste the content within this particular element. Now, we can do this just natively with JavaScript, so we're going to go ahead and say window navigator and clipboard, and we're going to go ahead and write some text to the clipboard when this is clicked.

02:46

And that is, of course, is from this element, the inner text of this element. Let's go over and try this out. When I click on this and come over to my editor, that has now been copied and pasted. So really, really simple way to have some element within your site that you can copy and paste content from.

03:06

Now, this would work in the same way as if it were an input. Let's just try that out now. So let's go ahead and create an input in here just with the type of text. Let's set an initial value to this.

03:15

So that's probably going to be, again, some kind of API key or whatever content you want to copy. And let's replicate exactly the same content. So X on click, and then in here we're going to say L. In fact, let's console log that element out because this is slightly different.

03:29

Each element has a different way to access content. In this case, it was inner text. But in this case, it's going to be the value of this element. So let's go and just click in here.

03:39

And there we go. We have the value in there. But to access this, we want to go and extract the value out rather than the inner text. So we can do exactly the same thing.

03:49

Window, Navigator, Clipboard, and write text. And we can say L.value. There we go. Now let's go over, click in here.

03:59

That's going to go and copy and paste that content. Just to make sure that's working, what we can do is change this up a bit. So let's just say A, B, C, D, E, F. Let's go over and click.

04:10

And there we go. That is working nicely. If, for example, you also wanted to select all the text when this was clicked, you could do that as well. So you could say L.select at the end of there.

04:24

Or you could do that before. It doesn't really matter. So now when I click in here, the whole text gets selected and also gets copied as well. So you could show a message in there to say that that had been copied.

04:33

Use a tooltip. It doesn't really matter. But just with that and using L allows us to reference a component like this, where we attach X data directly to the component and do all these cool things.

Episode summary

In this episode, we dive deeper into Alpine's L reference, which points to the current component's DOM element. First, we quickly recall how to access L and set up a simple Alpine component with x-data. We see how using x-init allows us to run some code when the component is initialized, and by logging L, we confirm that it gives us access to the DOM element itself.

The episode then jumps into two fun and practical examples of how this can be useful:

1. Instant Markdown Converter We build a quick markdown outputter using the marked library. By grabbing the element's text and transforming it to HTML with marked, then setting innerHTML, we instantly convert markdown to nicely formatted HTML inside the div, all triggered by Alpine's x-init.

2. Click to Copy Elements Next, we make a copy-to-clipboard feature. We set up a div (or any element, like an input), and with x-on:click, we grab its text (or value) and write it to the clipboard using the browser's native Clipboard API. It's a practical way to offer "copy API key" buttons or quick-copy elements in your UI. We even tweak it to select the text when the input is clicked, for even nicer UX.

By the end, you'll have a good sense of how L lets you directly manipulate or fetch details from Alpine components, unlocking some really handy dynamic behavior with minimal code.

Episode discussion

No comments, yet. Be the first!