No response from buttons in Angular app utilizing Bulma framework

I am making my first website using visual studio code with angular cli and the bulma framework. I am having trouble using buttons on the localhost in two areas of the website and I think they must be related. I have also uploaded the project onto my raspberry pi server and get the same issues as my localhost. Observation:

  1. I can add "/contact" to end of localhost and it will direct me to the contact page.
  2. when viewing the navbar on my phone after uploading project to raspberry pi server Home and Contact navbar items are shaded gray instead of white.

Issues:

  1. noting happens when clicking submit button on contact page. (clicking should make an alert pop up).
  2. nothing happens when clicking home or contact navbar button on header. (clicking should route user to home/contact page)

I have made a contact page (contact.component.ts) with a submit button. Also, I have made a navbar with "home" and "contact" located in header.component.ts. I have app-routing.modules.ts set up for this and have the routing injection set up in app.component.ts. I have routerlink set up in the header.component.ts as well. This is my first time using everything so I am not sure if my routing configuration is wrong or maybe settings on my browser? I am using chrome and have pop-ups allowed. I have gone through relevant sections on angular website and cannot find my error. Thank you for any guidance.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.components.ts:


@Component({
  selector: 'app-root',
  template: `
  <!-- header -->
  <app-header></app-header>
  
  <!-- routes get injected here -->
  <router-outlet></router-outlet>

  <!-- footer -->
  <app-footer></app-footer>
  `,
  styles: []
})
export class AppComponent {
  Title = 'Forrest';
}

app-routing.module.ts:

import { RouterModule, Routes } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

header.component.ts:


@Component({
  selector: 'app-header',
  template: `
  <div class="navbar is-dark">
    <!-- logo -->
      <div class="navbar-brand">
        <a class="navbar-item">
          <img src="assets/img/website_logo.jpg">
        </a>
      </div>

    <!-- Menu -->
    <div clas="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" routerlink="/">Home</a>
      <a class="navbar-item" routerlink="/contact">Contact</a>
    </div>
    </div>
  </div>
  `,
  styles: [
  ]
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

contact.component.ts:


@Component({
  selector: 'app-contact',
  template: `
    <section class="hero is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">Contact Me</h1>
        </div>
      </div>
    </section>

    <section class="section">
    <div class="container">

      <!-- Contact Form -->
      <form ng-submit="submitForm()" #contactForm="ngForm">

        <!-- Name -->
        <div class="field">
          <label class="label">Name</label>
          <input 
            type="text" 
            name="name" 
            class="input" 
            [(ngModel)]="name" 
            #nameInput="ngModel" 
            required>
          <div class="help is-error" *ngIf="nameInput.invalid && nameInput.touched">
            Your name is required.
          </div>
        </div>

        <!-- Email -->
        <div class="field">
          <label class="label">Email</label>
          <input 
            type="text" 
            name="email" 
            class="input" 
            [(ngModel)]="email" 
            #emailInput="ngModel" 
            required
            email>
          <div class="help is-error" *ngIf="emailInput.invalid && emailInput.touched">
            A valid email is required.
          </div>
        </div>

        <!-- Message -->
        <div class="field">
          <label class="label">Message</label>
          <textarea name="message" class="textarea" [(ngModel)]="message"></textarea>
        </div>

        <!-- Submit Button -->
        <button 
          type="submit" 
          class="button is-large is-warning"
          [disabled]="contactForm.invalid">
            Send
        </button>

      </form>

    </div>
    </section>
  `,
  styles: []
})
export class ContactComponent implements OnInit {
  name: string;
  email: string;
  message: string;

  constructor() {}

  ngOnInit(): void {}

  submitForm() {
    const message = `My name is ${this.name}. My email is ${this.email}. My message is ${this.message}`;
    alert(message);
  }
}

home.component.ts:


@Component({
  selector: 'app-home',
  template: `
<section class="hero is-primary is-bold is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">

      <h1 class="title">Welcome!</h1>
    
    </div>
  </div>
</section>
  `,
  styles: [`
    .hero {
      background-image: url('/assets/img/Home_Background.jpg') !important;
      background-size: cover;
      background-position: center center;
    }
  `]
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

footer.component.ts:


@Component({
  selector: 'app-footer',
  template: `
  <!-- footer -->
  <footer class="foot">
  <div class="container content has-text-centered">
    <p>Made by Forrest, 2022</p>
  </div>
  </footer>
  `,
  styles: [
  ]
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

1 answer

  • answered 2022-05-02 03:58 random

    noting happens when clicking submit button on contact page. (clicking should make an alert pop up).

    <!-- Contact Form -->
    <form ng-submit="submitForm()" #contactForm="ngForm">
    

    You had added ng-submit as an attribute. Since it is an event listener, it should be surrounded by round braces in camelcase. see https://angular.io/api/forms/NgForm.

    <form (ngSubmit)="submitForm()" #contactForm="ngForm">
    

    nothing happens when clicking home or contact navbar button on header. (clicking should route user to home/contact page)

    There doesn't seems to be wrong with code content provided, but it seems like routing is not taking into effect. Might be you had not added the <base href="/"> tag in the head tag of your index.html file. Reference - https://angular.io/guide/router

    Note - Check for errors in console too.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum