Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular 2 — Components Explained With Code Examples

DZone's Guide to

Angular 2 — Components Explained With Code Examples

This article represents concepts and code samples around Angular 2 Components which reside at the heart of the Angular 2 framework, much like Controller/Scope was to Angular 1. Read on for an explanation of Components and code samples to illustrate how they're used.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This article represents concepts and code samples around Angular 2 Components which reside at the heart of the Angular 2 framework, much like Controller/Scope was to Angular 1. 

The key points described in this article are:

  • What are Components?
  • Components Explained with Code Samples

What Are Components?

Components are at the heart of Angular 2 apps. A component in Angular 2 is used to represent a View along with the 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 view 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. Take a look at the following sample app:

angular 2 components

In the above app, the following could be observed:

  • The top-most component is "Marksheet". The Marksheet component consists of two child components:
    • Searchbox component which is used to receive 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 the following:

<marksheet>
<searchbox></searchbox>
<searchresults></searchresults>
</marksheet>

Does the above resemble Angular 1 directives? Well, simply speaking, Angular 2 components are nothing short of Angular 1 directives. 

Components Explained with Code Samples

A Component in Angular 2 is associated with a View and a Class encapsulating the business logic. Take a look at following code sample for a component written in TypeScript:

@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 a tag such as <hello-world></hello-world>. In the above component, the following could be observed:

  • Component is annotated with @Component annotation
  • An associated view is annotated with @View annotation
  • The associated logic is encapsulated in form of a "Class"
  • At the end, the bootstrap function is invoked to start or bootstrap the Angular application

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
angular 2.0 ,web dev ,angularjs ,javascript ,components

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}