Need to show the ng-option in two lines angular 6

Question

I need to show data in select with two lines each. I am using ng-select.

          <ng-select [(ngModel)]="selectedData" placeholder="Select Data">
            <div *ngFor="let data of Data">
              <ng-option [value]="data.id">
                {{data.name}} - {{data.price | currency}} 
                {{data.description}} - {{data.code}}
              </ng-option>
            </div>
          </ng-select>

I am using ng-select and trying to show the data in ng-option, it is showing the data in one line. already tried br and /n.

Thanks in advance.

Answer 1

No, you can't!

None browser will allow doing this formatting of text.

But yes you can use some another alternate for show text if needed may be using title which will show data as a tooltip.

Answer 2

This is not supported. Try this instead,

Data.forEach(element => {
    dropDownDataSource.push(id: element.name, value: element.name)
    dropDownDataSource.push(id: element.description, value: element.description)
});



<ng-select [(ngModel)]="selectedData" placeholder="Select Data">
    <option *ngFor="let data of dropDownDataSource" value="{{data.value}}">
        {{data.id}}
    </option>  
</ng-select>