Change browser title on route change in angular 1.5 component router - angularjs

I am using angular 1.5 component router. I need to be able to change the title shown on the browser tab whenever there is a route change.
I have gone through the component router docs and googled it to many a websites but without any luck. The only way I can see to do it, is using vanilla JS inside each component's $onInit method.
I am looking out for an angular way of doing it and setting all the titles in one place. Please help.

Related

Gatsby Replace regular Anchor Tag with Link component on build time

we have created our design system with a few regular anchor tags in the components. now the problem is, while using those components in gatsby, the whole page is getting reloaded while Navigating to a new page due to regular anchor tags. I know that gatsby has a Link component but we can't implement this in our library, So is there any way to overcome this issue?
After a few hours of searching through the internet, finally, I found the solution for the above issue, I have tried gatsby-plugin-catch-links this plugin internally uses an anchor tag with the event.preventDefault() for preventing the page from reloading & detects click event & applies it to navigate programmatically using gatsby's navigate() hook, So finally it resolves my issue.

Angular js Finding rendered Components

I have used react and angular before but this is my first time using angular js.
I have spotted that you can render in html components similar to react and angular.
For instance the code I am trying to upgrade
<div ng-if="!userSubscription.compliance">
<user-premise-groups-selector premise-groups="premiseGroups"
select-or-deselect-premises="selectOrDeselectPremises(currentEvent, currentPremiseGroupId)"
select-or-deselect-all-premises="selectOrDeselectAllPremises(currentEvent)"
all-premise-groups-selected="allCompliancePremiseGroupsSelectedLocal()"
is-user-premise-group="isUserPremiseGroup(currentPremiseGroupId)">
</user-premise-groups-selector>
</div>
I am trying to access this component like you can in angular or react (looks as if the data is passed down similar to props in reactjs) but am unsure of how to do this. Do these components work similar to other front end libraries such as react and angular? And how do I jump into these so that I can change the outdated code.
Within components folder this component does not exist however.
These are called directives in angular as components are slightly diffrent

Not able to route in reactjs

I am not getting how to link different pages in react js. I'm using react router through which by using link and route tags I'm able to change the url but not getting the content.
Can I get the answer as soon as possible..
Can you provide your code snippet?
There might be several reasons, maybe check the router nested settings, and see if it setup correct.

Any cleaner way to trigger React Route change?

I am pretty new to React-Router, I wonder if there is a simple way to change Route, some concept like state in Angular UI Router. From the React Router official tutorial :
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating
My understanding is: I have to manually change the url to trigger route change.
What exactly are you trying to achieve? Did you take at look at the react-router Link component?
Perhaps the most used component in your app is Link. Its almost identical to the <a/> tag you're used to except that its aware of the Router it was rendered in.
React-Router Tutorial / Lesson 3: Navigating with Link

Reusing Angular component

I am creating component based Angular app using Angular version 1.5.5 and typescript. In the header component I have country dropdown. That header component is re-used in multiple pages. Once the country is selected from the dropdown that particular scope lies only for that page, once I navigate to other page its got lost.
Is there any better way to reuse the component based on my scenario?
Few suggestions,
You can make use of $rootScope since its globally available, keep the country in $rootScope so that once you changed the model it will be available in the other pages as well
I don't know whether its suits your situation, If you are using angular routing keep the header component outside ng-view so that it will not change will navigating through different pages.

Resources