From the course: Angular: Creating and Hosting a Full-Stack Site

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create a navigation bar

Create a navigation bar

From the course: Angular: Creating and Hosting a Full-Stack Site

Start my 1-month free trial

Create a navigation bar

“

- [Instructor] So we've got the basic framework for all of our pages set up at this point. The last piece of the front end we're going to create now is the nav-bar. This will be a very simple component that's going to be displayed regardless of the route the user is currently on. We'll see how to do that in a second. First, let's start off by creating our component and to do that inside a terminal, we just have to run ng generate component nav-bar and hit enter, and this will generate the necessary files for us. The only one we're going to need to edit here will be the HTML file. So let's open that up, nav-bar.component.html, and we're going to add some stuff to it like this. We're going to say div id equals top-bar, and we're going to have a link, routerLink, and it's going to link to our listings page and what this is going to be is the heading of our application. So we're just going to have an h1 heading…

Contents