Having trouble loading data into the input form. There seems to be a simple oversight or mistake on my part.
This is the HTML code I am using:
<mat-form-field>
<input matInput [(ngModel)]="name" placeholder="Folienname">
</mat-form-field>
<mat-form-field>
<input matInput type="text" [(ngModel)]="text" placeholder="Nachricht">
</mat-form-field>
<mat-form-field>
<mat-select [(value)]="color" placeholder="Schriftfarbe">
<mat-option value="#ffffff">White</mat-option>
<mat-option value="#bfbfbf">Lightgrey</mat-option>
<mat-option value="#808080">Grey</mat-option>
</mat-select>
</mat-form-field>
Here is the TypeScript code:
export class SlideEditorComponent implements OnInit {
slides: Slide[];
name: string = '';
text: string = '';
color: string = "#000000";
constructor(
private slideService: SlideService,
private event: EventService
) {
this.event.subscribe('edit-slide-data', (slide: Slide) => {
this.updateValues(slide);
});
}
ngOnInit() {
this.slideService
.getSlides()
.subscribe((data: Slide[]) => {
this.slides = data;
})
}
onSaveSlide() {
this.slideService.addSlide(
this.name,
this.text,
this.color
);
this.name = '';
this.text = '';
this.color = "#000000";
}
updateValues(slide) {
this.name = slide.name;
this.text = slide.text;
this.color = slide.colour;
}
}
The "this.event.subscribe" function is used for communication between components. When logging the data, it appears to be parsed correctly but does not display in the input fields. Any assistance would be greatly appreciated. Thank you!