Component in Angular

Component is a class with a template (User interface) and decorator (decorator is function that is invoked with a prefixed @symbol), which have the binding logic to bind the UI and the model. We can say component is binder/view model or binding code.

A component must belong to an NgModule in order for it to be usable by another component or application.Every Angular app has at least one NgModule class, the root module, conventionally named AppModule.
Most important properties of @NgModule are:

declarations: Registers particular components within this module

bootstrap: Tells the module which component to bootstrap

imports: Imports other modules into this module

Providers: creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app. These providers are for services. whatever you have services , that services should be add in the provider field. providers will tell to angular how to inject a service.
app.module.ts

Note : AppModue is route modules which bootstraps and launches the angular application.

Component decorator @Component must have the selector and template and component class must add export. then only it will available in the project. we need to add ‘export’ keyword before the component class.
app.component.ts

Selector :selector is name which is used in our view like html tag.css selector that identifies this component in a template
index.html

template: we can write html code in the template and we can write multi line code using backtick character.
app.component.ts

TemplateUrl :url to an external file containing a template for the view
app.component.ts

styleUrls: list of urls to stylesheets to be applied to this component's view.
app.component.ts

app.component.css

styles: inline-defined styles to be applied to this component's view.
app.component.ts

bootstrap – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

Main.ts:

The main entry point for the application.This file contains the code to bootstrap the application root module.(i.e. AppModule)

import { platformBrowserDynamic } from '@angular/platform-browser';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Note : We can add component  by typing ng g component ‘component name’ or ng g c ‘component name’ in command prompt.