Hi Im trying to create some functionality in angular such that i can navigation within the component it self.
For example, I have a home component on my main page, and i also have the nested component side which is about-us component, and there are buttons on the top which are acting as navigation bar, i m trying to achieve here the simple thing such that when a user clicks on the home he should see home and then when he click on about us he about be navigated to to bottom page of home component where he can view about us.
Is it possible in angular 9? if yes how can this be achieved?
I know about HTML in a way that we can use herf and # to navigate between single page. but angular does not support this. just confused as im new to this.
Hi, Hope you’re having fun times with Angular. It’s been a crazy ride for me over here!
Regarding your question, Angular’s template is an extension to HTML which means that everything you are able to do in plain HTML you should be able to do it in Angular as well.
What you want to achieve, just like you mentioned, is doable within HTML. You’d have to use href’s for each anchor(button) and the value of href would be an id which is within the same template.
if you want you can share your html file of your component (the template), so we can together figure out what’s the main issue preventing you from doing this.
Hi please find out the HTML part of my home component.
as well the way I’m expecting it to perform in the same source file please check the app.html component
and for the reference please also have a look at this website might give you understanding what I’m asking for. This is basically a simple website using Bootstrap CSS and HTML.
Yes absolutely, you can achieve the same exact thing within your Angular HTML file.
What you currently have is almost the correct solution but missing one important part.
You correctly have something like href="#about". So you’re telling HTML that upon pressing the about us button go to a section of HTML which has id about i.e #about.
The issue comes when HTML doesn’t find any section within your template with id about. You should give the #about as an id to a <div> or <p> or any other HTML element.
but seems like not working for me . is that i have define the router path, if yes how ? cause this is just redirection me to home page as i have defined wild card in router modules.
sorry for missing you response, can you share a new stackblitz if the problem is still there ?
it seems like you just need to remove the # from the new section like <div id="newssection"></div>
Since you’re on the same page you don’t have to define this router path.
