Issue
I have a multiple input component with selector like this:
<app-input type="currency" formControlName="currency"></app-input>
<app-input type="date" formControlName="dateOfBirth"></app-input>
So, from that component, I have a selector like this:
@Component({
selector: 'app-input[type=currency]',
})
@Component({
selector: 'app-input[type=date]',
})
Now, i want to add multiple currency
component. One for default currency component and the second one for currency with dynamic currency symbols.
So, i want to make it different with options. When selector have an options, show currency with dynamic symbols, else or default, show default currency without symbols.
I've been trying to using this selector below, but it's not working.
For default currency:
@Component({
selector: 'app-input:not([options])[type=currency]',
})
For dynamic symbol currency:
@Component({
selector: 'app-input[options][type=currency]',
})
Thank you in advanced
Solution
Option 1
BEST WAY:
You should just use a single component and insert the conditionals inside that component to perform this dynamic behaviour based on the config from @Input
instead going for multiple components, if its unavoidable then check the below approach
Option 2
The reason options does not work is because, angular appends extra values to the attribute, if you want you original solution to work, you can change it to
For default currency:
@Component({
selector: 'app-input:not([ng-reflect-options])[type=currency]',
})
For dynamic symbol currency:
@Component({
selector: 'app-input[ng-reflect-options][type=currency]',
})
Option 3
You can just add data attributes to differentiate the selector like so
Without Symbols:
@Component({
selector: 'app-input[type=currency]',
})
With Symbols:
@Component({
selector: 'app-input[type=currency][data-symbols]',
})
html
with symbols: <app-input type="currency" formControlName="currency" data-symbols></app-input>
without symbols: <app-input type="currency" formControlName="currency"></app-input>
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.