In this tutorial, we will see what is components and the fundamentals of Angular 2 Components.

What Is A Component?

• Template

In Angular Components include the template which lay outs the user interface fragment to finding a view for the application. Wheather it is created with HTML and defines what is rendered on the page. We use angular binding and directives in the HTML to power up the view.

• Class

The class is a code associated with the view. The class is created with the TypeScript. The class containing the properties: data property or data elements available for use in the view.
For example, if you want to display a title in a view we define a class property for that title.
The class also contain methods, which is a function of the logic needed by the view.

• Metadata

A component also has metadata, which provides additional information about the component to angular. It is this metadata that defines this class as an angular component. The metadata is defined with a decorator. A decorator is a function that adds metadata to a class, its members, or its method arguments. So a component is a view defined in a template, its associated code defined with a class, and metadata defined with a decorator.

Component Class

If you have done any object oriented programming in any language, this code should look familiar.

// @ AppComponent : class name 
export class AppComponent{
	// @ pageTitile :  property of a class 
	pageTitle : string = ' Components In Angular 2 | Geekstrick'; 
}

A class is a construct that allows us to create a type with properties that define the data elements and methods that provide functionality. We define a Class using the class keyword followed by the class name AppComponent. A common Angular convention is to name each component class with the feature name, then append the word component as the suffix. Also by convention, the root component for an application is called AppComponent as shown. This class name is used as the component name when the component is referenced in code. The export keyword at the front exports this class, thereby making it available for use by other components of the application. Where pageTitle is a property of a class.

Defining Metadata with a Decorator

A class becomes an Angular component when we give it component metadata. Angular needs that metadata to understand how to instantiate the component, construct the view, and interact with the component. We define a component’s metadata with the Angular component function. In TypeScript, we attach that function to the class as a decorator.

• Decorator

A decorator is a function that adds metadata to a class, its members, or its method arguments. A decorator is a JavaScript language feature that is implemented in TypeScript. The scope of the decorator is limited to the feature that it decorates. A decorator is always prefixed with an @ sign. Angular has several built-in decorators we use to provide additional information to Angular. We can also build our own decorators.

@component ({
	selector : 'pm-root',
	template : `
		<div>
			<h1>{{ pageTitle }}</h1>
			<p> Introduction To Angular 2 Component</p>
		</div>`
}) // no semicolon at the end of the decorator

We define the decorator immediately above the class signature. Notice that there is no semicolon at the end of the decorator.

• selector : 'pm-root' :

If we plan to reference the component in any HTML, we specify a selector. The selector defines the component’s directive name. A directive is simply a custom HTML tag. Whenever this director is used in the HTML, Angular renders this component’s template. We’ll see how this works in the upcoming demo.

• template : `...` :

A component should always have a template. Here we define the layout for the user interface fragment or view managed by this component. The double curly braces indicate data binding. We bind the h1 element value to the page title property of the class so when this HTML is rendered, the h1 element displays Acme Product Management.

Importing

Before we can use an external function or class, we need to define where to find it. We do that with an import statement. The import statement is part of ES 2015 and implemented in TypeScript. The import statement allows us to use exported members from external modules. Remember how we just exported our class using the export keyword? That means that other modules in our application can import our exported class if needed. We’ll use the import statement throughout our code to import any third-party library, any of our own modules, or from Angular itself.
We can import from Angular because Angular is modular. It is a collection of library modules. Each library is itself a module made up of several related feature modules. When we need something from Angular, we import it from an Angular library module just like we import from any other external module.

https://www.npmjs.com/~angular
Use this link if you want to view the list of available Angular library packages and their current versions.

In our component code we use the component decorator function from Angular to define our class as a component. We need to tell Angular where to find this function so we add an import statement and import component from Angular Core like this.

   //importing the component
   import { component } from '@angular/core';
       ....

We start with the import keyword. We identify the name of the member we need within curly braces. In this case, we need the component decorator function and we define the path to the module containing that member. In this case the Angular Core library module. If we need multiple members from the same module, we can list them all in the imports list separated by commas.

  //importing Multiple component
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { BrowserModule } from '@angular/platform-browser';
      ....

Get Some More Angular 2 Articles Here!