#14: π Adding Style
With Angular, we can give style to components in a way that will not affect the rest of the application. It's a good practice to encapsulate the component-related style this way.
We can also state general style rules to be used across the application. This is good for creating the same look-and-feel for all our components. For example, we can decide what color palette will be used as the theme of our app. Then, if we'd like to change the colors or offer different themes, we can change it in just one place, instead of in each component.
Angular gives us different style encapsulation methods, but we'll stick to the default.
The Angular CLI has generated a general stylesheet for us at src/style.scss
. Paste the following code into this file:
How does the project know to look at this file? In the Angular CLI configuration file
angular.json
underprojects.todo-list.architect.build.options.styles
, you can state the files for the build tool to take and add to the project. You can open the browser's dev tools and see the style inside the element:
We added style directly to elements (html, body, div, span, h1, p, ul, li
) which will affect our app immediately. We also added styles using css-class selectors. We need to add these class names to the relevant elements.
In app-root
add the class app-title
to the h1
element:
In input-button-unit
add the btn
class to the button
element:
Now we'll add some component-specific styles.
Add the following style to input-button-unit.component.scss
:
How does this stylesheet get attached to the input-button-unit
component? Look at the file input-button-unit.component.ts
. One of the properties in the object passed to the @Component
decorator is styleUrls
. It's a list of stylesheets to be used by Angular, which encapsulates the style within the component.
The selector :host is applied to the element that holds this component - <app-input-button-unit>
. This element is not a part of this component's template. It appears in its parent's template. This is how we can control its style from within the component.
We need to add the todo-input
class to the input
element:
Now let's add style specifically to the list-manager
component. Open the file list-manager.component.scss
and paste the following style inside:
We'll wrap the content of this component with a <div>
element with the todo-app
class.
Finally, add the following style to todo-item.component.scss
:
Wrap the content of the todo-item
component with a div
element with the todo-item
class:
We'll use the todo-checkbox
and todo-title
classes later on.
You can change the style as you wish - the size of elements, the colors - however you'd like!
Note: You can use SCSS files in the project, which is a nicer way to write style. It has great features that help the developer. SCSS files are compiled to CSS when the project is built.
πΎ Save your code to GitHub
StackBlitz users - press Save in the toolbar and continue to the next section of the tutorial.
Commit all your changes by running this command in your project directory.
Push your changes to GitHub by running this command in your project directory.
Last updated