Angular Typescript set select default option

I have not worked in Angular for a while and I am working on an existing system.

I implemented a NgModal dialog to send text message with the following design:

enter image description here

The code I implemented for it is as follows:

<div class="modal-content">
<div class="modal-header">
    <h5>Send Text Message</h5>
</div>

<div class="sub-title">
  <b>SELECT MESSAGE TEMPLATE:</b>
</div>

<form>
  <div>
    <select name="textmessage" class="select" [(ngModel)]="selectedMessageContentType" (change)="getSelectedTextMessage()">
        <option *ngFor="let messageContentType of messageContentTypes" [value]="messageContentType.contentId">
          {{messageContentType.messageDescription}}
        </option>
      </select>
  </div>
  <br>
  <div>
    <textarea [(ngModel)]="selectedMessageContentType.messageContent" class="textarea" maxlength="5000" type="text" name="textmessagecontent" disabled></textarea>
  </div>
</form>

<div class="modal-footer">
  <button type="button" class="btn btn-outline-primary font-weight-bold" (click)="onSendMessageClicked()">SEND</button>
  <button type="button" class="btn btn-primary font-weight-bold" (click)="onCancelClicked()">CANCEL</button>
</div>

This is the Typescript component:

import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { IssueService } from '../../../../services/issue.service';
import { IssueTextMessageRequestInput } from "../../../../models/inputs/issue.model";
@Component({
    selector: 'textmessage',
    templateUrl: './textmessage.component.html',
    styleUrls: ['./textmessage.component.scss']
})
export class TextMessageComponent implements OnInit {
    messageContentTypes = [
        { contentId: 50, messageDescription: 'Change', messageContent: 'Change something.' },
        { contentId: 51, messageDescription: 'Send Baseline', messageContent: 'Send Base' },
        { contentId: 52, messageDescription: 'Adapter', messageContent: 'Change to Lead Wire Adapter' }
    ];
    selectedMessageContentType: any;
    @Input() messageData: IssueTextMessageRequestInput;
constructor(private activeModal: NgbActiveModal, private issueService: IssueService) { }

ngOnInit() {
    this.selectedMessageContentType = this.messageContentTypes[0];
}

onCancelClicked() {
    this.activeModal.close();
}

onSendMessageClicked() {
    this.messageData.message = this.getMessageContentById(this.selectedMessageContentType).messageDescription;
    console.log(this.messageData);
    /*this.issueService.processAndSendMessageWithIssueActivityTracking(messageData)
    .subscribe((resp) => {});*/
}

getMessageContentById(msgId: number) {
    return this.messageContentTypes.find(content => content.contentId === msgId);
}

}

Whenever I load this dialog the dropdown appears empty, it nevers set to the default first element in the array as I set on ngInit.

Also I tried to find a way to change the text area value depending on the dropdown selection. I tried using something similar to what I did using JQuery selectors, but I am not allowed to use JQuery in this project.

Any clue or help would be useful.

Thanks in advance.

Your value for each option is the messageContentType.contentId:

<option 
  *ngFor="let messageContentType of messageContentTypes" 
  [value]="messageContentType.contentId">

But you've set the selected to this:

this.selectedMessageContentType = this.messageContentTypes[0];

Which means

this.selectedMessageContentType

Is the same as

{ contentId: 50, messageDescription: 'Change', messageContent: 'Change something.' }

Did you mean to do this instead?

<option 
  *ngFor="let messageContentType of messageContentTypes" 
  [value]="messageContentType">

Angular Typescript set select default option

Related

Recent Posts