Categories: AngularJSWeb

Angular 2 – Components Explained with Code Examples

This article represents concepts and code samples around Angular 2 Components which resides at the heart of the Angular 2 framework as like Controller/Scope which resided at the heart of Angular 1 app. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • What are Components?
  • Components Explained with Code Samples

 

What are Components?

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:

angular 2 components

In above app, following could be observed:

  • The top-most component is termed as “Marksheet”. The marksheet component consist of following two child components.
    • Searchbox component which is used to recieve the search keywords entries
    • SearchResults component which is used to display search results. This could internally have a set of child components such as SearchRow representing each search record.

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.

 

Components Explained with Code Samples

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:

  • Component is annotated with @Component annotation
  • An associated view is annotated with @View annotation.
  • An associated logic is encapsulated in form of a “Class”
  • At the end, the bootstrap function is invoked to start or bootstrap the angular application.
Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: angularjs

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago