ANGULAR in less than 128 words – Angular Components – Part 6

Block application construction

Components are like building blocks in an Angular application.

Components are defined using the @component decorator. A component has a selector, model, style and other properties, using which it specifies the metadata required to process the component.

Example of Angular component block architecture

AppComponent is the root component of our application. This is the base of the Angular application component tree.

To generate a component the command is:

ng g component MyComponent

Sample component:

import - Component - from "@angular/core";

  selector: "articles"
  template: "<h2>Article</h2>"
export class ArticlesComponent

Note that if you haven't used the component generation control, then you have to manually add the component to the src/app/app.module.ts file in the imports.

import - BrowserModule - from "@angular/platform-browser";
import - NgModule - from "@angular/core";
import - AppComponent - from "./app.component";
import - ArticlesComponent - from "./articles.component";

  declarations: [AppComponent, ArticlesComponent],
  Imports[BrowserModule, ArticlesComponent]:
export class AppModule

Leave a Reply

Your email address will not be published. Required fields are marked *