Angular components
An angular application is composed of one or more components, with the root component serving as the core component. The root component connects the page document object model (DOM) with the component hierarchy.
Every component is made up of two parts: the Typescript class, which includes the application logic and data, and the HTML template, which specifies the view that appears on the screen. The @component decorator is used within the component to identify the class as the component and to give the template and any other associated metadata. An Angular component is shown below as an example.
Example of an Angular Component
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
|
Angular Templates
Templates are composed of the superset of the HTML and it comprises all HTML features that provide the extra functionality for binding the component data into the HTML and then generating the HTML DOM elements.
The core concept of the templates can be grouped into two:
Directives- the directives are used to include logic and support building of the HTML DOM elements.
Data Binding- just as their name suggests, data binding is used to bind the component data to the template. Here is the Data binding syntax:
|
{{ title }} |