meager hedge
I'm trying to get suggestions for values to pass to an input property. I want to be able to pass in primary-btn small or large secondary-btn basically any variation. But i want to get the suggestion after tapping a spacebar so I see the next potential value that can be passed.
What I have below only allows either of the strings. Please how can achieve what I want
@Input() customClass: 'primary-btn'|'secondary-btn'|'small'|'large';
<button [ngClass]="customClass"></button>
Flexible string types and auto suggestion
rotund canopy
@Input() customClass: 'primary-btn small' | 'secondary-btn small' | 'primary-btn large' | 'secondary-btn large';
I was thinking there's a flexible way to handle it if I had more classes to combine.
rotund canopy
You can:
type ButtonStyle = 'primary' | 'secondary';
type ButtonSize = 'large' | 'small';
type ButtonClasses = `${ButtonStyle}-btn ${ButtonSize}`;
@Input() customClass: ButtonClasses
See https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html
meager hedge
You can:
```ts
type ButtonStyle = 'primary' | 'secondary';
type ButtonSize = 'la...
This is great!
Thank you so much
meager hedge
You can:
```ts
type ButtonStyle = 'primary' | 'secondary';
type ButtonSize = 'la...
for the third type, I get 'ButtonStyle' only refers to a type, but is being used as a value here.
it's happening in intelliJ but not in vscode
rotund canopy
If it compiles, then IntelliJ is wrong (but it doesn't complain here)
barren flume
You probably used colon : in place of equal = sign when defining ButtonStyle on first line.
meager hedge
You probably used colon `:` in place of equal `=` sign when defining `ButtonStyl...
I really wish this was the case but = is used the types
meager hedge
If it compiles, then IntelliJ is wrong (but it doesn't complain here)
Vscode is showing same Type expected error during compilation
Wrote it all manually 🥲