1

There is an image in the select options along with text. But when I select any option, the image is not getting shown in the selected content.

 <mat-select>
   <mat-option [value]="1"><img src="assets/image/survey/short-text.png">Short Answer</mat-option>
   <mat-option [value]="2"><img src="assets/image/survey/paragraph.png">Paragraph</mat-tion>
   <mat-option [value]="3"><img src="assets/image/survey/redio.png" >Multiple Choice </mat-option>  
   <mat-option [value]="4"> <img src="assets/image/survey/chechbox.png">Checkbox</mat-option> 
   <mat-option [value]="5"><img src="assets/image/survey/date.png" >Date</mat-option>
   <mat-option [value]="6"><img src="assets/image/survey/linear-scale.png" >Linear cale</mat-option>
 </mat-select>
scary_devil
  • 268
  • 4
  • 19
Geeta
  • 153
  • 1
  • 8
  • 3
    can you explain what is your issue, just show the that code does not explain anything – Ricardo Mar 18 '18 at 17:16
  • The problem is obviously your path. 'assets/image/survey/' is a relative path. Does your app know which suffix to attach in order to reach the absolute path? e.g. '/Users/user/angular/myApp/assets/image/survey/linear-scale.png' –  Mar 18 '18 at 17:21
  • I want to show the selected content as image + text, in drop down option it show image and text both but after selecting option its showing only text – Geeta Mar 18 '18 at 17:26
  • Are you using angular cli? If yes, and the images are in the correct `assets/image/survey` folder, don't forget to restart the cli after you've added these assets – David Mar 18 '18 at 18:31
  • can you try data-icon attribute of the option `data-icon="assets/image/survey/paragraph.png"` – scary_devil Mar 19 '18 at 05:21

1 Answers1

0

Hi in span it is not possible to add tag inside, so your should use background image of selected like

.selectedImg {
    white-space: nowrap;
    display: inline;
}

.option1 {
    background: url("assets/image/survey/short-text.png") center / contain no-repeat;
}

.option2 {
    background: url("assets/image/survey/paragraph.png") center / contain no-repeat;
}

.option3 {
    background: url("assets/image/survey/redio.png") center / contain no-repeat;
}

.option4 {
    background: url("assets/image/survey/chechbox.png") center / contain no-repeat;
}

.option5 {
    background: url("assets/image/survey/date.png") center / contain no-repeat;
}

.option6 {
    background: url("assets/image/survey/linear-scale.png") center / contain no-repeat;
}
<mat-select class="selectedImg" [(value)]="selected" [ngClass]="selected">
        <mat-option value="option1">
           <img src="assets/image/survey/short-text.png">Short Answer
        </mat-option>
        <mat-option value="option2">
           <img src="assets/image/survey/paragraph.png">Paragraph
        </mat-option>
        <mat-option value="option3">
           <img src="assets/image/survey/redio.png">Multiple Choice 
        </mat-option>
        <mat-option value="option4">
           <img src="assets/image/survey/chechbox.png">Checkbox
        </mat-option>
        <mat-option value="option5">
           <img src="assets/image/survey/date.png">Date
        </mat-option>
        <mat-option value="option6">
           <img src="assets/image/survey/linear-scale.png">Linear cale
        </mat-option>
    </mat-select>
Jassi Walia
  • 75
  • 4