I am in need to give a Go-Back button for this I am using location services as:
import {Location} from '#angular/common';
backclicked(): void
{
console.log("back clicked.");
this.location.back();
}
<a id="redirect-link" (click)="backclicked();" style="padding:8px 15px;" >
Issue is this that location.back() is working but with page load. So is their a way where it can be achieved without page load ?. Any help please ?
You can use built in location service in angular 2 which having "Back" api.
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({ directives: [ROUTER_DIRECTIVES] })
#RouteConfig([
{...},
])
class AppCmp {
constructor(private _location: Location) {
}
backClicked() {
this._location.back();
}
}
Related
I need if is devise is mobile then render will be one HTML file and if is a desktop then render will be another HTML file. Below is my component file of code here that provide a JIT compilation error. Please help if have any effective ideas.
import { Component, OnInit, Output, EventEmitter, OnDestroy, Input, AfterViewInit, OnChanges } from '#angular/core';
import { ProductSearch, Supplier } from '../../product-models/inventory.models';
import { FORMAT_SEARCH } from '../../../../../globals/_classes/functions';
import { InventoryService } from '../../inventory-serveice/inventory.service';
import { Category } from '../../../settings/models/category.models';
import { ActivatedRoute } from '#angular/router';
import { Subscription } from 'rxjs';
import { CartService } from '../../../../cart-service/cart.service';
import { ProductListService } from '../product-service/product-list.service';
import { DeviceDetectorService } from 'ngx-device-detector';
console.log('window.isMobile !!!', window['isMobile']);
let VarTemp = '';
if(window['isMobile'] == true){
VarTemp = './product-search-test.component.html';
}else{
VarTemp = './product-search.component.html';
}
#Component({
selector: 'product-search',
templateUrl: VarTemp,
styleUrls: ['../product-list.component.css']
})
I would suggest to use the same template for both devices, then in this unique template add angular templates to manage displayment according current device.
I want user to navigate if they refresh current page. I tried something like this,
<script>
window.onbeforeunload = function (e) {
window.location.href = 'url';
}
</script>
but this does not worked.Is there any other way to do it? please help me in this.
appcomponent.ts
import { Component } from '#angular/core';
import { RouterModule, Routes } from
'#angular/router';
#Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.routes.ts:
import { environment } from './environment';
import { RouterModule } from "#angular/router";
import { ContactUsComponent } from './static/components/contact-us.component';
import { HomeComponent } from './static/components/home.component';
import { PrivacyComponent } from './static/components/privacy.component';
import { ProductDetailsComponent } from './products/components/product-details.component';
import { ProductListComponent } from './products/components/product-list.component';
import { TermsComponent } from './static/components/terms.component';
export const ApplicationRoutes = RouterModule.forRoot([
{
path: '',
component: HomeComponent
},
{
path: 'products',
loadChildren : 'app/products/products.module#ProductModule'
},
{
path: 'product/:id',
component: ProductDetailsComponent
}
]);
product.routes.ts:
import { RouterModule } from "#angular/router";
import { ProductListComponent } from '../components/product-list.component';
import { ProductDetailsComponent } from '../components/product-details.component';
export const ProductRoutes = RouterModule.forChild([
{
path: 'products',
component: ProductListComponent
}
,
{
path: 'product/:id',
component: ProductDetailsComponent
}
]);
app.component.html:
Welcome!
<br/>
<div>
<a routerLink="/">Home</a>
</div>
<div>
<product-list></product-list>
</div>
<div>
<router-outlet></router-outlet>
</div>
<br/>
<div>
<a routerLink="terms">Terms</a>
<a routerLink="contact-us">Contact Us</a>
<a routerLink="privacy">Privacy</a>
</div>
product-list.component.html:
<product *ngFor="let p of products" [product]="p"></product>
product.component.ts:
import { Component, Input } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
#Component({
selector : 'product',
template :
` <div>
<a [routerLink]="['product', product.id]">
{{product.name}}
</a>
</div>
})
What happens is when I click on a product link in the app.component.html page, it loads ProductDetailsComponent containing the information for that product, but when I try to click on the other links again, the URL in the browser changes but nothing happens.
What I need is that on the first page load, say 'local.shop.com', a static component is displayed containing links to the products, inside app.component.html, and when you click on each link, it presents information regarding that product. I'm trying to avoid having to reload the page.
I'm not sure which more snippets of code are needed to provide enough context for this question, but please let me know.
this is due to angular component reuse feature that it changes the url, but doesnt change the view. You need to subscribe to the parameter received in your ProductDetailsComponent, and do something to it.
1) in your ProductDetailsComponent, import ActivatedRoute from #angular/route and Subscription from rxjs
import { Subscription } from 'rxjs/Rx';
import { ActivatedRoute} from '#angular/router';
import { Component, OnInit, OnDestroy} from '#angular/router';
export class ProductDetailsComponent implements onInit, onDestroy {
private subscription: Subscription;
productId: string;
2) in your ngOnInit, subscribe and do something inside it
ngOnInit() {
this.subscription = this.activatedRoute.params.subscribe((params) => {
this.productId = params['id'];
//do something here to trigger the changes
this.product = this.productService.getProduct(this.productId);
//example
console.log(this.product);
});
3) last but not least, do not forget to unsubscribe
ngOnDestroy() {
this.subscription.unsubscribe();
}
and of course, do not forget to call it in your constructor
constructor(private activatedRoute: ActivatedRoute) {}
I'm learning Ionic 2 by building a simple app, but I've ran into a problem I can't solve.
The app has a ion-nav for the login page, after logging in it goes into a tabs navigator. So the app nav would be something like:
app<Nav> {
LoginPage,
restrictedTabs<Nav> {
Page1,
...
}
}
My problem is I don't know how to access appNav while I'm inside Page1, so that I can, for example, logout the user and block him from "restrictedTabs".
I've tried as the docs say with #ViewChild
import {Component, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
#Component({
templateUrl: 'page1url...'
})
export class ProfilePage {
#ViewChild('appNav') appNav : NavController
constructor(private _nav: NavController) {
}
pushNewPlace() {
console.log(this._nav.rootNav);
console.log(this._nav.parent);
}
ngAfterViewInit() {
console.log(this.appNav);
}
}
But appNav is always undefined, as is rootNav (which I've seen in some tutorial...). If I try #ViewChild('appNav') on LoginPage controller it works good
Because your navcontroller is local, you need to get access to the rootNav.
that is done thanks to the appController.
Tabs are creating a view inside the 'root' view.
In the page loaded inside one of the tabs :
First, import Nav from ionic-angular, same place as navController
import { App, NavController } from 'ionic-angular';
Be sure to have your loginPage also
import { LoginPage } from 'pages/login/login';
then provide it in your constructor :
constructor(public navCtrl: NavController, public appCtrl: App)
now you can acces the rootnav:
this.appCtrl.getRootNav().setRoot(myLoginPage);
History( Push State) forward / backward button doesn't work with angular 2 router.I have tested this in Chrome and Firefox both. Forward button works never and Backward button works only for 2 steps than UI doesn't respond according backward button.
I have following code.
app.component.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES, Routes } from '#angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { Login } from './login';
#Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<nav>
<a [routerLink]="['/home']">Crisis Center</a>
<a [routerLink]="['/login']">Login</a>
<a [routerLink]="['/heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
#Routes([
{path: '/home', component: CrisisListComponent},
{path: '/heroes', component: HeroListComponent},
{path : '/login' , component:Login},
{path: '*', component: CrisisListComponent}
])
export class AppComponent { }
login.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES, Routes } from '#angular/router';
import { LoginMobile } from './login/login_mobile';
import { LoginEmail } from './login/login_email';
#Component({
template: `
<h2>{{val}}</h2>
<p>Login here</p>\n\
<a [routerLink]="['/login/mobile']">Mobile</a>
<a [routerLink]="['/login/email']">Email</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
#Routes([
{path : '/mobile' , component:LoginMobile},
{path : '/email' , component:LoginEmail}
])
export class Login {
val = "kwik.Social";
}
login/login_email.ts
import { Component } from '#angular/core';
#Component({
template: `
<p>Login here</p>
<input type="email" placeholder="Email" [(ngModel)]="email" />\n\
<p>Your Email is {{email}} </p>
`
})
export class LoginEmail {
email = "kwik.Social";
}
After waiting for long time, I tried router by NGRX team. It has many other features as well like Guards , Multiple Components , Child Components and Full History Api support. Only one thing I am missing is that History Api itself doesn't provide a way to get values entered by user on text fields and scroll positions , if that were available Ajax Pages may became more fluid and consistent.
Edit
NGRX router is now deprecated, and Angular Router is inspired from NGRX router and works as expected.