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 }
]
Related
I'm trying to use a template tag inside an Angular component.
Following the MDN example I created a similar stackblitz example.
In the original example, the template tag has no children but it's content has children. On my example it's the other way around. The template has the children and content is empty (open the console and click the button to see it).
As a result, trying to manipulate the cloned template content fails.
What am I doing wrong?
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
click() {
const template: HTMLTemplateElement = document.querySelector('#t');
console.log(`template.childElementCount: ${template.childElementCount}`);
console.log(`template.content.childElementCount: ${template.content.childElementCount}`);
const content = document.importNode(template.content, true);
console.log(content.querySelector('.c2'));
}
}
app.component.html
<button (click)="click()">test</button>
<template id="t">
<div class="c1">
<div class="c2">{{ name }}</div>
</div>
</template>
Console result
You should only call template and not template.contentas first argument.
const content = document.importNode(template, true);
console.log(content.querySelector('.c2'));
Turns out there is an open bug about this: https://github.com/angular/angular/issues/15557
As a workaround I created the template with createElement.
const name = "answer";
const template = document.createElement('template');
template.innerHTML = `<div class="c1"><div class="c2">${name}</div></div>`;
console.log(`template.childElementCount: ${template.childElementCount}`);
console.log(`template.content.childElementCount: ${template.content.childElementCount}`);
const content = document.importNode(template.content, true);
console.log(content.querySelector('.c2'));
Here is the markup of my home page. I wrote several routes, and I need to display the content of the corresponding component instead of the home page when switching to them. And I have it added from the bottom of the home, and the home content continues to be displayed.
<div class="container">
<div class="row">
<app-header></app-header>
</div>
<div class="row">
<app-home></app-home>
<router-outlet></router-outlet>
</div>
<div class="row">
<app-footer></app-footer>
</div>
</div>
This is my app-home:
<app-home-news [homeImages]="homeImages"></app-home-news>
<router-outlet></router-outlet>
This is my routes:
const routes: Routes = [
{ path: 'sign-up', component: SignUpComponent },
{ path: 'sign-in', component: SignInComponent }
];
There is no error, the content simply adds to the home. How to make it appear in his place?
See anything which is outside <router-outlet></router-outlet> will always be there. Like in your case header and footer only should be in main html not home component. Anything you to change on the basis of routing, you should be part of routing configuration.
Make the following changes
<div class="container">
<div class="row">
<app-header></app-header>
</div>
<div class="row">
<!-- removed the home component -->
<router-outlet></router-outlet>
</div>
<div class="row">
<app-footer></app-footer>
</div>
</div>
Add the home component as the part of the routing.
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'sign-up', component: SignUpComponent },
{ path: 'sign-in', component: SignInComponent }
];
Note : I add the component at the root level so I left the path blank but you can as per your path like
{ path: 'home', component: HomeComponent },
You need to be careful about your routes and what router outlets your urls are going to populate. It's not just a case of putting a router-outlet at the bottom of each of your components to display something new...
Assuming I had a very basic AppComponent template:
<h1>Hello</h1>
<router-outlet></router-outlet>
... and some configured routes:
{ path: '', component: HomeComponent }
{ path: 'test', component: TestComponent },
{ path: 'hello', component: HelloComponent}
... which just contained their own names in a p tag (home, test, and hello respectively).
The following would be true for each url:
example.com
Hello
Home
example.com/test
Hello
Test
example.com/hello
Hello
Hello
The route has loaded the component into the router-outlet.
If my components then had router outlets of their own, we're in to child route territory, wherein you start to use urls such as example.com/test/abc, with your routes looking more like:
{
path: 'test',
component: TestComponent,
children: [
{ path: 'abc', component: AbcComponent },
{ path: 'def', component: DefComponent }
]
}
Which would result - assuming the same content rules as above would look like:
example.com/test/abc:
Hello
Test
Abc
example.com/test/def:
Hello
Test
Def
Typically, your AppComponent handles your site-wide header/footer/nav/etc. with a single router-outlet that every other component will be loaded into, which includes your home page itself...
{ path: '', component: HomeComponent }
{ path: 'sign-up', component: SignupComponent }
{ path: 'sign-in', component: SigninComponent }
There may well be further router-outlets in the components (as above), but it seems that what you currently WANT, most likely, is this case rather than the more complex type with nested outlets above that you currently HAVE.
I am using this angular ng2 slide menu library. Can you please suggest me how to close the menu after selecting any item.
The configuration says there is an option. Not sure how to configure the value.
Thanks,
Raja K
as per angular ng2 slide library documentation
in your template you add config attribute, like
<cuppa-slidemenu
[menulist]="menuItemsArray"
[config]="config"
(open)="onMenuOpen()"
(close)="onMenuClose()"
(onItemSelect)="onItemSelect($event)">
</cuppa-slidemenu>
and in your ts file, you can define config, as shown in documentation.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
config = {
closeOnCLick: true
};
}
here is a live working demo
I just started migrating an app to Angular + Flex-Layout + Angular Material.
I decided to have my routing in an external file called "app-routing.module.ts". I export my module in in the app.module.ts within "imports". This is my routing file:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './home/home.component'
import { CreateMatchComponent } from './match/create-match.component'
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'match/new', component: CreateMatchComponent}
];
#NgModule({
imports: [ RouterModule.forRoot(routes)],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
And here is the HTML from the app.component that renders my router outlet.
<div class="containerX">
<div fxLayout="row wrap">
<mat-toolbar color="primary" class="mat-elevation-z4">
<span>Amazing Football Stats App</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">favorite</mat-icon>
<mat-icon class="example-icon">delete</mat-icon>
</mat-toolbar>
</div>
<div fxLayout="row wrap" style="padding-top: 8px">
<router-outlet></router-outlet>
</div>
</div>
As you can see, my App Component has a div with the navigation bar and then another div with my <router-outlet>.
If I go to localhost:4200 it loads <app-root> which contains the <nav-bar> and the <router-outlet> and since the "route" is empty it redirects me to "/home".
Now my problem is this: If I change the URL to: localhost:4200/match/new (In the browser, in the URL bar) hit enter, I would expect to leave the <nav-bar> and only update the <router-outlet> and the same goes backwards.
If I am on a different page and I change the URL to "/home" (or even leaving it empty) it should keep the nav bar and only update the router outlet.
Sorry if this is a stupid question I just started with angular routing. What am I doing wrong?
When you change the browser location, the browser is handling that change and will send a new HTTP request to your server. That's why it reloads the whole page.
In order to only change the component loaded in the <router-outlet>, you need Angular's router to handle the change, which is done by using the routerLink directive:
<a routerLink="match/new" routerLinkActive="active">Create Match</a>
or programmatically with a call to router.navigate:
constructor(private router: Router) {}
...
goToCreateMatch() {
this.router.navigate(['/match/new']);
}
Here's a link to angular's documentation, for more info:
https://angular.io/guide/router#router-links
https://angular.io/api/router/Router#navigate
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'
})