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.

possible duplicate of https://stackoverflow.com/questions/2864238/line-break-in-html-select-option — Pardeep Jain, Nov 27 '18 at 09:20

score 2 · Answer 1 · answered Nov 27 '18 at 09:19

2

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.

answered Nov 27 '18 at 09:19

Pardeep Jain

84,110
37
165
215

Yes, i have used different approach in order to present the data. – Anas Sabir Nov 28 '18 at 05:51
Great, you can edit my answer if you want to add some potential to this answer. – Pardeep Jain Nov 28 '18 at 05:53

score 1 · Answer 2 · answered Nov 27 '18 at 09:32

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>

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

2 Answers2