7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Component Styling

In this lesson we'll take a look at how Angular scopes our component-level CSS to our components.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


2.4 Component Styling

Hello folks, in this lesson, we're going to take a quick look at how component styling works by adding some basic style for the home component that we created in the last lesson. The directory for the home component already contains a SAS file ready for us to use. So let's open it up and add some styles there. So, we've added some basic styling there, it's very minimal. I think you'll agree that it's clear I'm not a designer. In any case, we've added some simple CSS here for the two elements inside our component, with some basic styles. So, as soon as we save this file, as we have just done, the app should reload and we should see a visual change to the page. As you can see, it looks quite different than it did just a moment ago. So, let's inspect the head of the page now. So, we can see that there are some style elements that have been added to the page here. So one of these will be the gravel styling, and that's currently empty because we haven't added any global styles, yet. So let's open up the second style tag and we can see the styles that we've just written have been applied here. Let's say that the styles only effect the home component, and nothing else on the page. The elements have been given these NG content attributes, and our CSS has been scoped to our component using these attributes. And if we go down and look at the page itself, we can see that the header inside our App Home component has the appropriate attributes to pick up the styling that we've just added. So this is really, really awesome, it helps components keep nice and encapsulated. It makes sure that the CSS from one component doesn't affect the CSS for a different component. This really helps keep the CSS for our app maintainable. So don't forget the Angular does need to be told about this component style sheet. And if that occurs in the configuration objects passed through the component decorator in the component subscript file. So in this lesson we saw that we can add highly specific component styling which is scoped just to a particular component using the SAS file that the Angular CLI adds when we create a new component or in this case when we originally scaffolded the application. We saw that the styles that we add in a component stylesheet get injected into the head of the page using a style element, and this will occur on any page that the component is used on. Thanks for watching.

Back to the top