Component
Angular is all about components. Components are a subset of directives, always associated with a template. I call them the view defined in a template. A component consists of the following:
Template − This is used to render the view layout for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives use to power up the view.
Class − This is created with TypeScript and it contains the properties and data element for use in the view. This is like a class defined in any language such as C that contains properties and methods.
Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.
When we create a new component using Angular CLI, the newly created component looks like this.
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'example-app';
}
Selector
Before looking at the selector, we need to first know what a Decorator is. A decorator is used to identify the class as a component in Angular, it provides informational metadata that defines the kind of properties that can be used by the existing component.
The @Component function here is the decorator that we pass objects to.
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
A Selector specifies the component directive name, it is one of the properties of the object that we use along with the component configuration. In the app.component.ts, notice that we have one property called selector along with the unique name used to identify the app component in the HTML DOM tree once it is rendered into the browser.
How to Use a Selector
@Component({
selector: 'app-component',
templateUrl:`
<div><h1>{{pageTitle}}</h1>
<div>My First Component</div>
</div>
`
styleUrls: ['./app.component.scss']
})
export class AppComponent {
pageTitle: string = 'Example App';
}
Recall that the selector is the name of the component when we use it as a directive in the HTML, And the template defined the HTML that we want to display.
Index.html
<body>
<app-component></app-component>
<body>
Here in the index.html file, we simply add the selector where we want our template to be displayed. In the template, we call this a directive. A directive is basically a custom element. As soon as the app is loaded by running ng serve --open on your integrated terminal, the code will compile. When the compilation is complete, the HTML defined in the template will be inserted between the selected element tag and then appear on the page.
Top comments (0)