Angular 2 Routing in more then one component - javascript

I have an app component where the routes are defined and the <router-outlet></router-outlet> is set. I also have a menu component where I would like to set the [routerLink] using the app routes. How do I link bought of them together (Share routes).
App Component:
import {Component, View} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {HomeComponent} from './../../components/home/home';
#Component({
selector: 'app',
moduleId: module.id,
providers: [
ROUTER_PROVIDERS
]
})
#View({
templateUrl: 'app.html',
styleUrls: ['app.css']
})
#RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }
])
class AppComponent {
}
bootstrap(AppComponent);
Menu Component:
import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
#Component({
selector: 'left-side-column',
moduleId: module.id,
})
#View({
templateUrl: 'left-side-column.html',
styleUrls: ['left-side-column.css']
})
class LeftSideColumnComponent {
}
bootstrap(LeftSideColumnComponent);

When you use the bootstrap function twice, you create several independent applications.
If you want that your menu uses routes defined in the AppComponent, you need to use the corresponding component into the app one and bootstrapping it.
Something like:
import { MenuComponent } from '...';
#Component({
(...)
template: `
<left-menu></left-menu>
<router-outlet></router-outlet>
` ,
directives: [ ROUTER_DIRECTIVES, MenuComponent ]
})
export class AppComponent {
}
bootstrap(AppComponent, [ ROUTER_PROVIDERS ]);

Related

Angular 4 doesnt display my components views

Im learning to use Angular 4 and im not being able to render more than 1 template, my starting App template is OK, and it renders fine, but then i created 2 more components with "ng g component newComponent" and im not being able to make them display anything. I can type the new components URL in the browser and it navigates fine without errors, but it always displays the app.component.html My files are like this:
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<p>
ASDASDASDAS
</p>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent }
];
#NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
dashboard.component.html
<p>
dashboard works!
</p>
dashboard.componentspec.ts
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
dashboard.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
My login component is similar, and my three components displays the same:
ASDASDASDAS
I dont know where my problem is, i have no error messages in any of the consoles. My project Structure is:
-src
--app
---dashboard
----dashboard.component.html
----dashboard.component.less
----dashboard.component.spec.ts
----dashboard.component.ts
---login
----login.component.html
----login.component.less
----login.component.spec.ts
----login.component.ts
--app.component.html
--app.component.less
--app.component.spec.ts
--app.component.ts
--app.module.ts
Do i need different NgModules for my purpose of totally separated views? I mean i want a page with "Login", another for "Dashboard", another for idk, a new page...etc, each one needs an NgModule for having separated views?
Any help is much appreciated!!
You should place <router-outlet></router-outlet> into app.component.html to define a place where other components will be rendered.
An example of app.component.html content:
<div class="app">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
You can read more here.

Angular 2 pass data parent to child component

I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake?
app.component.ts
import { ChildComponent } from './child.component';
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
entryComponents:[ChildComponent]
})
export class AppComponent {
title = 'app works!';
}
child.component.ts
import { AppComponent } from './app.component';
import { Component, Input } from '#angular/core';
#Component({
selector: 'child',
templateUrl: './child.component.html'
})
export class ChildComponent {
#Input() input :string;
}
app.component.html
<h1>
{{title}}
</h1>
<child [input]="parent to child"> </child>
child.component.html
<div>{{input}}</div>
app.module.ts
import { ChildComponent } from './child.component';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
If you write [input]="parent to child" to the template then it means that you are refering to the parent components this.parent to child which doesn't exists.
You can do something like this:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
entryComponents:[ChildComponent]
})
export class AppComponent {
title = 'app works!';
parentInput = 'parent to child';
}
then in the template:
<h1>
{{title}}
</h1>
<child [input]="parentInput"> </child>
Source: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child
Just change this line and you are good to go
<child input="parent to child"> </child>
Or if you want to do
<child [input]="parent to child"> </child>
#echonax has alredy given the answer.

Angular2 Routing - Child template not dispalying

