#Page not displaying in angular.

19 messages · Page 1 of 1 (latest)

flint karma
#

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!

rain sunBOT
#

:warning: Please wait a bit longer. You can ping helpers <t:1717802376:R>.

rain sunBOT
#

:warning: Please wait a bit longer. You can ping helpers <t:1717802376:R>.

old bramble
#

@flint karma It's a a bit hard to give much other than generic debugging advice: have you put logging messages in your main app entry point to see if any code is loading/running at all?

flint karma
old bramble
#

Yeah, you may have to just keep tracing through and adding logging through each step of the process: add logging in the routing logic, see if that's getting hit, etc.

#

Also, is any HTML in the console? I guess the other possibility would be some styling issue is hiding it, but that seems like a long shot.

flint karma
#

I know the routing works. It's something about a few lines of the code, because, when I remove them, the page displays. But, for the life of me, I can't tell what about the lines is problematic. As far as styles go... there are none yet.

#

Thank for your help thus far!

old bramble
#

By "styles" do you mean HTML?

flint karma
#

There is plenty of HTML.

old bramble
#

Also, is any HTML in the console?
Was there an answer on that, then?

#

I guess I assume there isn't, if there's no CSS to hide it, but crazier things have happened.

flint karma
#

The console is logging nothing. There are NO errors. Really strange.

#

I'm sorry, I don't know what the conventions are in this community, and what your own preferences are, so I feel bad asking this, but could I share my screen with you?

old bramble
#

Yeah, sorry that isn't common here and I really can't, anyway.

#

Like I said earlier, I don't have much advice beyond the generic:

Yeah, you may have to just keep tracing through and adding logging through each step of the process: add logging in the routing logic, see if that's getting hit, etc.

#

Maybe the angular discord would know more? I don't really know angular to be honest.