Usar @Input() en Angular

1. la Directiva @Input() en Angular
2. Pasos para usar @Input() en aplicaciones Angular

Este artículo trata sobre Angular @Input(), una función utilizada en Angular para recibir información del usuario y luego usarla para procesarla en el programa. También es posible utilizar esta función para leer un archivo y obtener datos de una API externa.

la Directiva @Input() en Angular

La directiva @Input(), como sugiere el nombre, se utiliza para los campos de entrada. @Input() es mejor para capturar la entrada del usuario en campos de formulario y cuadros de texto.

Cuando el usuario ingresa información, automáticamente actualiza el valor del campo o cuadro de texto. También acepta valores de otras entradas y ngModelOptions para actualizar automáticamente su valor.

La directiva @Input() tiene tres atributos: tipo, name y valor.

• El atributo tipo especifica el tipo de campo de entrada que se creará.
• El atributo name especifica la identificación del campo de entrada y se utilizará como su nombre en el código JavaScript.
• El atributo valor es obligatorio si crea un campo de entrada de texto sin un valor predeterminado establecido.

A continuación se muestra una lista de tipos válidos para un campo de entrada:

• Text
• Password
• Email Address
• Number
• Date Picker (Date)
• Time Picker (Time)
• Range Slider (Range)
• Checkbox (Checkbox)

Para usar @Input(), debe agregarlo como una directiva en el elemento HTML deseado.

@Input() se usa para transmitir datos del componente principal al componente secundario, mientras que @Output() se usa para pasar datos del componente secundario al componente principal. Un ejemplo típico de @Input() es preguntar por la edad del usuario.

El siguiente código mostrará un mensaje preguntando por la edad del usuario y luego lo devolverá a la función de llamada, que lo asignará a una variable llamada edad.

var age = Input("Please enter your age");

Pasos para usar @Input() en aplicaciones Angular

Hay tres pasos para usar @Input() en aplicaciones Angular:

Código TypeScript:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    isFocusStyle = false;
    type = 'INFO';
    onFocus() {
        this.isFocusStyle = true;
        this.type = 'INFO';
    }
    onEnter() {
        this.isFocusStyle = false;
        const input = document.querySelector('input');
    }
}

Código HTML:

<h1>Example of Angular Input</h1>
<div class="input-wrapper" [ngClass]="{'focus-style': isFocusStyle}">
    <input type="test" placeholder=" Write " (focus)="onFocus()">
</div>

Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.