DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report

Using Refs in Stencil

A discussion of why refs are important for front-end code, followed by a quick tutorial on using ref attributes with the Stencil framework.

Gil Fink user avatar by
Gil Fink
·
Aug. 17, 18 · Tutorial
Like (1)
Save
Tweet
Share
8.78K Views

Join the DZone community and get the full member experience.

Join For Free

Why Use Refs?

The first question that you might ask yourself is why bother using element references? Let's clarify that.

In a typical data flow, you will pass props from the parent to it's child elements. When passing props, the child component will re-render and you will get it's new state. There are times that you will need to imperatively modify a child outside of this typical flow. Here are examples of things that might need different flow:

  • Triggering animation.
  • Usage of third-party components with their own API.
  • Implementation of forms where you might need to do things such as text selection or focus.

Now that we understand that we might need references to inner elements it's time to understand how to implement them in Stencil.

Stencil Refs

When you want to create a reference to an inner element in Stencil you will use the ref attribute. The ref attribute gets a function which accepts an element reference and returns void. In the function implementation, you will set the reference to a component member.

Let's see an example:

import {Component} from '@stencil/core';

@Component({
  tag: 'custom-text-input',
  shadow: true
})
export class CustomTextInput {
  private textInput?: HTMLInputElement;

  constructor() {
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    this.textInput.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={el => this.textInput = el as HTMLInputElement} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

In the example, you can see that the  CustomTextInput class has a private member called textInput. In the  render function, you set the reference to the input element using the following code:

ref={el => this.textInput = el as HTMLInputElement}

Then, when someone is clicking on the button, the focusTextInput is called and it will use the stored element to focus on the input element.

This is, of course, a simple example, but I hope that it helps you in setting a reference to an element.

Element

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Securing Cloud-Native Applications: Tips and Tricks for Secure Modernization
  • Beyond Coding: The 5 Must-Have Skills to Have If You Want to Become a Senior Programmer
  • Use AWS Controllers for Kubernetes To Deploy a Serverless Data Processing Solution With SQS, Lambda, and DynamoDB
  • 7 Ways for Better Collaboration Among Your Testers and Developers

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: