Following are the key points described later in this article:
Components are at the heart of Angular 2 apps. A component in Angular2 is used to represent a View along with associated logic (encapsulated as a Class), which will get executed based on interaction with that view. Additionally, a component could call/invoke one or more services which can be “dependency injected” into it.
Typically, an HTML page could consist of different view slots, each representing different data. One or more such different views could get associated with its own components. Further, a component in an Angular 2 app could have child components as well. An angular app could have one top-level component and several internal sub-components. The app get started with bootstraping top-level component. Take a look at following sample app:
In above app, following could be observed:
The code could look like following:
<marksheet>
<searchbox></searchbox>
<searchresults></searchresults>
</marksheet>
Does the above resemble like Angular 1 directives. Well, simply speaking, Angular 2 components is nothing short of Angular 1 directives.
A Component in Angular2 is associated with a View and a Class encapsulating the business logic. Take a look at following code sample for a component written with TypeScript language:
@Component({
selector: 'hello-world'
})
@View({
template: '<div>Hello {{name}}</div>' })
class HelloComponent({
name: 'Calvin Hobbes'
})
bootstrap(HelloComponent);
The above component could be placed inside an HTML with tag such as <hello-world></hello-world>. In the above component, following could be observed:
Last updated: 7th May, 2024 Linear regression is a popular statistical method used to model…
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…