Every time I call a specific component in the DOM using its selector, I want to customize it by altering certain variables. This component will serve as a generic "Input Field" that I can define with unique values each time I use it.
I specifically want these customizations to be isolated within the component itself, as I anticipate calling this component multiple times with varying inputs.
For instance, my initial call might require a label of "First Name," be marked as required, and have a placeholder text saying "Enter your First Name."
The structure of the component template:
<div class="input-group" *ngIf=visible>
<span class="input-group-addon" *ngIf="required" id="basic-addon1">{{label}}<span *ngIf=required class="required"> *</span></span>
<input type="text" class="form-control" placeholder={{placeholder}} aria-describedby="basic-addon1">
</div>
Component.TS
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements OnInit {
visible:Boolean;
required:Boolean;
label:String;
disabled:Boolean;
placeholder:String;
constructor() { }
ngOnInit() {
}
}
Is there a way for me to specify values for the component when I call its selector in the DOM?
DOM
<h1>
Sample Input Fields
</h1>
<app-input-field [label]="First Name" [placeholder]="Enter first name" [required]=true visible=true></app-input-field>
^ The above example does not work, presumably because these are not properties of the component.
NOTE:
I prefer not to pass these values from the parent container and instead only wish to define them directly in the DOM without knowing their exact content beforehand.