Hello, I've been using angular for about two months now. I'm trying to create a form into which users can enter information. When the user has finished entering the info, they can click submit, and a post request is sent to the backend api. The problem is, my page won't show up in the browser. This is really weird because:
I'm sure my routing is right.
I'm not getting any errors either in my IDE, in the browser console, or in my terminal, where the code is running.
Here's my code:
//admin-dashboard.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HymnsService } from '../services/hymns.service';
import { HymnsModel } from '../models/hymns.model';
@Component({
selector: 'app-admin-dashboard',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './admin-dashboard.component.html',
styleUrl: './admin-dashboard.component.css'
})
export class AdminDashboardComponent {
hymn: HymnsModel = {id: NaN, title: '', author: '', description: '', content: ''};
constructor(private hymnService: HymnsService){}
addHymn(): void{
this.hymnService.addHymn(this.hymn).subscribe(() => {
console.log('Hymn added successfully');
})
}
}
//admin-dashboard.component.html
<form (submit)="addHymn()">
<label>Title:</label>
<input type="text" [(ngModel)]="hymn.title" name="title" required>
<br>
<label>Description:</label>
<textarea [(ngModel)]="hymn.description" name="description" required></textarea>
<br>
<label>Content:</label>
<textarea [(ngModel)]="hymn.content" name="content" required></textarea>
<br>
<button type="submit">Add Hymn</button>
</form>
There are no styles yet...
Any thoughts? Thanks!