I want to execute a piece of code every time a new the page in navigated to. I am using the <page-router-outlet>.
As mention here, while using page-router-outlet the component is cached. So when it is navigated back into view no Init lifecycle events of angular 2 are executed.
I tied using just the , which does not cache the component and as a result call the Init Lifecycle events. But using it exits the app when I press the Hardware back button.
The site you linked to also mentions this: "What you can do is inject Page inside your component and attach to page navigation events (for example navigatedFrom) and do the cleanup there." Those events are listed here, especially the "navigatedTo" event seems relevant for your usecase.
Related
Created web component using LitElement. I am using this component multiple times in the same page.
I want to trigger one event only when my component is rendering first time on page.
What do you mean by "first time on page"?
If you want the first time any instance renders in the current loaded page set window.someProperty before firing your event and then check it before firing the event again. Anything on window is cleared when the user navigates between pages, but if you're running an SPA (which Lit is particularly well suited to) that might not happen for a while.
If you want to do something the first time the element is loaded you can add the flag to the module that holds the element.
If you want each element to fire an event as it initially renders you can use firstUpdated.
If you want the first element somewhere in the document to fire an event then that's harder, as web components are all about isolated functionality - they aren't aware of other instances on the same page. Your best bet is to either:
Add a parent component that picks up events from all the sub-components and only does something the first time it gets one.
Add an index property that you increment for each instance and only have the event fire when it is 0.
I am currently developing an administrative dashboard for my place of work using the BlurAdmin template. While this template contains many great features and great functionality, I found that this dashboard was not quite optimized for my use case. The dashboard that I am developing is completely based on a RESTful API built separately by one of my colleagues. Every page loads in its data through this API using AJAX and have found that most of the time, the page shows up before the API completes. This means that things just sporadically show up as the calls complete. In order to make for a smoother UI experience, I have began working on a solution for this.
Current Solution
While a route is being loading, a rootScope variable $isLoading is set to true which displays a loading overlay stretched over the page. In order to determine completion, I watch $http.pendingRequests.length until it is equal to 0 which tells me that the page has loaded successfully (based solely on http calls).
Desired Solution
While a route is being loaded, I would like the page not to change but instead utilize a top-bar loader and only when the page is loaded, should the routes change.
The routing is currently done by BlurAdmin using the ui-router module and the view is always instantly displayed by the ui-view directive.
My question then is: How do I preload an angular route into a hidden view while it builds, and only once I detect that all API calls have completed on this new route, should the hidden view switch to the visible view and the old visible view be removed?
You could do this by using a resolve on your state declaration. The basic idea would be to call your API from your resolve functions on the relevant state declarations. If you return promises from these functions the state will not be entered until the promises are all resolved. The values will then be bound into your component.
To show the spinner/loading bar on state transitions you could register a Transition Hook for 2 events: onStart and onFinish. Inside your onStart hook set some state on a service. Let's say isTransitioning = true;. Inside your onFinish hook, set this to false. Your spinner component could then watch this state and show itself when appropriate.
When views DOM is heavy, sometimes it gets some time to render it, especially on older mobile devices. I would like to put a spinner whenever the view is not rendered yet.
I can achieve that using ngAfterViewInit hook but doing it for every view provides a lot of duplicated code.
I was wondering if there is a global hook that is fired whenever rendering of current view is done.
As Jota mentioned in a comment, what you're asking for doesn't exist in angular. Something you could do, which may or may not be appropriate to your situation, is add a single spinner component to the root of your app (say, in app.component.ts) and create a service which can turn it on or off. This way, in each of your child components you could turn the spinner on in ngOnInit and turn it off in ngAfterViewInit.
Another option, if you're using the Angular Router, is to have this spinner component listen for router events: turning on at NavigationStart and turning off at NavigationEnd.
I have a small requirement. We have a application controller and a custom dijit which work together with each other.
I want to publish a event from the dijit and subscribe the same in controller. But the problem is the controller is not loaded first time when publish event is triggered, so the subscribe is not working first time.
Once the controller is loaded, if we publish again, then subscribe works perfectly fine.
Is there any solution to this problem ?
Have you tried dojo/ready to make sure, all necessary Parts are loaded? Check your loading hierarchy. Is it possible to load the controller in the init-phase at the start?
Regard
Thanks for your answers Dimitri and Ken Franqueiro & MiBrock. Dimitri's solution sound useful to me. The controller and the Widget which publish the event are not on same page also the controlller is not always loaded whereas the Widget is part of my Menu so its present on every page.
What I tried is used Memory to pass the data and first time called the function where the event and data will be used. So my widget sets data in Memory store and in controller, once its loaded we retrieve the value and use it. So this happens only first time, from second time onwards my published calls are working as Controller is loaded on page.
So I have a set of navigation links at the top of my page.
One of them links to a list of hardware the users owns showing name and description.
I click the nav link and my list of hardware if rendered fine.
Go into database, change the name of one of the hardware pieces.
Now i click the nav link again on the page. I would expect backbone to
render the page again. But it doesn't.
I have a message print to the console every time render is called. The second click does not run the render function on the view.
I imagine backbone prevents re rendering the view or calling events when a route that is already open is activated. Is there any way to get it to rerender the already open view when I click on nav link a second time?
You are correct that Backbone prevents a route from triggering if it's already on that route.
There are a few solutions.
You could forcefully trigger the route by hijacking the links and calling router.navigate("route/path", {trigger: true});.
Or, even better, avoid triggering the router and use an api object. It's something Derick Bailey has written about here. Every click after the first would use the api to re-run the render code, bypassing the Backbone router. You can see a more advanced use of this method in the bbclonemail app.