Angular 2/4 Router

Hello - I am trying to have two input/filter boxes that are used by/determine what is displayed on more than one web page. I want the input filters to appear at the top of three pages/components. However, if the user has entered a value into one of the input boxes and then moves to one of the other pages using a navigational link provided...i want the input boxes and the values entered to remain (so the user does not need to enter a value again after clicking the link)...and be displayed at the top of the new web page (the one that is opened when they click the navigational link mentioned.

I am trying to do this using a router method.

I've applied two routers/links into a web page i am working on. The router links themselves are working fine (when I click the link...it takes me to the desired page). The problem is that I expected the structure of the page above the router code to stay the same even when a user clicked on one of the router links from the main page. Is that not how a router is meant to work?

For example, lets say in my app.component.html file I have this code
<div >
  <h4>
  Employee Profile
  </h4>
</div>
  <!-- Search Text -->
<div>
  <h6>Enter ATTUID</h6>  <input [(ngModel)]="attuidSearch"/>
  <h6>Enter Employee Name</h6>  <input [(ngModel)]="nameSearch"/>
 </div>

<div>
  <ul class="nav-list" >
     <li><a routerLink="/profileGrid">Profile</a></li>
     <li><a routerLink="/profileEom">EOM</a></li>
  </ul>

  <router-outlet></router-outlet>
</div>

Open in new window


When a user is viewing the app.component.html page in the browser and clicks on the "/profileGrid"> / Profile link...I expected the code for the input boxes (which is above the section of code for the routerLinks) to still be visible even when the user is viewing the html file tied to the "profile-grid component (the component opened when the user clicks on the link). For now lets just assume the profile-grid.component.html file is the default shell file that states..."profile-grid works"

Am I going down a wrong path trying to use the Router for this...? or is there a section of code needed in either my app.component.html (which is provided above) or the profile-grid.component.html (for now is the default 'this page works code)    to make this work how I have described?
Cynthia HillLead ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NerdsOfTechTechnology ScientistCommented:
You would want to have jQuery or javascript update cookies or session data to reflect the partial entry. Then read the cookie or session data, sanitize it, and output it back into the input field of the destination page (being that the data could be manipulated easily since it is an exposed variable).
0
Cynthia HillLead ConsultantAuthor Commented:
Okay....I think I figured out a better, more straight forward approach.

I am going to use a tabbed structure on the webpage instead.  

That helps me keep the input entry boxes at the top and the values seem to carry over as a user tabs to the second page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cynthia HillLead ConsultantAuthor Commented:
only one response received by another participant and it did not give enough detail for me to continue forward (I am new to programing with Angular...and response mentioned to have to do something in JavaScript...but Angular uses TypeScript...which is just a little different with syntax, etc.)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.