Angular 2 is component based, which means that every UI functionality is built as a component. Therefore, as component based styling is a recommended pattern, Angular 2 is just about to make writing styles a rather enjoyable experience. In this video, we demonstrate a simple example of styling the table header of our movie database application.
- [Instructor] If we wanna make some simple style changes…to our application, the best way to do it is…to have a separate CSS file under the movies folder.…So, why don't we go ahead and demonstrate an example…by modifying the header to a different color?…The first thing that I'd like to do is to create a CSS file…that is going to be under the movies folder.…And we'll call it movies-list.component.css.…And the line of code that we're going…to add in here is simply thead,…and we're gonna change the color to cadet blue.…
Very straightforward.…So, let's move back to our component file,…movie-list.component.ts.…And to implement it, what we want to do…is add a styles URL property in our component.…So, just add a comma right at the end of the template URL,…and right below it we'll add a styles URL,…and then point it to the location of our CSS file…that we just created, and that's it.…
Let's go ahead and save, run.…Before we run, make sure we have a focus on our solution.…And let's see what happens.…And there you go.…The header is now a different color.…
- Creating components
- Bootstrapping components
- Working with templates
- Using directives and interpolation
- Binding and transforming data
- Creating advanced and nested components
- Creating services
- Obtaining data with HTTP calls
- Configuring routes
Skill Level Intermediate
1. Course Overview
3. Directives, Interpolation, and Templates
5. Advanced Components
7. Obtaining Data with HTTP
- 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.