Input Interactions

Our component library supports two way interactions with components.

You can pass value to the components and also receive back any changed/entered value.

The below attributes can be used to interact with any applicable form component.

Getting Values/Updates from a component:

Property	Description	Type
getValue	This method returns the selected/entered value. The method returns the selected/entered value.	Method()
onChanged	This is an event emitted every time there is a change in current value of the component. In the event.detail you will find the selected/entered value.	Event Listener
onBlurred	This is an event emitted every time the component loses focus. In the event.detail you will find the selected/entered value.	Event Listener
input	This is the default event that is fired once the value of the element is changed. You will receive the event as a value.	Event Listener
keydown	This is the default event that is fired once any key is pressed on the element in focus. You will receive the event as a value.

Setting/Updating Value to a component:

Property	Description	Type
setValue	This method sets the selected/entered value.	Method()
onChanged	This is an event emitted every time there is a change in current value of the component. In the event.detail you will find the selected/entered value.	Event Listener
onBlurred	This is an event emitted every time the component loses focus. In the event.detail you will find the selected/entered value.	Event Listener

Example Usage

React JS

import { useState } from "react";
// Import the component
import { DdaTextarea } from "@dubai-design-system/components-react";

function App() {
      const [text, setText] = useState("");
      
      return (
            <>
                  <DdaTextarea
                      onInput={(event) => {
                        console.log(event.currentTarget.getValue());
                        setText(event.currentTarget.getValue());
                      }}
                  />
                  <p>{text}</p>
            </>
      )
}

Angular JS

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  text = '';

  async handleInput(event: Event) {
    const target = event.target as any;
    const value = await target.getValue();
    console.log(value);
    this.text = value;
  }
}

app.component.html

<dda-textarea (input)="handleInput($event)"></dda-textarea>
<p>{{ text }}</p>

Vanilla JS

<div>
    <dda-textarea id="dda-textarea"></dda-textarea>
    <p id="output"></p>
</div>

<script>
      const textareaEl = document.getElementById('dda-textarea');
      const outputEl = document.getElementById('output');

      textareaEl.addEventListener('input', (event) => {
        const value = textareaEl.getValue();
        console.log(value);
        outputEl.textContent = value;
      });
</script>

Setting a Value

import { useState } from "react";
import { DdaInput } from "@dubai-design-system/components-react";

function App() {
  const [text, setText] = useState("");
  return (
    <>
      <div className="card">
        <DdaInput
          onInput={(event) => {
            console.log(event.currentTarget.getValue());
            setText(event.currentTarget.getValue());
          }}
          id="myInputId"
        />
        <p>{text}</p>

        <button
          onClick={() => {
            document.getElementById("myInputId").setValue("Sample Value");
            setText("Sample Value");
          }}
        >
          Set Sample Value
        </button>
      </div>
    </>
  );
}

export default App;