Angular Dependency Injection Tokens

Declarative templates, dependency injection, end to end tooling

Angular is a completely revived component-based framework where an application is a tree of individual components.

Directives add behavior to an existing DOM element or component instance.

Inline using the template property or in a separate HTML file linked with @Component decorator's templateUrl property.

To define logical boundaries in the application and divide it into separate modules.

By separating the application into different modules.

To indicate that Angular is done creating the component and for initialization/declaration tasks.

To initialize class members and set up Dependency Injection.

To keep the constructor focused on initialization and use ngOnInit for actual component setup.

Services provide common functionality to various modules, promoting separation of concerns and modularity.

ElementInjector hierarchies are created for DOM elements matching Angular components or directives, facilitating dependency injection.

Constructor.

To promote better separation of concerns and modularity by extracting common functionality out of components.

After Angular is done creating the component.

To throw an error when dependencies are not found, except when @Optional() decorator is used.

Angular creates a root injector where services are registered via the @Injectable annotation.

AppModule

HttpClient.get() method returns an Observable of typed HttpResponse.

By passing an error object as a second callback to the subscribe() method.

RxJS is used for composing asynchronous and callback-based code in a functional, reactive style using Observables.

Subscribe to it by calling the subscribe() method.

An Observer is a consumer of push-based notifications delivered by an Observable.

Promises can only handle a single future value, while Observables can handle multiple values over time.

Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution.

By specifying an error callback on the observer.

subscribe() method

To specify the changes that occur between one state and another over a period of time.

Using DomSanitizer to inject the dynamic content.

Dependency injection is a common component in both, but the implementation differs.

By adding the enableIvy option in the angularCompilerOptions in the project's tsconfig.app.json.

Faster AOT compilation and the ability to opt for a preview version of Ivy.

By using the ng generate web-worker app command.

To render a portion of the application via a route at build time for faster initial display.

To distinguish the names of various types within the framework.

Decorators declared immediately before a field in a class definition.

A lookup token associated with a dependency provider in the dependency injection system.

The value of the aot property in the build configuration specified in angular.json.

An error node is generated in place of the function.

It acts as a placeholder in the template where the router should display components.

Arrow functions or lambda functions.

You can access it using the Router service and the routerState property.

It gives the router control over anchor tags for navigation paths.

Folding.

Macros in the form of functions or static methods that return an expression.

It toggles CSS classes for active RouterLink bindings based on the current RouterState.

By adding the compiler option fullTemplateTypeCheck in the tsconfig.json.

A wildcard route has a path consisting of two asterisks to match every URL.

By using Angular's state() function to define different states and associated styles.

It contains information about a route associated with a component and can be used to traverse the router state tree.

You configure the router with routes via the RouterModule.forRoot() method.

To define a set of styles to associate with a given state name.

A powerful way to implement sophisticated and compelling animations.

It compiles the Angular app at build time, making it the default starting in Angular 9.

By specifying a unique name and associated styles using state() and style() functions.

You can use NgElement and WithProperties types exported from @angular/elements.

The RxJS library provides utility functions for creating and working with observables.

Http Interceptors inspect and transform HTTP requests and responses.

You can use the @ViewChild directive.

Subjects are a special type of Observable that allows multicasting.

You can configure Angular compiler to show a warning or an error for missing translations.

Bazel tool provides advantages like bypassing the Angular CLI builder and running Bazel directly.

A platform is the context in which an Angular application runs, such as a web browser or an operating system.

Angular DSL is a specialized syntax on top of normal HTML that Angular uses.

If custom ids are not unique, the translation units will contain the translation of the first message with that id for all subsequent messages with the same id.

By utilizing the @angular/platform-* packages, Angular can be used as a platform-independent framework.

Subjects are multicast, while plain Observables are unicast.

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted.

Inline template is usually used for small portions of code, while external template files are preferred for bigger views.

Angular recognizes the value as unsafe and automatically sanitizes it, removing the script tag but keeping safe content.

Interpolation is a special syntax represented by double curly braces {{}} that Angular converts into property binding.

A template expression produces a value similar to any Javascript expression and is used in property binding or interpolation.

A template statement responds to an event raised by a binding target, such as a button click, and is represented by (event)="statement".

Pipes are simple functions that transform data input into a desired output using template expressions.

Binding types can be grouped into three categories distinguished by the direction of data flow.

A pipe can be parameterized by declaring the pipe name with a colon ( : ) followed by the parameter value.

By default, the Angular CLI generates components with a template file.

The safe navigation operator guards against null and undefined values in property paths, preventing null reference errors.

It allows accessing nested properties without worrying about null reference errors.

By adding the 'MissingTranslationStrategy' property in the compiler config at bootstrap.

Changes should be made in the configurations section of the angular.json file.

No, the @Injectable() decorator is not strictly required if the class has other Angular decorators.

Elvis Operator