AngularJS has controllers, scopes, and directives to deal with views, bind data, and respond to events by updating changes to data. In Angular, Components replaced controllers, scopes, and directives from AngularJS.

Angular, introduced components that support the object-oriented component model to write cleaner code. A component is a simple class that holds the logic of managing the associated template or view. A simple component class is given as follows:

Class FirstComponent { 
} 

In a component class, we will expose properties and methods to a template or view. Component properties can provide data for a template or view and allow the user to modify property values. Component methods can be called according to user actions over the view.

As you can see, the preceding code creates a simple JavaScript class named FirstComponent. You may be wondering how a JavaScript plain class can be treated as a component and how a template can be wired up to this class. In order to achieve this, Angular leverages the syntax of TypeScript to annotate the FirstComponent class as per ES6 specification 2015. The following code shows the component class with an annotation that declares the class as a component and wires up the template with the markup identifier in the selector:

import { Component } from '@angular/core';
@Component({
  selector: 'first-component',
  template: `<h1>{{getGreetingPhrase()}} {{name}}</h1>`,
})
export class FirstComponent {
  name: string;
  constructor() {
  this.name = 'Rajesh Gunasundaram';
}
getGreetingPhrase() {
  return 'Hello Author,';
}
}

There is also another metadata named template that defines the inline template that has the HTML snippet for the view or template. The inline markup will access the properties and methods defined in the component. So here, the inline view will access the getGreetingPhrase() function to fetch and display the phrase to greet, and it will also access the name property to display the name. The @Component() preceding the FirstComponent class is the annotation that denotes this class is a Component, and the markup identifier first component for this component is assigned to the metadata of @Component named selector.

You might be surprised to see that we have not used $scope to expose the property and method of FirstComponent. Here, our component gets instantiated and is available in the template or view. So, we can access any property of that instance; also, we can call methods in the instance according to user actions or input in the view or template. The component instance provides the encapsulated data pertaining to that instance that is similar to the isolated scope in AngularJS.

Inheritance of components can happen in Angular when the template of the root component has the special tags of another component's selector, and this also enables the child component to access its parents and siblings.