Angular Flashcards
What is Angular? Why was it introduced?
Angular is an open-source, JavaScript framework wholly written in TypeScript.
Angular was introduced to create Single Page applications
What is TypeScript?
TypeScript is a superset of JavaScript it provides some syntactic sugar and makes the code base more comfortable to understand and maintain
TypeScript code compiles down to JavaScript that can run efficiently in any environment.
What is data binding? Which type of data binding does Angular deploy?
Data binding allows Internet users to manipulate web page elements with the help of a web browser.
Two-way databinding : [(ngModel)]
One-way databinding
String interpolation : {{ user.name }}
Property Binding : img [src]=”imgUrl”
(Attribute) : td [attr.colspan] = ‘‘number”
(class) [class.green] = “isActive”
(style) [style.color] “isActive” ? green : red
Event Binding : (click)=”cookBacon()”
It includes dynamic HTML and does not require complex programming.
Data binding is used in web applications that contain interactive components such as forms, calculators, tutorials, and games.
Angular uses the two-way binding. Any changes made to the user interface are reflected in the corresponding model state.
Types of Data Binding
(string) Interpolation Binding {{}}
Allows the user to bind a value to the user interface element.
It is a one-way data binding mechanism , which means that data moves in one direction from the components to HTML elements.
Property Binding [ ]
Allows you to set the properties for HTML elements.
It is a one-way data binding mechanism
We use property binding for toggle functionality and sharing data between components.
Event Binding (click)="onClick()" Is when information flows from the view to the component when an event is triggered
Two-way Data Binding [( )]
is a mechanism where data flows from the component to the view and back.
Any changes made on either end are immediately reflected on both
What are decorators in Angular?
An Angular Decorator is a function, using which we attach metadata to a class, method, accessor, property, or parameter.
We apply the decorator using the form @expression, where expression is the name of the decorator.
- Class Decorators
@Component and @NgModule - Property Decorators
@Input (), @Output, @ReadOnly (), @Override ()
are used to decorate specific properties inside a class - Method Decorators
@HostListener
are used to decorate the method defined inside our class with functionality. - Parameter Decorators
@Inject ()
are used to decorate parameters in our class constructors
What are Directives in Angular?
Directives are attributes that allow the user to write new HTML syntax specific to their applications.
- Component Directives: are used in main class. @Component They contain the detail of how the component should be processed, instantiated and used at runtime.
- Structural Directives start with a * sign NgIf, NgFor, NgSwitch. are responsible for changing the structure of the DOM
- Attribute directives are used to change the look and behavior of the DOM elements. For example: ngClass, ngStyle etc.
What are Templates in Angular?
Angular Templates are written with HTML that contains Angular-specific elements and attributes.
What are Components in Angular?
Components are the main building block for Angular applications.
Each component consists of:
1- An HTML template that declares what renders on the page
2- A Typescript class that defines behavior
3- A CSS selector that defines how the component is used in a template
What are Pipes in Angular?
Pipes are simple functions designed to accept an input value, process, and return as an output,
Pipes are defined using the pipe “|” symbol.
{{ birthday | date:”MM/dd/yy” }}
{{ birthday | date | uppercase}}
Some key features include:
Pipes can be chained with other pipes.
Pipes can be provided with arguments by using the colon (:) sign.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
What is an ngModule?
NgModules are Angular’s way to group blocks of code that have
related domain,
workflow,
or capabilities.
They describe how the application fits together. and tells Angular how to compile and launch the application.
What are Services in Angular?
Angular Services perform tasks that are used by multiple components.
A service can be written once and injected into all the components that use that service.
They perform all the operational tasks for the components and avoid rewriting of code
What are lifecycle hooks in Angular
Every component in Angular has a lifecycle, different phases it goes through from the time of creation to the time it’s destroyed.
Angular provides hooks to tap into these phases and trigger changes at specific phases in a lifecycle.
ngOnChanges( )
This method/hook receives a Simple Changes object which contains the previous and current values of the property.
ngOnInit( )
It initializes the component and sets the input properties of the component.
ngDoCheck( )
used to detect and act on changes that cannot be detected by Angular.
We can implement our change detection algorithm in this hook.
ngAfterContentInit( )
This hook responds after the content gets projected inside the component.
ngAfterContentChecked( )
It responds after the projected content is checked.
ngAfterViewInit( )
It responds after a component’s view(HTML) is initialized.
ngAfterViewChecked( )
it responds after the component’s view, or the child component’s view is checked.
ngOnDestroy( ) It gets called just before Angular destroys the component.
This hook can be used to clean up the code and detach event handlers.
How are observables different from promises
Promise regenerate a single value Not Lazy Cannot be cancelled Promises are always asynchronous. Even when the promise is immediately resolved
Observable
regenerate multiple values over a period of time
Lazy. An observable is not called until we subscribe to the observable
Can be cancelled by using the unsubscribe() method
Observable provides operators like map, forEach, filter, reduce, retry, retryWhen etc.
Observable, can be both synchronous and asynchronous.
The biggest feature of using observables is the use of operators. We can use multiple operators on an observable whereas, there is no such feature in a promise.
What is AOT compilation?
Every Angular application consists of components and templates which the browser cannot understand. Therefore, all the Angular applications need to be compiled first before running inside the browser.
Angular provides two types of compilation:
JIT(Just-in-Time) compilation
AOT(Ahead-of-Time) compilation
In JIT compilation,
the application compiles inside the browser during runtime.
to run ng serve
Whereas
in AOT compilation,
the application compiles during the build time for the project.
to run ng serve –AOT or ng serve –prod
The advantages of using AOT compilation are:
Since the application compiles before running inside the browser, the browser loads the executable code and renders the application immediately, which leads to faster rendering.
In AOT compilation, the compiler sends the external HTML and CSS files along with the application, eliminating separate AJAX requests for those source files, which leads to fewer ajax requests.
Developers can detect and handle errors during the building phase, which helps in minimizing errors.
The AOT compiler adds HTML and templates into the JS files before they run inside the browser. Due to this, there are no extra HTML files to be read, which provide better security to the application.
