Angular is a huge framework, no other platform nowadays can compare with angular as it has big support of libraries and resources in the market. It is a big part of web development today.
Angular is complete solution to any kind of web applications requirements like server side rendering , progressive web app etc. with component based platform like angular we can create any kind of single page application that creates more productivity.
Today i am going to talk about components and module in angular application what we can do with them or what they both have things for us to build an awesome , well structured angular application.
These both concepts are back bone of Angular because Angular is a component based framework and we can give look and feel using these components. Modules have some great features to configure everything going within it.
Components
Components are basics of angular it is one of most important UI building
blocks of an angular applications where we get many features to make our
component ready for any kind of functionalities.
We bind templates to a component so that it can be displayed on browser and
there is only HTML template we can attach with a component and vice versa.
we use typescript programming language to write client side code for a
templates in a component.
here is a command to create a component in angular
ng g c example- ng- angular
- g-generate
- c-component
- example- you want to name a component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
A component is must be declared in ngModule that can have the
configurations of the component so that is can be used in an application, if a
component is not declare in any of module in the app then it can not be
rendered or used.
Features of a component
@component decorator have some by default metadata as a single object which
are basic dependencies of a component here they are :
- Selector: where an angular application associate the component with an element that can directly be used in DOM HTML
- templateUrl or template - templateUrl refers the HTML file which is bind to a component and that can be responsible for user interface of a component. we can specify HTML directly into a component by using template attribute.
- styleUrls or style: this refers a style sheet which is responsible for styles for the component template. Style can also be internal by using style attribute and CSS format directly in the ''.
- ChangeDetection: Change-detection strategy is used to check detections and let angular app know about the those detections , here you may find explained change detection strategy concept.
- Animations: this is used to provide various animations in between components.
- Encapsulations: encapsulation policy for templates and CSS, these can be one of ViewEncapsulation.Emulated, ViewEncapsulation.None and ViewEncapsulation.ShadowDom.it is used to defines if template and css can affect the whole application or not and we can handle using three encapsulations strategy.
- Interpolation: this is used for property binding or make any function working in templates , we may use interpolation to define any expression etc.
- Providers : this is used to create service instance and we can injection them into classes.
Module
Angular module is used to configure all the components , modules, directives, pipes, services which are used in the application or in other words we can say a module is used to group all the used components ,node modules and other providers that should be added in that module to make angular application working.
By default we have app.module.ts file which is bootstrapped in main.ts so the application renders on the browser. we can create multiple modules or as much as we need to make our requirements completed.
Angular Module contain an important decorator that holds entire application's configuration as i told before. it is @NgModule decorator where we define everything used in our angular application. app.module.ts is a root module of our application which contains other modules used in the app.
An NgModule is defined by a class decorated with @NgModule(). The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.
- declarations: Here we define components, directives, and pipes that belong to this NgModule. (we only define a component in one module)
- exports: The subset of declarations that can be visible and usable in the component templates of other NgModules.
- imports: define all modules that are needed to run the component's template of that module and other modules whose exported classes are needed by component templates declared in this NgModule.
- providers: we uses services and all other providers to specify in providers array at global level of module (we can define providers at component level that is preferred).
- bootstrap: This is responsible to render the main view of the application by calling the root component which hosts all other app views. Only root NgModule can be bootstrapped to main.ts or should set this property.
Types of modules
There are total five types of module we can have in an angular application:
- Features Module
- Routing Module
- Service Module
- Widget Module
- Shared Module
Features Module
This module can be used as declarations, imports, providers, bootstrapping, entrypoints etc we can say under this @NgModule we can organize application's code .
Routing Module
This module specially used for routing where routes can be define and can be used to define navigation for components.
Service Module
Service Module can be used to specifically define services and providers. here we must not define routing or declarations.
Widget Module
Widget module can be used of declarations for UI components and we can use export attribute to make to exported so that components can be used in another module.
Shared Module
Shared Module can be used to share some commonly used components, modules , directives and pipes etc in the entire application. Just like we create Angular Material Module separately that has all API's from material so that we don't have to import one by one.
Summary
In this section , we focused on angular components and modules. we learned how a component deal with angular application to render web pages using. Also modules and its types. we must need to add components into declaration of a module to make that component working for browsers. I am going to complete every topic in Angular in upcoming article. Stay here if you appreciate.
Related Topics
.jpg)
1 Comments
I really enjoyed reading your blog. It was very well written and easy to understand. Unlike other blogs that I have read which are actually not very good. Thank you so much!
ReplyDeleteHire Dedicated Angular Developer