In Angular, Component is foundation of Angular app. Thus, we should understand what Component is first.

Angular Component code structure is made up of three elements. The code example below breaks each element into a single section.

//First section
import { Component } from '@angular/core'; 

@Component({                     //Second Section
  selector: 'main-component',
  template: `{{name}}`
})
export class MainComponent{       //Third Section
   public name: string;
   constructor() {
       this.name= 'CloudBerry Angular Tutorials';
   }
}

First section is to import Component from Angular into this component.

Second section is metadata of  Component, it provides information to determine how the component should be processed, instantiated and used at run-time. The Component has to be placed right on top of the class without line spacing between them.

Third section is component class that has a set of properties(E.g. title) and methods which are needed by its’ view.
The export keyword is to make sure that this component is accessible to other components.
Remember to give a name to the class. (E.g. MainComponent).

These are the fundamentals of Angular’s Component .

Last modified: December 4, 2017

Author