I am trying to learn angular 2 routing and I am stuck here I can't get the template of child component to display. I have the following two pages
page1.ts
import {Component} from 'angular2/core';
#Component({
selector: "page1",
template: `page 1 goes here.`
})
export class Page1Cmp{}
page2.ts
import {Component} from 'angular2/core';
import {RouterLink,RouteConfig} from 'angular2/router';
import {ChildCmp} from './child';
#Component({
selector: "page2",
template: `Hello its page 2
<router-outlet></router-outlet>`
})
#RouteConfig([
{path: "/", component: ChildCmp, name: "Child", useAsDefault: true}
])
export class Page2Cmp{}
Here is the child component that page2.ts is trying to route
child.ts
import {Component} from 'angular2/core';
#Component({
selector: "child",
template: `child content goes here.`
})
export class ChildCmp{}
This child component is not being displayed on page2
Here is the root component
app.ts
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';
#Component({
selector: "app",
template: `<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
#RouteConfig([
{path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true},
{path: "/page2/...", name: "Page2", component: Page2Cmp}
])
class MyApp{}
bootstrap(MyApp, [
ROUTER_PROVIDERS
]);
When I route to page2 I don't see the template of child.ts component. I re-produced the problem on plunker here
plunker
import {RouterLink,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: "page2",
directives: [ROUTER_DIRECTIVES],
//add this and it will start working as expected.
template: `<br>Hello its page 2<br>
<router-outlet></router-outlet>`
})

How to render partial inside template

I am using angular 2 for a project and i want to render a partial inside a template without creating a component. Is that possible?
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
directives: [ROUTER_DIRECTIVES],
pipes: []
})
#RouteConfig([
])
export class Ng2Showroom {
}
ng2-showroom-template
<!-- import navigation.html here -->
<p>
Hello World
</p>
<router-outlet></router-outlet>
Well, if your template is part of another component, call it, NavigationComponent which has a selector of 'navigation-component', then you can add that tag to your ng2-showroom-app template and add the navigation component as a directive...
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {NavigationComponent} from 'src/navigationComponent';
#Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
directives: [ROUTER_DIRECTIVES, NavigationComponent],
pipes: []
})
#RouteConfig([
])
export class Ng2Showroom {
}
<navigation-component></navigation-component>
<p>
Hello World
</p>
<router-outlet></router-outlet>
But I'm guessing what you are really going for is the more common scenario of a master page that has HTML that is always there, and then a template that gets swapped out, based on navigation...
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Page1Component} from 'src/page1component';
import {Page2Component} from 'src/page2component';
#Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
directives: [ROUTER_DIRECTIVES],
pipes: []
})
#RouteConfig([
{ path: '/page1', as: 'Page1', component: Page1Component },
{ path: '/page2', as: 'Page2', component: Page2Component }])
export class Ng2Showroom {
}
<p>HTML always shown above content, regardless of navigation.</p>
<a [routerLink]="['Page1']">Link to Page 1</a>
<a [routerLink]="['Page2']">Link to Page 2</a>
<router-outlet></router-outlet>
<p>HTML always shown below content.</p>
Now when they click on 'Link to Page 1', whatever you've defined in Page1Component will display within the <router-outlet> placeholder.

Angular2 router-link issue when injecting a template component with router links

Angular2 router-link issue when injecting a template component with router links
I have an app.ts file and I want to dependency inject my navigation component into my app.ts file.
I've made a navigation component that has a template and no functionality.
The template injects fine into app.ts. However, when I add the route-links to the template I always get console errors when using router-links only.
Here is my navigation component ts file:
import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
#Component({
selector: 'HeaderNavigation'
})
#View({
templateUrl: '/src/app/components/header/header.html'
})
export class HeaderNavigation{
}
Here is my navigation component html file:
<header>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a [router-link]="['./Login']">Log In</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</header>
This is my app.ts file: This file injects the navigation component above:
import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {Injectable} from 'angular2/angular2';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {Login} from './components/login/login';
import {HeaderNavigation} from './components/header/header';
#Component({
selector: 'app'
})
#View({
template: `
<HeaderNavigation></HeaderNavigation>
<div class="content">
<router-outlet></router-outlet>
</div>
`,
directives: [RouterOutlet, RouterLink]
})
#RouteConfig([
{ path: '/', redirectTo: '/login' },
{ path: '/login', component: Login, as: 'Login' }
])
#Injectable()
export class AppComponent {
constructor(){}
}
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS]);
This is the error message I get from my console:
I solved my own question!
was missing from the navigation html component and then I had the router-link name wrong and changed it to "Login" from "login" to match it in router config in the app.ts file.
I have made these changes in the above code for anyone who needs it.
For those using angular 2 rc4, here is what i'm using:
header.component.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
#Component({
moduleId: module.id,
selector: 'ui-header',
templateUrl: 'header.component.html',
styleUrls: ['header.component.css'],
directives: [ROUTER_DIRECTIVES],
})
export class HeaderComponent{
}
To add header in other component: other.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { HeaderComponent } from'../shared/header/header.component';
#Component({
selector: 'ui-other',
template: `
<ui-header></ui-header>
<div class = "container">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
export class OtherComponent {
}

Categories