Join Ray Villalobos for an in-depth discussion in this video Adding CSS to our component, part of Learn AngularJS 2: The Basics.
- [Voiceover] Another thing that you can do with templates…is attach CSS styles…just like we did with the HTML templates.…Just like with them you can add…either just a string of text,…use the back tick character to add a multi-line stylesheets…or use an external stylesheet.…Now let me show you how that works.…I'm gonna go back into the app.component.ts file…and in here I can add another element.…It can be either something called styles…or styleUrls.…
You have to remember the capital U…and lowercase rest of the letters.…Now let me just go ahead and add a single style…with the styles keyword here.…Unlike the templates,…these are inserted into an array.…So if you wanted to insert a specific element,…you can just do something like this,…and then do a target for a container or something like that.…What I want to do is bring in a style…that I've pre-created for you.…So you can tell my button…doesn't look too exciting right now,…so I'm gonna improve that by adding a style.…
I'm gonna go over this gist right here…and copy this style that I have here for a button.…
In these tutorials, Ray Villalobos shows you how to start using AngularJS 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, find out how to change content dynamically using data pipes.
The template is included as a free download for all members.
- What is AngularJS 2?
- Setting up our template
- Creating a simple component
- Using multiple modules
- Displaying data in our templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes