I want to create a navigation panel with tabs, I'm using Bulma, I'll show an example from the documentation.
I'm using routing for the navigation of the project, but from my Matches component, I want to call a subcomponent from each tab.
<div class="tabs">
<ul>
<li class="is-active"><a>Upcoming</a></li>
<li><a>Past</a></li>
</ul>
</div>
Working like this:
From the matches component call a subcomponent app-upcoming and app-past
<div class="upcoming">
<app-upcoming></app-upcoming>
</div>
<div class="past">
<app-past></app-past>
</div>
Use the router-outlet to specify where to display the route components:
https://angular.io/tutorial/toh-pt5#add-routeroutlet
When you use a route component, like this from the documentation.
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: 'heroes', component: HeroesComponent }
];
The component will get loaded into the router-outlet when the path matches heroes. I'd recommend reading the routing documentation and following it along.
It is super easy you just go with router. Take a look of https://angular.io/guide/router.
Related
I'm having trouble getting transitions to work for my child routes.
I have the following pages:
pages/
child/
_id.vue
child.vue
index.vue
Navigating between index and any of the child routes triggers transitions, but when navigating from one child route to another child route there is no transition.
Note that there is a static route /child and dynamic routes for /child/_id. The <nuxt-child /> component is inside child.vue:
<template>
<div class="container">
<h1 class="title">
Child Root Page
</h1>
<nuxt-child />
</div>
</template>
<script>
export default {
key(route) {
return route.fullPath
},
}
</script>
If I remove the static route child.vue and move <nuxt-child /> to index.vue all transitions work, but then I don't have the 'parent' child page anymore.
Is it possible to get the transitions to work in this case?
I have a small repo showing the problem and a github page with the site deployed.
I am new to Vue.JS and require a little help as I am stuck with some logic.
I have been given a project to building and as I am under NDA I can only show comparative code examples.
In one View (Bars), which is brought into the viewport of the application using the router, I have a simple for loop.
<ul class="bar-listings">
<li v-for="bar in bars">
<router-link to="{bar.barPage}">
<div class="item">
<div class="item-bd">
<h2>{{ bar.barName }}</h2>
</div>
</div>
</router-link>
</li>
</ul>
Then in my JS file conatining all my data, I have this (Only one object for now)
export default [
{
barName: "The Tropicana Bar",
barPage: "views/bars/Tropicana",
}
];
The title displays correctly on Bars so the loop is pulling the data correctly.
However, I will have a .vue file for each bar, which also uses the data from my JS file. See below:
<template>
<div class="content-wrapper">
<h1>{{ getBarByIndex({ bars, index }).barName }}</h1>
</div>
</template>
<script>
import bars from "./../../data/bars";
export default {
data() {
return {
bars: bars
};
},
methods: {
getBarByIndex({ bars = [], index = 0 }) {
return bars[index] || {}
}
}
};
</script>
So what I need to solve is how do I make the <a v-bind:href=""> load the view for this bar?
What I think you can do, is to have a child component inside your component, you can leverage this by using nested routes in your router-view, additionally, you can pass props as an object to your router components, parent or child, whatever you need.
Basically, you will have a main router view, but inside your component, you will have another router-view which renders child components.
See: Nested Routes
See: Passing Props to Route components
I'm new to angular and starting to get the hang of routing and components. However I have a question regarding:
How I can navigate to a second page (component) and display only that content and not just load component data into <router-outlet></router-outlet>.
First page component
Second page component
When I click the button I want the whole page to display the second component data only. I basically would like to know how I can do whole page navigation in Angular 4.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ApplyComponent } from './apply/apply.component';
import { RouterModule, Routes } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
ApplyComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'apply', component: ApplyComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.componenter.html
<div class="container">
<br><br>
<h1 class="header center orange-text">First page</h1>
<div class="row center">
</div>
<div class="row center">
<a
routerLink="/apply"
class="btn waves-effect waves-light"
type="submit"
name="action">
Second page
</a>
</div>
<br><br>
</div>
<router-outlet></router-outlet>
apply.component (second page)
<div class="container">
<br><br>
<h1 class="header center orange-text">Second page</h1>
<div class="row center">
</div>
<div class="row center">
<a
routerLink="/"
class="btn waves-effect waves-light"
type="submit"
name="action">
Back
</a>
</div>
<br><br>
</div>
If you have any questions or need clarification don't hesitate to ask!
Thanks beforehand!
/E
In Angular, you can nest one component into another thereby keeping the parent component and then loading the child component within the parent. Components can also exist without being nested into another. Where you declare your component tags really matters.
Let's say we have site which has a navigation bar we want to show on all pages. First of all, a primary component (named app.component) which usually has the selector name <app-root></app-root> (that is if you create your angular project using the Angular cli) is inserted into the index.html, which loads the app.component when the application starts. Now, since we want to show the navbar on all pages, you can create a navbar component and place it's selector tags in the app.component.html (which is the view for app component) and also place your <router-outlet></router-outlet> . Since the app.component is the parent for all the other components, the navbar will show on every other component. Now, what if we can don't want the navbar to show on every component? Then we do the opposite, we don't place <navbar></navbar> in the root. We place it in the component where we want it to show and then every other child component will show it too. Now, every component that is placed in the app.component won't show the navbar
So in short, if you want to 'display the second component data only', make it a parent component. Hope I answered your question.
You need a route entry for / like shown in
RouterModule.forRoot([
{
path: '', component: DummyComponent, pathMatch: 'full',
path: 'apply', component: ApplyComponent
}
])
for this you need some component (like DummyComponent) that might not have any content in the view. It is used just to satisfy the router.
pathMatch: 'full' is required for routes with an empty path '' and no child routes.
your app-root html and parent component will always display; what you need is the components of your front page in its own component.
> app-component (always displays) //the parent
> child components
> Home
> About
> Products
> ...
your router can then route/display each component (using a navbar in the parent)
When I use the routerLink directives inside my #Component's template property, it works.
But we're talking about my entire sites top menu bar. But when I separate it out into my main template file (layout.html), it no longer functions.
Yeah im a huge noob to ng2, admittedly, but I'd like my menu to stay out of a javascript file and inside the main layout html. How can one accomplish this?
<body>
<base href="/" />
<div class="row menu">
<div class="container">
<ul class="u-pull-left">
<li><a [routerLink]="['/']" routerLinkActive="active">Home</a></li>
<li>Notifications</li>
<li>My Hisses</li>
</ul>
<ul class="u-pull-right">
<li><a [routerLink]="['/register']" routerLinkActive="">Register</a></li>
<li><a [routerLink]="['/login']" routerLinkActive="active">Login</a></li>
</ul>
</div>
</div>
<root></root>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
Which vital step am I missing? Is it even possible?
Thank you!
routerLink is a directive and [routerLink]="..." is a binding to the input of a directive. None of these are supposed to work outside of an Angular2 component.
You can use a shared service that is instantiated outside of Angular2 and passed as a provider
let service = new MyService();
#NgModule({
providers: [{provide: MyService: useValue: service}],
...
})
class AppModule {}
then you can use service to communicate with some Angular2 component or service to delegate calling router.navigate(...) do do imperatively what routerLink would do.
Another way is firing events (window.dispatchEvent(...)) and listening for this events inside Angular2.
If possible I'd avoid such a setup (having router links outside Angular2 components) entirely.
You cannot do this because routerLink is special angular2 syntax that gets transpiled down to js and your template HTML is the bootstrap of the application and does not get transpiled .
Typically what you would do to accomplish a static top bar is to create a new topbar component and use it as a directive in your parent app above where you call your router outlet.
Example. In your app.component. you would import your component
Import {TopNav} from 'topnav.component '
#Component({ selector : 'my-app', template : , directives: [TopNav] })
Your topnav component would contain your routing logic
Please bear with me, this question is very crude. I'm new to Ember js, and have got a lotta confusion between views controllers templates routes. I have this basic requirement, to have a menu on the left, with item users, organizations. and a div in the center, As of now, when i click users, i have given a link to /users route. for organizations /organizations route, which is a different template. I want to display them in the centered div. Not sure how to do that. I think it has got something to do with child views, but find myself numb in beginning. I just need help in the workflow of how to achieve this.
EDIT:
Here is the basic code, I have this page called home. Template home.hbs:
<ul class="nav nav-list">
<li>
{{#link-to 'users'}} Users{{/link-to}}
</li>
<li>
{{#link-to 'organizations'}} Organizations {{/link-to}}
</li>
</ul>
<div class="summary-width span10" id="home-container">
</div>
Similarly there is users.hbs and organization.hbs.
When a user clicks on users link, i want the users template to be displayed in home-container div. organizations template otherwise.
Generally you do what you are describing with routes. This is your application.hbs ie the template associated with the application route and controller.
<ul class="nav nav-list">
<li>
{{#link-to 'users'}} Users{{/link-to}}
</li>
<li>
{{#link-to 'organizations'}} Organizations {{/link-to}}
</li>
</ul>
<div class="summary-width span10" id="home-container">
{{outlet}}
</div>
you would then have a router:
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('organizations');
this.route('users');
});
export default Router;
{{link-to 'users'}} will enter the users route, call all the hooks, create the controller if it doesn't already exist, set the model on the controller, and render the users.hbs template into the application template's outlet. The home.hbs you are describing should be renamed to index.hbs because by default Ember renders your index.hbs template into the outlet when / is accessed (or whatever your base url is). Sure, its possible to make a different template be the default but that involves more code so just change your home.hbs to index.hbs
Edit:
add this to your router:
this.resource('home', function(){
this.route('organizations');
this.route('users');
});
if those routes are truly nested below your home route. Your link to's would need to change to {{#link-to 'home.organizations'}}
If you don't nest like this, then {{#link-to 'users'}} will render the users.hbs file into the application's outlet. That's just how Ember and the router work.
If you can't nest for some reason, then change the link-to to actions, make the {{outlet}} a named outlet like {{outlet 'named'}} and in your routes/home.js actions hash, make actions that this.renderTemplate() into the named outlet. Look at the api for exactly how to do this