Component Templates and Styling Components
Explore how Angular component templates define the visual interface using either external HTML files or inline HTML within decorators. Understand how to apply styles to these components through CSS, SASS, or SCSS files linked via the component's decorator. This lesson helps you master structuring components with templates and styling for building interactive user interfaces.
We'll cover the following...
What is a template?
We’ve spent a lot of time looking at the component class, but now we’ll look at the template of the component.
The template is the visual part of the component that a user of your application will see.
A template can be as simple as a single line of HTML to a fully-featured web page. Within the template, we can define all the parts of the application the user can interact with, including forms, buttons, images, and even other Angular components , either the ones you’ve created yourself or third-party library components.
Types of templates
There are two ways a template can be attached to a component:
- By using external template file approach
- By using the inline template approach
Let’s have a look at each version.
External template
...