What did i do wrong using ngModel with Angular Material Inputs?

For some reason i cant load data into the input form. There isnt much to explain i guess i am simply overseeing something or doing something wrong.

This is my html:

 <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>

And this is my ts:

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" is just a way to communicate between components, i parse the slide data through that service from another component. When I log the data it seems to get parsed but somehow it doesnt appear on the input fields... Hope you guys can help me ^^

2 Answers

You need to add a name attribute to the input in order to make it work:

 <input matInput name="someName" [(ngModel)]="name" placeholder="Folienname">

Like

 <mat-form-field> <input matInput name="name" [(ngModel)]="name" placeholder="Folienname"> </mat-form-field> <mat-form-field> <input matInput name="text" type="text" [(ngModel)]="text" placeholder="Nachricht"> </mat-form-field>

There was a problem with Routing to the component and parsing the data at the same time. I can't really explain it because i only partially understand whats happening but this is the fix:

from this:

this.event.publish('edit-slide-data', slide);
this.router.routeByUrl('some route');

to this:

this.router.routeByUrl('some route').then(() => {
this.event.publish('edit-slide-data', slide);
});

Thanks for your time!