Components

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:

1. Selector
2. Template/templateUrl
3. Style/styleUrls
4. 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.