Refreshing header's component on other component's initialization in Angular - javascript

I'm building a multi page application that's based on Angular on the front. My app.component.html is made of:
<app-header></>(header component)
<app-sidenav></> (side navigation component)
and everything else is in <router-outlet></>.
In my header component, I have a bookmark button that opens a modal for adding a page to Favorites. It takes an url of a current page that's loaded on users screen and lets a user choose the page's name. The logic I'm trying to implement is next: if that page's url is already in user's favorites (which gets checked by the function from favoritesService, the bookmark button should change it's color and become disabled. This logic works perfect in a way that it compares current url with an array of added url's but the button's color doesn't change and it doesn't become disabled untill I refresh the page( because the function for checking if a page is already a favorite is called on header component's ngOnInit and it loads only at the start of the application(the boolean attribute in the header component doesn't get refreshed otherwise)). So, just a few more sentences to clarify, in case you didn't understand the scenario: Header component is loading at the start; user is browsing other pages not depending on the header component. When I change the page, header should check if the current page is already a favorite and if it is, a button from header.component.html should change its color and become disabled. This works perfectly, but only after I reload the whole browser, because only then is when the header's component gets refreshed and triggers the function for comparing URL's.

here you can do state management by using observable or BehaviorSubject. with that you can update your header component.

Related

Navigate to a specific component (React)

I have a page 1 and a page 2. On page 1 is a specific component. On page 2 I have a button. After clicking on that button I want to navigate to the position of the specific component on page 1.
Is there a legit way to handle this?
By the way I am using GatsbyJS.
If you are using Gatsby, there is a plugin made for that :)
https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/
Else you can just set an id on the component on page 2 and link with /page2#yourid

Saving data in from when navigating using react routers

I’m trying to create multiple pages with forms. When I navigate from one page to another, I want the data that was filled by the user to be saved automatically (lets says, in the state of that component). Note the user has not submitted anything yet, nor there is any save button to fire any function.
The user has simply jumped from one page with form components(eg: ) to another page with other form components using react routers... And I want whatever the user entered saved automatically.
Can that be done? When the user goes back to the previous page, the user can pick up where he left off?
So in this example, when the user goes back to the previous page(using react routers) the component did not reset or refresh itself, and whatever was entered; the user would not have to enter again, hence picking up where he left off. There were talk about using iframes, but I'm not sure about that.
Of course all this eventually will go to the redux store. But I’m trying to solve the “saved” state of these form even after navigating to other components/pages using react routers
For that, you can take a look at redux.
If you don't want to use redux i will link my answer that uses react-router =>
With react-router, you can transfer "state"
this.props.history.push({
pathname: '/ShowRecommendation',
state: { taskid: Task_id }
})
and at the ShowRecommendation.js componenet you can get the value using
console.log(this.props.location.state)
can we pass a value when we move to next component using this.props.history.push("/next Component")?

Changing class using javascript in other pages

I don't know how to change a div's class by using JS on an other page. To specify, it will be like the class on page-A should change depending the JS changes on page-B.
(If you click on a box in page-B, the content on page-A should change.)
You can only amend the DOM of the page which is currently loaded. If you want to change a different page based on an action in a previous one you'd need to persist the state of the user's interactions and then amend the other page when it loads. To do that you can use localStorage, sessionStorage, session, cookies, or AJAX to store information on the server.

Ionic-1 Navigation

I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).

Conditional actions when an Oracle APEX navigation bar item is click

The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.

Categories