Fundamentals Flashcards
(13 cards)
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
