CODEWITHSUNDEEP
javascripthtmlangularselectdrop-down-menu
rokie12234
rokie12234

Reputation: 63

HTML selected is not working with Angular 6

I'm working with and in angular,

In my template there is enumeration hardcoded as possible value:

<div class="col-lg-9">
  <select id="content_type_select" name="content_type"  class="form-control multiselect-select-one" [(ngModel)]="selectedContent.contentType" data-fouc>
    <option [selected]="selectedContent.contentType===ContentType.Image" [value]="ContentType.Image">Image</option>
    <option [selected]="selectedContent.contentType===ContentType.Video" [value]="ContentType.Video">Video</option>
    <option [selected]="selectedContent.contentType===ContentType.Text"  [value]="ContentType.Text">Txt</option>
    <option [selected]="selectedContent.contentType===ContentType.HTML"  [value]="ContentType.HTML">HTML</option>
  </select>
</div>

In my typescript I'm sending selectedContent to a template and I've loged in in cosole to check value of my selectedContent and it looks like this:

enter image description here As you can see when I console.log(this.selectedContent) there is property contentType which has value of 1 and in my dropdown there should be Image selected, but nothing is selected acctually..

enter image description here

But if I write [selected]="true" then that option is selected... how come :/

Thanks guys

Cheers

Upvotes: 0

Views: 673

Answers (1)

Hudson Tavares
Hudson Tavares

Reputation: 161

I think you need to provide a bit more of context (like the implementation of ContentType enumeration). But let me provide you some usual answer for this kind of problem.

Enumerations are not made automatically available on the template simply because they are imported on component's class. Assuming you have an enumeration like

export enum ContentType {
  Image = 1,
  Video = 2,
  Text = 3,
  HTML = 4
}

If you need to consume it from template, it must first be associated to some publicly available class property, e.g. public readonly contentType = ContentType and then referenced like this on template code:

<select id="content_type_select" name="content_type"  class="form-control multiselect-select-one" [(ngModel)]="selectedContent.contentType" data-fouc>
    <option [selected]="selectedContent.contentType === contentType.Image" [value]="contentType.Image">Image</option>
    <option [selected]="selectedContent.contentType === contentType.Video" [value]="contentType.Video">Video</option>
    <option [selected]="selectedContent.contentType === contentType.Text"  [value]="contentType.Text">Txt</option>
    <option [selected]="selectedContent.contentType === contentType.HTML"  [value]="contentType.HTML">HTML</option>
  </select>

Also, be careful on JavaScript types, as the identity operator is being utilised. 1 == "1" but 1 !== '1'.

Upvotes: 1

Related Questions