---
title: Componente
slug: low-code-clone/componente
description: This document provides insightful information on component properties in Low Code, including instructions on searching for specific components and editing them. It also covers the use of AngularJS directives and emphasizes that the technical aspects are i
createdAt: 2023-01-04T12:00:17.000Z
---

As propriedades de componente estão intrisicamente ligadas ao "**Componente**". Vêm previamente carregadas e são as propriedades que o <font color="#2166ae">**Low Code**</font> já conhece. Esses componentes aparecerão ao manipular os formulários.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/hMzZTuJRVwiFXqP3SAT1N_image.png)

- É possível buscar por um componente (**de entrada de tipo texto**) clicando na barra de busca que aparece no lado superior direito:

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/ebUzrColIJ9TCEP_3jSDv_microsoftteams-image-15.png)

| **Campo**                                   | **Descrição**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Nome (<font color="#eb144c">**\***</font>)  | Identificador único do componente                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Descrição                                   | Identifique o componente com uma pequena descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| Tipo (<font color="#eb144c">**\***</font>)  | Classifica o modo de exibição dos componentes na tela de formulários;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Versão                                      | Versão mais atualizada do componente                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Ícone (<font color="#eb144c">**\***</font>) | São as imagens que serão incluídas, previamente cadastradas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| Propriedades                                | Todas as **Propriedades** inseridas aparecerão no formulário. Determine também quais serão utilizadas.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Propriedades Selecionadas                   | 1. **ngBlur**: É uma diretiva padrão do AngularJS que é usada para reagir ao evento "blur" (perda de foco) de um elemento HTML, como uma caixa de texto. Você pode associar uma expressão ou função a essa diretiva para executar ações quando o usuário sai do campo de texto.<br />2. **ngDisabled**: É uma diretiva padrão do AngularJS que permite desabilitar ou habilitar um elemento HTML, como botões, caixas de seleção ou campos de texto, com base em uma expressão. Se o valor da expressão for verdadeiro, o elemento será desabilitado.<br />3. **ngMaxlength**: É uma diretiva padrão do AngularJS que é usada para limitar o número máximo de caracteres que podem ser digitados em um campo de texto. Você pode associar um valor numérico a essa diretiva para definir o limite.<br />4. **ngRequired**: É uma diretiva padrão do AngularJS que é usada para garantir que um campo de entrada (input) ou seleção (select) seja obrigatório. Se essa diretiva estiver presente no elemento, o formulário não será válido até que o usuário forneça um valor para esse campo. |

As informações com asterisco (<font color="#eb144c">**\***</font>) são obrigatórias.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/DecqtigD-wA-l3ufbo7fs_image.png)

- Após finalizar a edição, clique em "**Salvar**". É possível tanto salvar "**como nova versão**" como "**na versão original (1.0)**".

***

De certo modo, os componentes aparecerão ao criar um [Formulário](docId:8TV5ZP74QWOi5bwfrJ5IF), além de suas propriedades que aparecerão no lado direito:

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/d50m7JL7XUR5UQwsipxS6_image.png" size="54" width="368" height="36" position="center" showCaption="false"}

:::hint{type="warning"}
⚠️ <u>**Atenção**</u>**!**

A **parte técnica** é destinada aos **Desenvolvedores&#x20;**&#x70;ara construírem seus componentes.&#x20;

Se um desenvolvedor quiser construir um componente que não faz parte da lista dos componentes previamente carregados e definidos pelo Low Code, ele precisará então definir um template HTML.&#x20;

Esse template HTML será exibido no formulário. Enquanto o HTML é o que vai ser renderizado quando exibir o formulário. Além disso, lembre-se que a renderização é cuidada pelo Back-End do Low Code.
:::

