0

Inside using another component app-custom-dropzone i have to send the [field] as aImage, bImage, cImage, dImage in loop [A, B, C, D] so im trying to convert it to lower case and append Image string to it.

I have tried [field]= "{{option | lowercase}}Image" - it print as {{option | lowercase}}Image but i expect aImage

also tried [field]= "option | lowercase" - it print as a but i need to append image string to it. How can i do it??

 <div *ngFor="let option of optionList" class="p-2 bg-card shadow rounded overflow-hidden">
                <h3 class="m-3"><b>Option {{option}}</b></h3>
                <div class="grid md:grid-cols-4 sm:grid-cols-1 mb-2 m-3">
                   
                      <app-custom-dropzone *ngIf="displayimage" [field]= "option | lowercase" [formData]="questionForm" (onFormGroupChange)="onChange($event)" ></app-custom-dropzone>
                </div>
            </div>
Jayanthi T
  • 5
  • 2
  • Few ways you can do: 1. Remove the square bracket for `field` Input. `field= "{{option | lowercase}}Image`. 2. In component, convert the `option` to lowercase with Angular. 3. In `` component, append the `field` Input property with "Image" but this is not recommended. – Yong Shun May 29 '23 at 08:36

2 Answers2

0

Approach 1: Pass stringified value

Remove the square bracket for [field]. This will pass the value as stringified as mentioned in this answer for What is the difference between parentheses, brackets and asterisks in Angular2?.

<app-custom-dropzone field="{{ option | lowercase }}Image" ...></app-custom-dropzone>

Approach 2: Transform the value in component

In your component, use LowerCasePipe or string.toLowerCase() to transform the value as lowercase and perform the string concatenation.

import { LowerCasePipe } from '@angular/common';

@Component({
  ...
  providers: [LowerCasePipe]
})
export class App {
  constructor(private lowercasePipe: LowerCasePipe) {}

  getFormattedField(value: string) {
    return this.lowercasePipe.transform(value) + 'Image';
    // Or
    //return /* your value */.toLowerCase() + 'Image';
  }
}

<app-custom-dropzone [field]="getFormattedField(option)" ...></app-custom-dropzone>

Approach 3: Convert string to the desired format in CustomDropzoneComponent

You can also customize the value to desired output in another component via setter. However, it is not recommended as this will violate the SOLID principle (Single Responsibility principle). As it is possible that you may not want the field value to be lowercase and with postfix: "Image".

<app-custom-dropzone [field]="option" ...></app-custom-dropzone>

export class HelloComponent implements OnInit {
  _field!: string;
  @Input() set field(value: string) {
    this._field = value.toLowerCase() + 'Image';
  }
}
Yong Shun
  • 35,286
  • 4
  • 24
  • 46
0

To dynamically bind the value and append the string "Image" to it in Angular, you can make use of string interpolation within square brackets. Here's an example of how you can achieve this:

<app-custom-dropzone *ngIf="displayimage" [field]="option.toLowerCase() + 'Image'" [formData]="questionForm" (onFormGroupChange)="onChange($event)"></app-custom-dropzone>

In the above code, option.toLowerCase() converts the value of option to lowercase, and then the string "Image" is appended to it using the + operator. This combined value is then passed as the [field] binding to the app-custom-dropzone component.

With this approach, if option is "A", it will be converted to lowercase as "a", and then "Image" will be appended to it, resulting in the [field] value being "aImage". Similarly, for "B", it will be converted to "b" and appended with "Image" to give "bImage", and so on.

This way, the [field] value will dynamically change based on the value of option in each iteration of the loop.

Vijayalashmy
  • 36
  • 4