Finish the project by creating the necessary properties and methods, as well as defining animations.
- [Voiceover] Now that our products template…has been created,…lets make it all function by focusing on…the component class and also integrate animation.…Now if this were a real app, you would usually create…a service to grab the products from a database,…but that would go beyond the scope of this course…so let's just hard code the products…into an array of objects.…So let's click on our products.…We'll have our products dot component dot ts.…Real quickly I'm going to remove…the constructor and ng OnInIt.…
And inside of here,…we're going to create a products object…and inside we'll have a object of title.…And this is just to give us an initial entry…into our array of objects.…So, let's make the title USB Car Charger…and then also a description…of my description here.…
Alright.…Let's also create two properties that our two form fields…ng model directive are bound to.…So we had a title of a type string…and also a description of type string.…Now, let's create the add product method…to create or add our products.…Value of any to pass through…
- 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.