Learn about writing the necessary HTML and templating for the products component.
- [Narrative] Now, let's focus on the primary component…that makes our app tick…and that's the products component.…In the productscomponent.html file…let's begin writing with the HTML.…Ctrl+B to get rid of the sidebar.…Okay, so our layout for this page…will consist of two columns of equal width…so let's establish that first.…Inside of our row, we're going to have two columns.…
We're gonna make an id of "search"…so we can reference it specifically in CSS shortly.…Simply copy this here and paste it.…Okay, so the first column will contain a title of products.…So h1 and next we also have more filler text…so I'm gonna bring it out real quickly our About html.…Simply copy this here…and we'll paste it right here.…
Underneath this, we're going to have a form…which will contain two fields…for a product title description and also a Submit button.…So, write form, as usual.…Next we're going to use the ng form directive…and we can access it by defining a local variable…and binding it to ng form.…So #form, this creates the local variable…
- 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.