We Keep Coding

How to refresh a component declared in HTML everytime its parent component is visited using the same URL?

For example, I have 2 components, A and B.
In A.component.html there is code as follow
<B></B>
A is accessed via router, and I want B to be refreshed, by calling B's ngOnInit(), everytime A is visited, even with the same URL.
I have
set onSameUrlNavigation: 'reload' in RouterModule.forRoot
runGuardsAndResolvers: 'always' in A's path
subscribe to router.events in B's constructor as shown below
this.navigationSubscription = this.router.events.subscribe((e: any) => {
if (e instanceof NavigationEnd) {
this.ngOnInit();
}
});
But it doesn't work. B is not refreshed.
I guess that is because B is NOT accessed via router directly but as a child of A?
Then how to refresh B everytime A is visited?
Thanks in advance!

This can be done using onSameUrlNavigation.
you can Define what the router should do if it receives a navigation request to the current URL.
app.module.ts
#NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })]
})
class MyNgModule {}
Now,Inject your router
app.component.ts
import { Router } from '#angular/router';
constructor(private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
DEMO
More Detail

I don’t think onnginit is suppose to be called directly. Avoid that.
Would listening to this.router.events.subscribe inside B solve the problem?
If not, use a service to share data between them. Inside the service you could have a subject that B could subscribe to. On navigation in A you trigger the subject

It turned out that the problem is in the Apollo GraphQL library.
It was using cache so no request was made toward BE...

Aurelia/TS Activate does not update current view

What do I want to achieve
I want to update my current view based on an Id. So say that I have side navigation with the following tabs:
Customer A
Customer B
Customer C
What I want is that the user can click on Customer A and that the current customer view gets updated based on the Customer Id.
What is my problem achieving this
I thought the best way to solve this issue was to navigate to the page and provide the Id directly as follows:
router.navigateToRoute("customer", { currentCustomerId });
Then on the Customer page I am receiving the Id in the activate method as following:
public activate(params) {
this.currrentCustomerId = params.currentCustomerId;
}
Actually, this is working the first time you navigate to a customer. But when I am clicking on another Customer page, the view does not get updated because the activate method does not get triggered for a second time. It is only working if I navigate to another page (not customer page) and go back or simply refresh the whole page.
So what can I use to achieve what I want? I reckon that I have to use something else than activate()?
I appreciate it if someone could give me some insight into this issue.
Regards.

This is due to the default activation strategy wherein, if the URL only changes in terms of a parameter value, the component is reused and hooks are not invoked.
To obtain the desired behavior, you can customize the this behavior at the component level or the route level.
At the component level:
import {activationStrategy} from 'aurelia-router';
export class CustomerComponent {
determineActivationStrategy() {
return activationStrategy.replace;
}
activate(params: {currrentCustomerId: string}) {
this.currentCustomerId = params.currentCustomerId;
}
}
At the route level:
import {Router, RouterConfiguration} from 'aurelia-router';
export class App {
configureRouter(config: RouterConfiguration, router: Router) {
config.map([{
name: 'customer',
moduleId: './customer',
route: 'customer/:currentCustomerId',
activationStrategy: 'replace'
}]);
this.router = router;
}
}

Using Angular 2 RC5 router, how can I navigate, given an ActivatedRouteSnapshot?

Use Case
The user can access certain parts of my site without being logged in. If they click a download button and are logged in, the download starts automatically. However, if they click the download button and are not logged in, I'd like to prompt them to login. Once they're logged in, I'd like them to be sent straight back to the route they were previously on.
How I'm trying to accomplish it
When an "anonymous" user clicks a download button, they're given a modal with a prompt to login. If they decide to login, I'll stash some object in local storage (was thinking an ActivatedRouterSnapshot would do?). After login, I'll check to see if there's an object stored under stashedRoute in local storage. If there is, I'll use it to navigate them back to their original route!
What I want to do
Given:
import { Router } from '#angular/router';
and
private someRoute: ActivatedRouterSnapshot;
constructor(private _router: Router) {}
I want to:
this._router.navigate(someRoute)
The question
What is the syntax for either doing the above, or getting the same functionality for storing a route and re-navigating to it?

i think you need some thing like a history for going back in routes
you can use code below as described here
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component(...)
class AppCmp {
constructor(private _location: Location) {
}
backClicked() {
this._location.back();
}
}

I had a similar issue and solved it by the following. flatten is from lodash and route is your ActivatedRoute. It's not great, but it works for now. You might want to use flattenDeep instead to accommodate for deeply nested routes.
const route = flatten(route.pathFromRoot.map(r => r.url)).map(s => s.path);
this.router.navigate(route);

Angular 2 reload the current component based on user input

In my Angular2 app, on UI input a component is loaded which pulls data from a web service.
I want to reload the aptSearchComponent when the user input changes. Although the new data is fetched from the service base on the input, the component is not reloaded.
The input is in the headerComponent, when the user inputs some search criteria and hits enter, data is passed to the sharedService and routed to aptSearchComponent, where data is pulled from the shared service and results are displayed.
The headerComponent template stays at the top and the aptSearchcomponent template is displayed below it.
#Component({
selector: 'app-header',
template: `
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" (keyup.enter)="Search($event)">
</div>
`,
})
export class HeaderComponent {
public apartments: Object[];
constructor(private apartmentService: ApartmentService,private router: Router,private sharedService: SharedService) {
this.apartmentService=apartmentService;
this.sharedService=sharedService;
}
Search(event){
this.apartmentService.searchApt2(event.target.value).subscribe(res => {this.sharedService.temp = res
this.router.navigate(['AptSearch'])});
}
}
How can I reload the component in Angular 2. Basically the data in this.aptDetails is changed, but template is still shows the old data.
export class AptSearchComponent implements OnInit {
aptDetails: any;
constructor(private apartmentService: ApartmentService, private sharedService: SharedService,private zone:NgZone) {
this.apartmentService = apartmentService;
}
ngOnInit(){
this.aptDetails = this.sharedService.temp;
JSON.stringify(console.log(this.aptDetails)); //the data here is changed based on input, but the template is not refreshed and I still see the previous result.
}
}
I tried the following in constructor() but no luck
this.zone.run(()=>this.aptDetails=this.sharedService.temp);
I am using RC4, and polyfills in not imported.

