Components
Explore the fundamental concept of Angular components in this lesson. Understand how components are declared using decorators, how templates and styles are linked, and how encapsulation works. Gain the ability to create and manage components essential for building structured Angular applications.
We'll cover the following...
You can think of your Angular application as a set of components. These components work together to build a single-page application and communicate with each other.
A component is also the most basic building block of Angular. It has a class where we define the business logic and a view that renders the properties and methods defined in the class.
Syntax of a component declaration
We will start with understanding the component declaration syntax, followed by how a component definition is created by the compiler, and how it is rendered in the browser.
@Component({
selector: 'app-child-one',
templateUrl: './child-one.component.html',
styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent{ }
This is what a regular component looks like in Angular. It is just a class preceded by a decorator that contains the metadata to inform the compiler of the job of a particular class.
The decorator used to define a component is @Component({})
Every decorator has some attributes that need to be defined, and in the case of the Component decorator, we usually define the following:
- Selector
- Template/templateUrl
- Style/styleUrls
- ViewEncapsulation (if you wish to set encapsulation for a particular component).
selector
The selector property contains the name of the component that we can use as a reference to our component in a template.
In the above code example, the selector is defined as app-child-one, and we can use it in the template of some other component just like any other HTML element.
E.g.,
<app-child-one></app-child-one>
template/templateUrl
The second attribute is the template/templateUrl tag that helps us reference the HTML associated with the class of a particular component.
For example, the App Component class should have a reference to the app component HTML.
This is specified in the templateUrl property exactly as mentioned in the above example. However, you can also inline your template by using the template property and using backticks to define the template.
This is what it looks like:
template: `
<h1>Hello from App Component</h1>
`
styles/styleUrls
The styles work in a similar manner. The styleUrls contains the reference to your styling file or inline styling can be done using the styles property.
styles: ['div { font-weight: 600; }']]
ViewEncapsulation
ViewEncapsulation - This defines the different options available for template and styles encapsulation. There are three options:
- None
- ShadowDOM
- Emulated (Default)
You can look up the Angular documentation to dive deeper into each one of these.
Do not forget to add imports
Imports usually help access the external ES modules and use those in our components/modules.
For example, to use the component decorator, we have access to it. Now, this is exported from the Angular core package. So in our component class, we import it like this:
import { Component } from '@angular/core';
Demo
In this demo, take a look at how the component class is wired with its template, spec file, and styles files. It would be futile to run the application right now, as we haven’t reached the concepts yet so the output will be disabled to be viewed in the next demo.
But look at the code to understand the structure and syntax.
You can focus on App Component or Child One Component.
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('reSkill app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
Creating a component
If you are using the Angular CLI, use the command:
ng generate component <component-name>
Or an alias to it
ng g c <component-name>
If you do not plan to add unit tests to your app, you can avoid creating them by using the flag:
--skip-tests
Like this:
ng g c <component-name> --skip-tests