Basics Flashcards
What are decorators in Angular?
Decorators are a design pattern or functions that define how Angular features work. They are used to make prior modifications to a class, service, or filter. Angular supports four types of decorators, they are:
- Class Decorators
- Property Decorators
- Method Decorators
- Parameter Decorators
What are Templates in Angular?
A template is a form of HTML that tells Angular how to render the component.
What are the differences between an Annotation and a Decorator in Angular?
Annotations in Angular are used for creating an annotation array. They are the metadata set on the class that is used to reflect the Metadata library.
Although Annotations and Decorators both share the same @ symbol in Angular, they both are different language features.
Annotations: These are hard-coded language feature. Annotations are only metadata set on the class that is used to reflect the metadata library. When user annotates a class, the compiler creates an attribute on that class called annotations, stores an annotation array in it, then tries to instantiate an object with the same name as the annotation, passing the metadata into the constructor. Annotations are not predefined in AngularJs so we can name them on our own.
Example:
@ComponentAnnotation
Features of Annotations:
Annotations are hard-coded.
Annotations are used by AtScript and Traceur compiler.
Annotations reflect metadata library
Note: Nowadays AngularJs switched from AtScript to TypeScript but Annotations are supported these days also.
Example: Here component is annotated as ComponentAnnotation and further used.
import {
ComponentAnnotation as Component,
} from ‘@angular/core’;
export class ComponentAnnotation extends DirectiveMetadata {
constructor() {
}
}
Decorators: A decorator is a function that adds metadata to a class, its members, or its method arguments. A decorator is just a function that gives you access to the target that needs to be decorated. There are four type of decorators all of them arem mentioned below:
Types of Decorators:
Class decorators like @Component, @NgModule
Property decorators like @Input and @Output
Method decorators like @HostListener
Parameter decorators like @Injectable
Features of Decorators:
Decorators are predefined in AngularJs.
Decorators are used by TypeScript compiler.
Decorators are used to attach metadata to a class,objects and method.
Example:
import { Component } from ‘@angular/core’;
@Component({
selector: 'hi',
template: '<div>GeeksForGeeks</div>',
})
export class Geeks{
constructor() {
console.log('GeeksForGeeks');
}
}
Differences between Annotation and Decorator:
Annotation Decorator
Used by Traceur compiler Used by Typescript compiler
Annotations are only metadata set on the class using the Reflect Metadata library. Decorator corresponds to a function that is called on the class.
Annotations are used for creating an attribute annotations that stores array. Decorator is a function that gets the object that needs to be decorated.
They are Hard-coded They are not Hard-coded
Exp. Imports for Annotations: import {ComponentAnnotation as Component} from ‘@angular/core’; Exp. Imports for Decorators: import {Component} from ‘@angular/core’;
What are Annotations in Angular?
Annotations in Angular are used for creating an annotation array. They are the metadata set on the class that is used to reflect the Metadata library.
What are Directives in Angular?
Directives are attributes that allow the user to write new HTML syntax specific to their applications. They execute whenever the Angular compiler finds them in the DOM. Angular supports three types of directives.
- Component Directives
- Structural Directives
- Attribute Directives
What is an AOT compilation? What are its advantages?
The Ahead-of-time (AOT) compiler converts the Angular HTML and TypeScript code into JavaScript code during the build phase, i.e., before the browser downloads and runs the code.
Some of its advantages are as follows.
1. Faster rendering
2. Fewer asynchronous requests
3. Smaller Angular framework download size
4. Quick detection of template errors
5. Better security
What are Components in Angular?
Components are the basic building blocks of the user interface in an Angular application. Every component is associated with a template and is a subset of directives. An Angular application typically consists of a root component, which is the AppComponent, that then branches out into other components creating a hierarchy.
What are Pipes in Angular?
Pipes are simple functions designed to accept an input value, process, and return as an output, a transformed value in a more technical understanding. Angular supports several built-in pipes. However, you can also create custom pipes that cater to your needs.
Some key features include:
1. Pipes are defined using the pipe “|” symbol.
2. Pipes can be chained with other pipes.
3. Pipes can be provided with arguments by using the colon (:) sign.
15. What is the PipeTransform interface?
As the name suggests, the interface receives an input value and transforms it into the desired format with a transform() method. It is typically used to implement custom pipes.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}
What are Pipes in Angular?
Pipes are simple functions designed to accept an input value, process, and return as an output, a transformed value in a more technical understanding. Angular supports several built-in pipes. However, you can also create custom pipes that cater to your needs.
Some key features include:
1. Pipes are defined using the pipe “|” symbol.
2. Pipes can be chained with other pipes.
3. Pipes can be provided with arguments by using the colon (:) sign.
15. What is the PipeTransform interface?
As the name suggests, the interface receives an input value and transforms it into the desired format with a transform() method. It is typically used to implement custom pipes.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}
- What are Pure Pipes?
These pipes are pipes that use pure functions. As a result of this, a pure pipe doesn’t use any internal state, and the output remains the same as long as the parameters passed stay the same. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.
What are Impure Pipes?
For every change detection cycle in Angular, an impure pipe is called regardless of the change in the input fields. Multiple pipe instances are created for these pipes. Inputs passed to these pipes can be mutable.
By default, all pipes are pure. However, you can specify impure pipes using the pure property, as shown below.
@Pipe({
name: 'demopipe',
pure : true/false
})
export class DemopipePipe implements PipeTransform {What is an ngModule?
NgModules are containers that reserve a block of code to an application domain or a workflow. @NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime. In addition, it identifies the module’s components, directives, and pipes, making some of them public, through the export property so that external components can use them.
What are filters in Angular? Name a few of them.
Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services. Some inbuilt filters are as follows.
• date - Format a date to a specified format.
• filter - Select a subset of items from an array.
• Json - Format an object to a JSON string.
• limitTo - Limits an array/string, into a specified number of elements/characters.
• lowercase - Format a string to lowercase.
What is view encapsulation in Angular?
View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:
- Emulated - styles from the main HTML propagate to the component.
- Native - styles from the main HTML do not propagate to the component.
- None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page.
Explain the lifecycle hooks in Angular
In Angular, every component has a lifecycle. Angular creates and renders these components and also destroys them before removing them from the DOM. This is achieved with the help of lifecycle hooks. Here’s the list of them -
- ngOnChanges() - Responds when Angular sets/resets data-bound input properties.
- ngOnInit() - Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties/
- ngDoCheck() - Detect and act upon changes that Angular can’t or won’t detect on its own.
- ngAfterContentInit() - Responds after Angular projects external content into the component’s view.
- ngAfterContentChecked() - Respond after Angular checks the content projected into the component.
- ngAfterViewInit() - Respond after Angular initializes the component’s views and child views.
- ngAfterViewChecked() - Respond after Angular checks the component’s views and child views.
- ngOnDestroy - Cleanup just before Angular destroys the directive/component.
