Just like with HTML, you can add CSS to your modules using strings of text or external documents. Learn how CSS is added by using a series of arrays as well as the styles property or the styleUrls property in your decorators.
- [Instructor] Another thing that you can do with templates…is attach CSS styles…just like we did with the HTML templates.…You can add just a string of text…or add a series of external styles.…Now you do this in the component…and so…say in this app component we could add…something called styles,…this is actually going to be an array.…And in here you can just put whatever…styles you want to apply…only to this component.…So for example…if we wanted to we could say…take the button element…and then just change the background color…to green.…
We'll need to put this within quotes,…and let's go ahead and save that.…And you can see that my button is now green.…Now the interesting thing about this…is that if you look at the code,…so we'll do an Inspect element…and let's actually do an Inspect element…just on the button.…So here's the button.…You can see that it gets…this extra bit of code…and if you look in the head section,…you'll see that my style for making this button green…is right there.…So these styles are going to be applied…
In this course, Ray Villalobos shows you how to start using Angular 2 in your own projects. He starts by defining what exactly Angular 2 is and how it differs from AngularJS 1. Then, once the basics are out of the way, he sets up the template that will drive the project and starts coding. Ray shows how to divide your project into modules, work with events, style content with CSS, and create components and subcomponents. Plus, you can find out how to change content dynamically using data pipes.
Note: Members can find a template to download in the exercise files.
- What is Angular 2?
- Setting up a template
- Creating a simple component
- Using multiple modules
- Displaying data in templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes