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:
- I can add “/contact” to end of localhost and it will direct me to the contact page.
- 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:
- noting happens when clicking submit button on contact page. (clicking should make an alert pop up).
- 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 {
}
}