I am new to angular2. How to navigate from one page to another in angular2?. I am using router-outlets for that. It just redirects between one component to another but i want to redirect from home page to another when i click on dropdown items.Do i need to use page-router-outlets for that? If so how to use that and how to install nativescript and all. Thanks in advance for the reply.
I am using app.route.ts
import { Routes } from '#angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
export const routes: Routes = [
{ path: 'home' , component: HomeComponent,pathMatch: 'full' },
{ path: 'about', component: AboutComponent }
];
In app.component.html i have
<ul>
<li id="home"><a [routerLink]="['/home']" >Home</a> </li>
<li id="about"><a [routerLink]="['/about']" >About</a></li>
</ul>
<router-outlet></router-outlet>
In app.module.ts I have configured the router.
When i click on home hyperlink it will route to app.component.html page only. Its not redirecting to another page and app.component.html is always shown on the top of the page every single time I go to a new page.
How to route to new page without showing the app.component.html in the new page.
Related
I am quite new to Meteor & React. Here I would like to redirect my currect user to home page whenever the logout button is pressed. Attached you can see the protected page template with the logout button.
Please note that I am working with the latest versions (Meteor 1.6.1 and React V4).
import React from 'react';
import { Accounts } from 'meteor/accounts-base';
export default class Link extends React.Component{
onLogout(){
Accounts.logout()
};
render(){
return(
<div>
<p>Private Content goes here</p>
<button onClick={this.onLogout.bind(this)}>Logout</button>
</div>
);
}
};
any kind of support will be appreciated.
There are two main options to use here:
1. Pass a callback to Accounts.logout(func)
This is the simplest but mixes the return behavior into your component, which is not ideal.
2. Use Accounts.onLogout(func)
You could put this with your accounts initialization or with your router code, whichever keeps the logic grouped together best for your app.
In that callback, you'll want to use your router to redirect. The exact syntax will depend on your router, but will generally look like:
Router.go('/')
Another way, if you are setting things via meteor-useraccounts way...
const myLogoutFunc = function() {
FlowRouter.go('/login');
}
AccountsTemplates.configure({
// Hooks
onLogoutHook: myLogoutFunc,
onSubmitHook: mySubmitFunc,
preSignUpHook: myPreSubmitFunc,
postSignUpHook: myPostSubmitFunc,
});
Template event code is something like this..
'click .logout': () => {
AccountsTemplates.logout();
}
Read in detail here https://github.com/meteor-useraccounts/core/blob/master/Guide.md
I'm very used to Ionic, and I recently started developping web apps with Angular2. I have an issue with the Router concept.
Let's say I want to make an app, with a login page, which redirects you to a dashboard with 3 tabs.
I Have a LoginPage component, which checks the login details and redirects to the app. How can I simply switch component in Angular 2 ?
I defined my route
const appRoutes: Routes = [
{ path: 'login', component: LoginPageComponent }
];
And on my app.component page, I juste have a button
<h1>
{{title}}
<!--<a routerLink="/login">Heroes</a>-->
<button (click)="login()">Change</button>
</h1>
trigerring this function :
login() {
this.router.navigate(['/login']);
}
When I click this button, my URL is changing : http://localhost:4200/login
But my view is still my view with the button, there is no "change" like in Ionic with a NavController.setRoot(NewComponent)
I don't want to display my content in a <router-outlet>, I'd like to have distincts pages with navigation between them. Is this possible in Angular2 ?
Thank in advance for your help
I have been trying to work with the code, I added the button but I don't know how to link it to another page when clicking on it.
html:
<ion-buttons>
<button ion-button (click)="goAnOtherPage()">Go an Other Page </button>
</ion-buttons>
OR
<ion-label [navPush]="anOtherPage">Go an Other Page</ion-label>
in TS:
import { NavController } from 'ionic-angular';
import { AnOtherPage } from '/anOtherPage';
anOtherPage: AnOtherPage;
constructor(public navCtrl: NavController) {}
goAnOtherPage() {
this.navCtrl.setRoot(anOtherPage);
}
html
<ion-button (click)="nextpage()">Home</ion-button>
ts
import { Router } from '#angular/router';
constructor(private route: Router) { }
nextpage() {
this.route.navigate(['/home']);
}
Navigation works differently in ionic and it is not advised to simply use an anchor tag and the path to the file.
Here is an example which works. In the relevant TS file import the page(s) you want to navigate to like so
import { OtherPage} from "../pagefolder/pagecontroler";
import { YetAnotherPage} from "../pagefolder/pagecontroler";
Ensure that you have the navigation controller imported and injected into the constructor of your current TS file. It should look like the following in case you are not sure.
import { NavController } from "ionic-angular";
Then in constructor
constructor(public navCtrl: NavController, .....) {
}
Once you have the navigation controller and the page(s) imported you can proceed to create a function like so
navigateToOtherPage(): void {
this.navCtrl.push(OtherPage);
}
That completes the navigation setup for your TS file.
Now you go to the relevant template you want to navigate from and you can use any tags you want for instance
<button (click)="navigateToOtherPage()">Next Page<button>
or you can use an a, span or div in a similar way
<a (click)="navigateToOtherPage()">Other Page</a>
<span (click)="navigateToOtherPage()">Other Page</span>
<div (click)="navigateToOtherPage()">Other Page</div>
You don't necessarily have to use the click event you can use whatever event you want. The main things are that you have the navigation controller imported and injected in your constructor as shown above and you have the page(s) you want to navigate to imported as well and you only use the navigation controller to push pages you want to navigate to.
you can also use angular to do this for you:
<button ng-click="doSomething(withSomebody)"> Submit
</button>
You would need to have a controller to and define doSomething()
$scope.doSomething=function(somebody){
...insert code here
}
If you needed to change your state, the inject $state into your controller and use $state.go(stateName)
ref: https://github.com/angular-ui/ui-router/wiki
Please use below code in Ionic 4 to go one page to another page:
<ion-button expand="block" routerLink="/dashboard" routerDirection="root">Home</ion-button>
(routerLink) to set the page name to when you go to the page.
For Ionic 5 - below code is working for me, with Ionic 5 + Angular 9 combination,
Step 1 - In html file, add the code to "define" the function,
<ion-button (click)="gotoHomePage()">Go to Homepage</ion-button>
Step 2 - In the constructor of your class, you can Inject the NavController - Injecting NavController will always get you an instance of the nearest NavController, regardless of whether it is a Tab or a Nav.
constructor(public navCtrl: NavController) { }
Step 3 - In TS file for your component, add the method that you are calling on click of ion-button,
gotoHomePage() {
this.navCtrl.navigateForward('home');
}
Here the 'home' is defined route in your app-routing.module.ts file, like below,
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
You can use this simple way:
<ion-button routerLink="/myPageName" routerDirection="root">
Go to myPageName!
</ion-button>
Many solutions I have tried don't work, but this one below it does for me.
To go from home page to another page just watch this video:
https://www.youtube.com/watch?v=paRZyKDHPak
in the home.page.ts file add
import { Router } from "#angular/router";
set the constructor
constructor(public router:Router) {}
create the function
redirectToOther(){
this.router.navigateByUrl('other');
}
you guys can add a "go back button" to go back to the home page just adding this HMTL code in other.page.html, that's it
<ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>
You can call a route like this.
<button onclick="location.href='/pageToRoute/param'" block>
</button>
Basically you would navigate to a different page in the same way as if you were in Angular.
Important thing to remember is that Ionic routes are essentially Angular routes.
To learn more about how they work, visit: https://angular.io/guide/router
To answer your question.
Let's imagine you want to redirect a user to your About page.
Within your app-routing.module.ts you have a path that goes:
{
path: 'about',
loadChildren: () => import('./pages/about/about.module').then( m => m.AboutPageModule)
}
Then in the tags of a button, you want add the classical Angular router call that goes like this:
<ion-button color="dark" expand="block" fill="outline" routerLink="/about">Go!</ion-button>
Basically, routerLink="/name-of-the-path" can be used on your buttons or tags to redirect the user to the desired location.
Hope this helps!
This is what i used
<ion-nav-buttons side="right" >
<a href="templates/yourpage.html">
<button class="button">
Show your page
</button>
</a>
</ion-nav-buttons>
Place button inside anchor tag.
<button>Name</button>
You can also refer this link: http://www.w3schools.com/tags/tag_a.asp
Problem
Im loading some menu items from the Wordpress Rest API, then navigate to the page/:id with the correct id of the wordpress page. Everything works fine except of that:
Early when my page is loading I get this null call in the network section of the chrome developer. This is locally, on my server its also a 404 NOT FOUND.
Setup
Angular 2 + Typescript (Angular 2 RC2, Router 3.0.0-alpha.6)
Wordpress REST API
Code
Template
<header></header>
<router-outlet></router-outlet>
<footer></footer>
Routing
export const routes: RouterConfig = [
{ path: '/page/:id', component: PageComponent },
{ path: '/page/home', component: PageComponent, index: true }
];
Header.ts
this.myService.getNavigation()
.subscribe(
menuItems => {
this.menuItems = menuItems;
this.router.navigate(['/page', this.menuItems[0].title]);
},
error => this.errorMessage = <any>error);
Main.ts
bootstrap(AppComponent, [
...APP_ROUTER_PROVIDERS,
...HTTP_PROVIDERS,
...ROUTER_PROVIDERS,
...ENV_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
])
Assumption
I guess it has something to do with my routing setup. When I comment out the <router-outlet> it does not happen, everything else works good.
Question
What is this strange call at /null and how can I avoid it?
I guess you have somewhere <img [attr.src]="var"> or similar.
I have a question on how to configure the inbuilt login functionality URL in ASP.net MVC Angular template. The web api url for login is "Account/Login" .
I add an href in layout.cshtml file as shown below
<data-ng-class="{active : activeViewPath==='/contact'}">
<br>
< href='#/contact'>Contact</a></li>
<br>
< data-ng-class="{active : activeViewPath==='/Login'}">
<br>
< href='~/Account/Login'>Login</a></li>
Now when I click any link(demo) , the functional URL is :
://ayz.com/#/demo
When I click Login (works fine):
://ayz.com/Account/Login#/home
When I click demo again (Account/Login gets appended):
://ayz.com/Account/Login#/demo
How to correct this ?
$routeProvider
.when('/home', { templateUrl: '/home/main', controller: 'MainController' })
.when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
.when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
.when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
.when('/product', { templateUrl: '/home/product', controller: 'ProductController' })
Make sure that ng-view /ng-route just changes the view that is a part of the angular only.!!
As you were already in: //ayz.com/Account/Login
//ayz.com/Account/Login#/home
When you click on demo, the view is just getting updated:
//ayz.com/Account/Login#/demo
Make sure, you use angular route for Account/Logon too.
Try getting the usage of hashbang too.!! Angular js uses that and just updates the part after that for ng-view.!!
Firstly when you were in demo: ayz.com/#/demo with no MVC routing.
And later on when you clicked on Accountlogin the url changed to ayz.com/Account/Logon/#home
and now when you clicked on demo, the last hasbang part of url "#/home" will just be changed to "#/demo" as you are now in Account/Login. And note that Angular routing works only for one ng-View in a single page.