It's been a while since I last worked with Angular and now I'm tasked with working on an existing system.
I introduced an NgModal dialog to send text messages, designed as shown here:
https://i.sstatic.net/67U1M.png
Below is the code snippet I used for this implementation:
<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 corresponds to 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);
}
}
Every time I open this dialog, the dropdown menu shows up empty without setting it to the default first element in the array as intended during ngInit initialization.
Additionally, attempted to find a method to change the value in the text area dynamically based on the selection made in the dropdown. While my past experience involved using JQuery selectors for such tasks, I am restricted from utilizing JQuery in this particular project.
If anyone has any insights or assistance to offer, it would be greatly appreciated.
Thank you in advance.