Angular 2将HTML属性从父级传递到子级

Question

I want to pass attribute of HTML from parent to child. Is there any way where I can directly pass attribute from a parent without creating a variable for it in parent's .ts class and then passing it. Here is sample code of parent

<app-field-lable type="number"></app-field-lable>

and here is my field label component.

<input [(ngModel)]="signageRequest.brandingSpaceName"  class="form-control"/>

As you can see I am passing type="number" attribute from a parent, but it ain't working. I know the mechanism to create a variable in parent and then passing it to child via a @Input decorator. But is there a way where I do not have to create all of the variables in a parent class and pass it directly to a child.

Thanks

Answer 1

You can just put string as @Input :

<app-field-lable [inputType]="'number'"></app-field-lable>

Here is sample for Ts file and how you can use it in html

@Component({
 selector: 'app-field-lable',
 template: '<input type="{{inputType}}"/>',
 styleUrls: ['./field-lable.component.css']
})
export class FieldLableComponent implements OnInit {
 @Input() inputType:string;
 constructor() { }
 ngOnInit{}
}

Main idea, that native attributes (like type ) expects strings, but @Input() attributes (like [customAttr] ) expects variables