import { Component, Input } from '@angular/core';
@Component({
selector: 'app-input-output',
templateUrl: './input-output.component.html',
styleUrl: './input-output.component.scss'
})
export class InputOutputComponent {
@Input() message='welcome' ; // Input example
}
Accepting data with input properties
When building a component, you can allow data to be passed from another component. To do this, you use a special label @Input on the property you want to receive data for.
Code Snippet
Required Inputs
You can make an input field mandatory in your component. This means users will have to provide a value before they can submit a form or continue using the app. To do this, use the required option.
Code Snippet
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-input-output',
templateUrl: './input-output.component.html',
styleUrl: './input-output.component.scss'
})
export class InputOutputComponent {
@Input({required:true}) message='welcome' ; // Input example
}
Input transforms
Angular allows you to define a special function to modify the data received by an input before it's used in your component. This is useful for formatting, validating, or otherwise manipulating the input data.
Code Snippet
@Input({transform: reduceSpace}) label = ''; //reduceSpace is function
Inputs with getters and setters
Even if a property uses a getter and setter (special functions to access and change its value), you can still use it to receive data from another component.
Code Snippet
export class GetAgebyDOB {
@Input()
get getAge(): number {
return this.Age;
}
set setAge(newValue: number) {
this.Age = newValue;
}
private Age = 0;
}
Leave a Comment
This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.
Comments