Get information about writing the necessary HTML and templating for the header. This will also include defining any necessary code within the component class.
- Now, let's head over to the header.component.html…template file to write the necessary html for our header.…So we open up header, we come over here,…I'm gonna hit ctrl b to get rid of the side bar.…Okay, so let's remove this initial html,…and we're gonna create header tags.…And inside of the header, we're going to add a div class…of row, and this is specific to foundation,…and that basically gives us a container to work with.…
Inside of here, we're gonna add a div class of columns,…this is also specific to foundation flex grid.…And large-3, and that defines a column that will be…three widths long in terms of a total of 12 columns long.…And this will store our logo right here.…Underneath, let's also add real quickly,…a div class of columns and this will be large-9.…
And inside of here will be our navigation.…So, let's also add a logo, so, a, we're gonna make it…id of logo and a routerLink=4/ and that allows us…to navigate between routes, and we'll just name this MYLOGO.…And inside of this column,…we're going to have an unordered list.…
- How components work
- Defining HTML templates
- Defining CSS
- Class binding and style binding
- Property binding and event binding
- Creating routes for navigation
Skill Level Intermediate
1. Getting Up and Running with Angular
2. Templating Basics
3. Data Binding
5. Tying It All Together
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.