#Dynamic @input for component

4 messages · Page 1 of 1 (latest)

viral quartz
#

Hello
Is it possible to show @inputs of a child compoenent in parent usage base on a specific value?
For example:
I have

@input() type: string;
@input({ required: true }) placeholder: string; 
@input() isVisible: boolean;

In child component
So Is it possible to allow child to use [placeholder] in app-child only if [type] is specific value?

Examlpe

<app-child [type]="'textbox'" [placeholder]="''" />
// it works without error because place holder is shows in attributes for type==='textbox'

<app-child [type]="'hidden'" />
// it works without error because place holder is not a attribute for tag type==='hidden'

torpid ivy
#

No.
This smells like you're trying to hide an <input> element inside your component. I would generally advise against that: you're going to be forced to pass each and every attribute that an input could have with component inputs (and thus also have to deal with the problems you're mentioning).
If you really want to add bahavior to inputs, use a directive and/or content projection, as it's done in angular material with matInput and mat-form-field.

viral quartz
#

thank you for your reply actually i was wondering if there is an option to use a single component instead of creating multiple components or directives for each <input>. with dynamically handle @inputs. also I am not using angular material for my project.
it means so crazy but i rather to create my components myself to use any external libraries.

torpid ivy
#

My point was not to make you use Angular Material. My point was to use its design as an inspiration.