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.

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

https://angular.io/guide/architecture-modules

To generate a component the command is:

ng g component MyComponent

Sample component:

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

@Component
  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";

@NgModule
  declarations: [AppComponent, ArticlesComponent],
  Imports[BrowserModule, ArticlesComponent]:
  Providers[]:
  Bootstrap:[AppComponent]
})
export class AppModule