BhrikutiSoft

The applications in Angular follow modular structure. The Angular apps will contain many modules,

each dedicated to the single purpose. Typically, module is a cohesive group of code which is

integrated with the other modules to run your Angular apps.

A module exports some classes, function and values from its code. The Component is a fundamental block of Angular and multiple components will make up your application.

A module can be a library for another module. For instance, the angular2/core library which is a primary Angular library module will be imported by another component.

Component

----------------

A component can be created using @Component decorator that is part of @angular/core module.

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

and to create a component

@Component({selector: 'greet', template: 'Hello {{name}}!'})

class Greet {

name: string = 'World';

}

Module

--------------

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality,

each focused on a feature area, application business domain, workflow, or common collection of utilities.Modules can also add services to the application. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the

Angular router and HTTP client.

NgModule metadata does the following:

Declares which components, directives, and pipes belong to the module.
Makes some of those components, directives, and pipes public so that other module's component templates can use them.
Imports other modules with the components, directives, and pipes that components in the current module need.
Provides services that the other application components can use.

A module can be created using @NgModule decorator.

@NgModule({

imports: [ BrowserModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Basic example of angular component

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // @NgModule decorator with its metadata @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

Module	Component
A module is collections of Component ,services , directives ,pipes etc	Component is building blocks of angular applications with associate template .
Denoted by ngModule	Denoted by @Component
Angular app contains many modules each dedicate to single purpose.	Each modules can have many Component or subcomponent .