Reflect Metadata Api handles decorators and metadata in Angular. Reflect.metadata weren't supported by browsers so Angular used TypeScript
Angular’s underlying mechanisms are something definitely worth exploring. When we start working with Angular, it’s inevitable that you will cross paths with decorators as they play a vital part in the eco-system of Angular Framework. For the most part, decorators come built-in and there isn’t much you have to do. But eventually, as you dive deep into the framework, you’ll want to interpret decorators to utilize its power to enhance your dev experience, improve readability, and in addition to that, one of the most important factor is Separation of Concerns.
Separation of Concerns is a popular software design pattern and is used for separating a computer program into distinct sections such that each section addresses a separate *concern. *Angular already implements this pattern on file structure level as there are separate files for Html, CSS, and ts but we can go in much deeper by using decorators that separate the class, property, or method concerns.
By the end of this article, you’ll hopefully understand not only how decorators work under the hood, but also how to utilize them effectively and efficiently.
Let’s dive in.
As per the Angular docs:
Decorators_ are a design pattern that is used to separate modification or decoration of a class without modifying the original source code._
To put it in simple terms, with decorators, we can configure and customize our classes at design time. They are just functions that can be used to add meta-data, properties, or functions to the thing they are attached to hence they are nothing to be scared of.
Decorators' functions are invoked with a prefixed @ symbol and immediately followed by a class, parameter, method, or property. The decorator function is supplied information about the class, parameter, or method, and the decorator function returns something in its place or manipulates its target in some way.
Angular decorator structure
The diagram above depicts how decorators are implemented in angular. The underlying factor through which decorators are implemented is by leveraging TypeScript’s Reflect Metadata API.
Reflect Metadata Api handles decorators and metadata in Angular.
Reflect.metadata weren’t supported by browsers so Angular used TypeScript compiler for the usage of decorators. It was imported in the angular-polyfills.js file. This dependency was required only in the previous versions of Angular. After Angular 6, this dependency was removed from the polyfill, automating the reflect metadata process.
Functional Programming: Exploring the Functor type class and its use cases
What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc
During my investigation, I discovered a couple of distressing errors in the record we were sending: The mandatory serviceNowTaskId was misspelled (inconsistently to boot) in several key places. For example, servideNowTaskid 😬
Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public