A7 — Angular-Series: Angular Building Blocks
DXSYS, welcome you all to the last article of this series. We have till now have gone thought all basic and major concepts of this Angular Series. Let’s look into some essential topic which will help us to understand Angular Building Blocks.
we will look into below topics in this article
1) Angular Building Blocks
2) Angular Bootstrapping
3) Component Meta Data
4) Change Detection
So Finally , I will disclose in this article, I like Angular more than any other web development framework because of it’s endless capabilities. I hope you all liked and enjoyed this article series as I did when I am writing this series.
Angular Building Block
NgModules: Declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a related set of capabilities as shown in below code example.
Components: Defines a class that contains application data and logic and works with an HTML template that defines a view.
Template: Combines HTML with Angular markup that can modify HTML elements before they’re displayed.
Directive: Attaches custom behavior to elements in the DOM.
Two-way data binding: Coordinates the parts of a template with the parts of a component.
Services: Typically, a class used to increase modularity and reusability with a narrow and well-defined purpose.
Dependency injection: Provides components with needed services and gives access to a service class.
Routing: Defines a navigation path among the different application states lets you view application hierarchies. I will be coming with articles series on Angular Routing in depth.
NGMODULES
You’ll find that that the NgModule , since it’s a class that is marked by the @NgModule decorator.This decorator had the information on how to compile a component’s template and how to create an injector at runtime, all within a metadata object. @NgModule serves to identify and bridge the gap between both its own directives, components, and pipes, and external components. @NgModule also adds services providers to the application dependency injectors, foundation-ally making the application more adaptable.
Angular Bootstrapping
NgModule describes how an application’s parts are to work and fit together, it makes sense that every Angular application has at least one Angular module. This core module functions as the “root” module for the application, and the one that you would bootstrap to launch the application.
DECLARATIONS ARRAY
Components used in an NgModule need to be added to the declarations array as a way to tell Angular that these specific components belong to this specific module. Declarations array, you’ll find that the array will be populated with various components, directives, and pipes.
IMPORTS ARRAY
The Imports array contains all dependent modules as shown in above example.
PROVIDERS ARRAY
The Providers array contains all Services dependencies as shown in above example.
Components
In Angular applications, A component consists of the following parts:
1. A TypeScript class called the Component class
2. An HTML file called the template of the component
3. An optional CSS file for the styling of the component
A component is a type of directive with its own template. Whatever you see in an Angular application is a component.
Components Metadata
The @Component decorator decorates a class as a component. It is a function that takes an object as a parameter. In the @Component decorator, we can set the values of different properties to set the behavior of the component. The most used properties are as follows:
• template
• templateUrl
• Providers
• styles
• styleUrls
• selector
• encapsulation
• changeDetection
• animations
• viewProviders
TEMPLATE AND TEMPLATEURL
A template is the part of the component that gets rendered on the page. We can create a template in two ways:
1. Inline template: template property
2. Template in an external file: templateUrl property
To create an inline template. A single-line inline template can be created using either single quotes or double quotes. For the inline template, set the value of template property.
SELECTOR
A component can be used using the selector. In the above example, the selector property is set to <app-sample-form>. We can use the component on the template of other components using its selector.
STYLES AND STYLEURLS
A component can have its own styles or it can refer to various other external style sheets. To work with styles, @Component metadata has styles and styleUrls properties. We can create inline styles by setting the value of the styles property. We can set external style using styleUrls property.
PROVIDERS
To inject a service in a component, you pass that to the providers array. Component metadata has an array type property called the provider. In the providers, we pass a list of services being injected in the component. We will cover this in detail in further sections.
CHANGE DETECTION
This property determines how the change detector will work for the component. We set the ChangeDetectionStrategy of the component in the property. There are two possible values:
1. Default
2. onPush
Change Detection means updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.
In its default strategy, whenever any data is mutated or changed, Angular will run the change detector to update the DOM. In the onPush strategy, Angular will only run the change detector when a new reference is passed to @Input() data.To update the DOM with updated data, Angular provides its own change detector to each component, which is responsible for detecting change and updating the DOM. I will write another article on this in detail and in depth.
I would like to thank you all and congratulate on completing these Angular article series where we have covered basic concepts. I hope this series will help you to take another level of your career.
We will be starting with new articles series on Angular in depth. Stay Tuned!
Stay Happy! Stay Healthy!
Keep in touch with me on SourabhhSethii.com, You can write comments and let me know what you like about the Angular Articles Series. It would help me to come up with better approach of writing technical articles.
