Fundamentals Flashcards
DI two main roles
dependency consumer and dependency provider
Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called Injector
What happen when a dependency is requested
When a dependency is requested, the injector checks its registry to see if there is an instance already available there.
If not, a new instance is created and stored in the registry. Angular creates an application-wide injector (also known as the “root” injector) during the application bootstrap process.
Providing a dependency
@Injectable
and then:
The next step is to make it available in the DI by providing it. A dependency can be provided in multiple places:
- Preferred: At the application root level using providedIn.
- At the Component level.
- At the application root level using ApplicationConfig.
- NgModule based applications.
like:
@Injectable({
providedIn: ‘root’
})
DI at component level
You can provide services at @Component level by using the providers field of the @Component decorator.
In this case the HeroService becomes available to all instances of this component and other components and directives used in the template.
Injecting/consuming a dependency
The most common way to inject a dependency is to declare it in a class constructor
When Angular creates a new instance of a component, directive, or pipe class, it determines which services or other dependencies that class needs by looking at the constructor parameter types.
<ng-container>
</ng-container>
is a special element in Angular that groups multiple elements together or marks a location in a template without rendering a real element in the DOM.
You can apply directives to <ng-container> to add behaviors or configuration to a part of your template.</ng-container>
Angular ignores all attribute bindings and event listeners applied to <ng-container>, including those applied via directive.</ng-container>
<ng-content>
</ng-content>
<ng-content> is a special element that accepts markup or a template fragment and controls how components render content. It does not render a real DOM element.
</ng-content>
Deferred loading with @defer
Deferrable views, also known as @defer blocks, reduce the initial bundle size of your application by deferring the loading of code that is not strictly necessary for the initial rendering of a page
What are signals?
A signal is a wrapper around a value that notifies interested consumers when that value changes
Signals can contain any value, from primitives to complex data structures.
You read a signal’s value by calling its getter function, which allows Angular to track where the signal is used.
Signals may be either writable or read-only.
Writable signals
Writable signals provide an API for updating their values directly. You create writable signals by calling the signal function with the signal’s initial value:
const count = signal(0);
// Signals are getter functions - calling them reads their value.
console.log(‘The count is: ‘ + count());
To change the value of a writable signal, either .set() it directly:
or use the .update() operation to compute a new value from the previous one:
Computed signals
Computed signal are read-only signals that derive their value from other signals. You define computed signals using the computed function and specifying a derivation:
const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);</number></number>
Loading of computed signals
Computed signals are both lazily evaluated and memoized
How to create custom pipe?
implements PipeTransform
