I am very new to Angular. In my Angular app I have a navbar folder in src/app/components/navbar and my navbar.component.ts file looks like this:
navbar.component.ts
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
navbar.component.html
<p>nav bar is working</p>
index.html
<app-navbar></app-navbar>
but when I run localhost server it is not displaying nav bar is working in my index.html. how can I fix this?
You should use your component in app.component.html page like this -
<app-navbar></app-navbar>
Not in index.html because this is not your bootstrap component.
you always use <app-root></app-root> component in index.html file because this is the component which bootstraped in main module like this -
bootstrap: [AppComponent]
import navbar in app-module.ts and put the balise <app-navbar></app-navbar> in app.component.html
Related
maybe its a bug or maybe I'm just stupid idk
I'm still new and I've just started learning angular
but firebase tutorial lead me here and I just need a router so I implemented this
here is the problem
when I edit my HTML file in ./app/home/home.template.html
it doesn't hot reload the webpage even I shift reload the browser
it only works if I F5 or refresh the whole IDE, and its a pain in the ass because every time I have minor changes that I don't know the outcome I need to F5 the IDE and the history will be reset
I've tried just using template: and it works fine
I've tried to do this in the app.component.ts and it worked fine
this is my files for my website
this is the app.component.ts
import { Component, enableProdMode } from "#angular/core";
#Component({
selector: "my-app",
templateUrl: "./app.template",
styleUrls: ["./app.component.css"]
})
export class AppComponent {}
document.head.append('<base href="/"/>');
var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (isDarkMode) {
document.body.className = "dark";
}
this is the home.component.ts
import { Component } from "#angular/core";
#Component({
selector: "home",
templateUrl: "/home.template",
styleUrls: ["./style.css"]
})
export class HomeViewComponent {}
this is the top navigation code in HTML ./app.template.html
<body>
<div>
<div class="topnav">
<img
class="companylogo"
src=""
/>
<a routerLinkActive="active" routerLink="/home">Home</a>
<a routerLinkActive="active" routerLink="/projects">Projects</a>
<a routerLinkActive="active" routerLink="/contact">Contact</a>
</div>
<router-outlet></router-outlet>
</div>
</body>
as you can see in the next pic, it doesn't update
if there's something lacking of an explanation, feel free to ask!
thank you!!
apparently connecting your project to Github Fixes the problem!!
how weird...
The issue I am currently facing is that the link generated by the a tag links to the base page. As you can see in the image it links to
localhost:3000#hello
My goal is to get it to link to
localhost:3000/bodyText#hello
The a tag will come from an external source so my test example mimics that. I have so far been using innerHTML directive to put the external html in the html template.
Here is the component I am working with
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
template: '<div [innerHTML]=html></div>',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() {
}
html = "A tag <a name=\"hello\" id= \"hello\"/> "
ngOnInit() {
}
}
I solved this by adding a click handler to the html tag and then using scrollIntoView and getElementById instead of using an a tag.
app.component.ts
<div>
<app-head></app-head>
<app-body></app-body>
</div>
head.component.ts
...
#Component({
selector: 'app-head',
templateUrl: './head.component.html',
styleUrls: ['./head.component.scss'],
providers: []
})
...
body.component.ts
...
#Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.scss'],
providers: []
})
...
So the pages loads with content head + body but now I wanted to route to a different page and replace entire existing page with the new page. How do I do that?
In my app.module.ts I have the following...
const routes: Routes = [
{ path: 'newPage', component: NewComponent}
]
I wanted use when clicked a button to be redirected to this page and replace existing <app-head> and <app-body> is this possible?
If I just use below I still see the current <app-head> and <app-body>
<button type="button" (click)="loadNewPage()" >
body.component.ts
loadNewPage() {
this.router.navigate(['/newPage']);
}
The results give me the current page.... and doesnt really apply since I am not concating the contents together. I want to replace the head.html and body.html with newpage.html from the NewComponent.ts
You need to replace the content in AppComponent with a router-outlet component and move that replaced content to a new component such as HomeComponent. Use the HomeComponent in your default route so it will load when you initially visit the site.
It's probably best if you check the documentation for Routing & Navigation since this is a pretty fundamental topic in Angular and there are a lot of details you should learn before you get too far.
App.component.html
<router-outlet></router-outlet>
home.component.html
<div>
<app-head></app-head>
<app-body></app-body>
</div>
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent }
{ path: 'newPage', component: NewComponent}
]
You will want to put a <router-outlet></router-outlet> in your app component and move what's in your current app component to a new component. Then update your routes to:
const routes: Routes = [
{ path: '', component: TheStuffYouMovedComponent },
{ path: 'newPage', component: NewComponent }
]
I can't work out why Angular will not allow me to reference my components selector. I have a page which when you click on a list item the page should bring up another templates html. This is my code.
The error I keep receiving is 'message-component' is not a known element:
1. If 'message-component' is an Angular component, then verify that it is part of this module.
2. If 'message-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Messages.component.html
<div id="Case" class="w3-container city" style="display:none">
<h2>Case</h2>
<message-case> </message-case>
</div>
I don't understand why it is giving me this error when the Message Component is declared and imported in both the NgModule and within the component.
Messages.Module.ts
#NgModule
({
imports: [SharedModule],
declarations: [
MessagesComponent,
MessageCaseComponent,
MessagesFilterPipe,
CreateMessageComponent,
],
})
Finally this is the file I am trying to display using the components selector
import { Component, OnInit } from '#angular/core';
import { IMessage } from './message';
import { ActivatedRoute, Router, Params } from '#angular/router';
import {MessagesComponent} from './messages.component';
import {CreateMessageComponent} from './createmessage.component';
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: 'message-case.html'
})
All help would be appreciated! I'm seemingly at a dead end right now.
Firstable the name file is wrong you putted this filename in the description
"Messages.component.html"
And the path of the template must contains "./" if it is in the same folder if it is in another folder you must put the relative path folder/file
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: './Messages.component.html'
})
I am trying to create an application that has two bottom navigation tabs, and each one will be a different component
This is my code:
import {Page} from 'ionic-angular';
import {Component} from 'angular2/core';
import {ckAutoLoanCalculator} from '../../components/ckAutoLoanCalculator/ckAutoLoanCalculator';
#Page({
template: `<ion-navbar *navbar class="contact_navbar">
<ion-title>Loan calculator</ion-title>
</ion-navbar>
<ion-content><ck-auto-loan-calculator></ck-auto-loan-calculator></ion-content>`,
})
class CompareRates {}
#Page({
templateUrl: 'build/pages/home/home.html',
directives: [ckAutoLoanCalculator],
})
export class Home {
loan_calculator: any;
compare_rates: any;
constructor() {
this.loan_calculator = LoanCalculator;
this.compare_rates = CompareRates;
}
}
As you can see, I am trying to load ck-auto-loan-calculator component when clicking on the Loan calculator tab .. but it does not load the content, although I can see <ck-auto-loan-calculator> inside the content
Do I need to trigger something, or ?
It looks like you are missing the import for your custom tab component.
In Angular2, to pass the class reference to the directives property, you need to make it available in that files 'variable scope'
import {ckAutoLoanCalculator} from './path/to/component'
I would include the ckAutoLoanCalculator class into the page that actually uses it, in your case the CompareRates one:
#Page({
template: `
<ion-navbar *navbar class="contact_navbar">
<ion-title>Loan calculator</ion-title>
</ion-navbar>
<ion-content>
<ck-auto-loan-calculator></ck-auto-loan-calculator>
</ion-content>
`,
directives: [ckAutoLoanCalculator]
})
class CompareRates {}
and not the Home one.
It was actually export class CompareRates {} what I needed