I resolved this by using #Input and ngOnChanges() hook in the child component. will share the detailed answer if anybody needs it.

To reload it you can remove it with a simple trick.
Put an *ngIf on the component and set it to true initially.
When you want to remove it set it to false, and then using setTimeout flick it back to true instantly. This will remove it and then recreate it.
When you recreate it pass the new parameters you want to pass in from the parent component.
(Angular2 used to use this trick to reset a form, I'm not sure if a better way is available now but during RC this was the correct approach).

Change detection only work if the property reference changed.
You must reset aptDetails before updating it.
this.aptDetails = {} // or whatever type it is
this.aptDetails = this.sharedService.temp;

ionic 2 using nav push to send data between pages

Hi I'm new to ionic and I'm trying to use nav push to send my username to the next page.
Here are my codes on my first .js page, note that Index is the name of my 2nd page which has been imported.
this.nav.push(Index, { paramUser: 'asd' });
now on my second page.
import {Component} from "#angular/core";
import {NavController, NavParams} from "ionic-angular";
#Component({
templateUrl: 'build/pages/index/index.html'
})
export class Index {
static get parameters() {
return [[NavController]];
}
constructor(nav, navParams) {
this.nav = nav;
this.navParams = navParams;
this.navParams.get('paramUser');
}
}
however i kept am receiving 'undefined' when I moved on to my second page, may I know what's the issue here?

Brother you may missing second element in array which returns from static get parameters function see below how it is.
static get parameters() {
return [[NavController], [NavParams]];
}
Other than this everything looks ok in your code sample.
Please let me know if solve otherwise will research more.
webonerd