Angular Interview

Front 1

Why were client-side frameworks developed?

Back 1

Growing complexities of web application logic

Data handling across views

Separation of concerns

Front 2

What does the angular.json file do?

Back 2

Contains all the app configs

Used by the builder to find entry point of application

Front 3

What does the main.ts file do?

Back 3

Creates a browser environment

Bootstraps the AppModule declared in app.module.ts

Front 4

What are some of the ways Angular addresses front end development challenges?

Back 4

Separation of concerns via Components

Front 5

Where are all app Components declared?

Back 5

AppModule - app.module.ts

Front 6

What does the app root aka app.component.ts file do?

Back 6

Interacts with the web page and serves data to it.

Front 7

What three properties are required to make up a component and what are their functions?

Back 7

Selector - used for accessing the component like an ID

Template /template-URL - holds the view/html

StylesURL - contains the stylesheet

Front 8

What file calls the app-root?

Back 8

Index.html

Front 9

How does an angular app work?

Back 9

1. Builder determines app entry point via the angular.json file

2. Entry point (main.ts) file imports platformBrowserDynamic and bootstraps the AppModule

3. Angular calls index.html

4. Index.html calls app-root component

5. Html templates are displayed inside the app root

Front 10

What are the advantages of angular VS other frameworks?

Back 10

1. Includes a lot of features out of the box like routing, state management, http services, rxjs, DI, two-way binding, forms

2. Declarative UI (html) makes it easier to use

3. Long term Google support

4. Consistency - development is usually more consistent across projects and developers

Front 11

What are the main differences between Angular and AngularJS

Back 11

1. Architecture: Uses MVVC Components (aka directives with pre-defined templates) vs MVC

2. Language: Typescript (statically typed) vs JS (dynamically typed)

3. Mobile Support: Angular supported by all major browsers, AngularJS is not

Structure: makes it easier to maintain larger code bases

4. Property and event binding is simplified using [] and () instead of named directives.

Front 12

What's the difference between static and dynamic typed languages?

Back 12

Static typed code is translated and checked when the code is compiled. Dynamic is translatic on the fly while the application is running. Static language allows for type checking before running the program

Front 13

What is ahead-of-time (AOT) vs just-in-time (JIT) compilation?

Back 13

JIT

Compiled in the browser at run time.

Each file compiled separately

No need to rebuild after code changes

Best suited for local dev

AOT

Compiled at build time by the machine

All code compiled together

No need to destroy compiler

More secure (doesn't expose source code)

Best for production

Front 14

What are the advantages of AOT compilation?

Back 14

1. Faster - code is already translated and smaller application due to not needing to include angular compiler

2. Better security - all files compiled together and sent as single file, including external HTML and CSS files meaning less AJAX calls and hidden source code

3. Errors can be caught and handled earlier during the build

Front 15

What's the default compiler for Angular?

Back 15

JIT is default

Can run AOT by adding --aot as option to ng build and ng serve

Front 16

What are decorators?

Back 16

Used to mark file types like modules/components/services

Provides Metadata that defines how Angular should use the files

Front 17

How are component classes linked to their views?

Back 17

Via the decorators metadata

Front 18

What's the purpose of the BrowserModule?

Back 18

Provides essential services to launch and run a browser application.

Can only be used once in the root module

Front 19

What's the purpose of CommonModule?

Back 19

Provides all the basic Angular directives and pipes like *ngFor and *ngIf

Front 20

What is a module?

Back 20

A place to group components, directives, services and pipes with related purposes or functionality.

Can import other module functionality and export its own functionality to be used.

Front 21

What are the two types of modules called?

Back 21

Root module

(imports BrowserModule & CommonModule)

Feature module

(imports CommonModule only)

Decorated with @NgModule

Front 22

What's the purpose of services?

Back 22

Shares data and functions with different components

Front 23

How many times can a service be instantiated in an app?

Back 23

Once

Front 24

What decorator is used for services?

Back 24

@Injectable

Front 25

What are lifecycle hooks?

Back 25

Every component goes through a lifecycle from creation to destruction. Angular provides "hooks" that can trigger functionality during these different phases.

Front 26

What are the lifecycle hooks?

Back 26

ngOnChanges

ngOnInit

ngDoCheck

*subsets of check*

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

* end subset*

ngOnDestroy

Front 27

How is ngDoCheck() hook used?

Back 27

Detects and acts on changes that angular can't catch with ngOnChanges. Essentially a custom onChange event.

Front 28

How are ngAfterContentInit() and ContentChecked() used

Back 28

Init responds after angular projects external content into a component view. Checked responds after the projected content is checked by angular.

Front 29

How are ngAfterViewInit() and ViewChecked() used?

Back 29

Responds after angular initializes the component's views and child views. Checked runs after angular checks those views.

Front 30

How is ngOnDestroy() used?

Back 30

Clean up before an element is destroyed. You should unsubscribe Observables and detach event handlers to avoid memory leaks

Front 31

What's the difference between string interpolation and data binding?

Back 31

Interpolation: one way binding only from component to view. Uses {{}}

Data binding: two way binding. Uses []

Front 32

What's the difference between Angular and JS expressions

Back 32

Angular expressions:

Context: local aka $scope

Null handling: doesn't throw reference/type error

Control flow: can't use loops, conditionals or exceptions

Function declarations: No

Bitwise, comma, void ops: No

Filter/pipes: Yes

Allows one-time binding: No

JS expressions:

Context: global aka window scope

Null handling: throws reference/type error

Control flow: can use loops, conditionals and exceptions

Function declarations: Yes

Bitwise, comma, void ops: Yes

Filter/pipes: No

Allows one-time binding: No

Front 33

Observables vs Promises

Back 33

Promises

async only

Emits single value

Not lazy

Can't be cancelled

Observables

asyn and non async

Emits multiple values over time

Lazy - not called until subscribed

Has operator functions

Front 34

Do angular apps render on client side or server side by default?

Back 34

Client side

Front 35

How can Angular be rendered on server side?

Back 35

Angular Universal

Front 36

What is an Angular directive?

Back 36

A class with its own behavior that can be imported into different components. Often used on HTML elements to manipulate the DOM. Decorated with @directive

Front 37

What are the different types of Angular directives?

Back 37

Component

Structural

Attribute

Front 38

What's the purpose of an attribute directive?

Back 38

Change the look and behavior of a DOM element

Front 39

What's the purpose of a structural directive?

Back 39

Manipulate DOM elements

Always starts with *

Can be applied to any DOM element

Front 40

How do you share data from parent to child component

Back 40

@Input decorator in the child component and [property Name] in parent template on the child component.

Front 41

How to pass data from child to parent components

Back 41

@ViewChild + ngAfterViewInit() in parent

@Output + EventEmitter in child

Front 42

What's dependency injection?

Back 42

A design pattern in which a class requests dependencies rather than creating them. Angular provides dependencies to a class on instantiation.

Front 43

Explain MVVC

Back 43

Model View View Model

View is the visual layer. Model is the data layer. ViewModel is an abstract layer that manages the data, handles the logic and displays it in the view. View and ViewModel are connected by data binding.

Front 44

What is an injector?

Back 44

Data structure mechanism that's configured with a provider that stores info on where and how services form. Allows Angular to create a map of internal dependencies. A DI token is used like a key to the map. A new injector instance accompanies every class.

Front 45

What is a provider?

Back 45

An object that defines how to obtain an injectable dependency associated with a DI token/lookup. It provides the instructions to the injector.

Front 46

What are Angular pipes?

Back 46

Simple functions used in template expressions to transform data. Takes the element as first argument and list of parameters as second element. Represented by |

Front 47

Lazy loading vs eager loading

Back 47

Eager loads a resource as soon as code is executed, including dependencies. In Angular, this means all ngModules are loaded when the application loads

Lazy load delays initializing a resource until its actually needed/called.

Front 48

Does Angular use eager or lazy loading by default?

Back 48

Eager

Front 49

What does it mean for a component to have local scope?

Back 49

They can only be used in their current module unless exported. Private visibility. Have to be imported in every module that needs it.

Front 50

What does it mean for a service to have global scope?

Back 50

Public visibility. They can be used anywhere in your app. Only needs to be imported once in root.

Front 51

What kinds of modules need to be imported every time you need them?

Back 51

CommonModule (ngModule)

Any module that gives you components, directives, or pipes

Front 52

What kinds of modules only need to be imported once?

Back 52

HttpClientModule

BrowserModule

BrowserAnimations/NoopAnimationsModule

Any module that provides services only

Front 53

What are disadvantages of angular?

Back 53

1. Difficult to manage state as you scale due to two-way data binding

2. Difficult to manage various scopes as you scale and more difficult to debug

3. Large file sizes since it includes so much

Front 54

What are ways you can optimize an angular app?

Back 54

1. OnPush change detection

2. Detach change detection/ngZone

3. Pure pipes

4. AOT compilation

5. Lazy loading modules

6. Trackby on *ngFor

7. Preloading modules

Front 55

How does onPush change detection work?

Back 55

When a change occurs, angular checks every property of every object used in a component and its children. When onPush is turned on, it creates a new object reference instead of mutating the object itself. Then the child component checks if the object reference is the same and only checks the properties if it's not.

Front 56

How do you lazy load a module?

Back 56

In the routing module, you can add a path to the module you want to lazy load using .forChildren() to import the module instead of a component.

In the lazy loaded module, you add a separate routing module with the normal path and component syntax and remove the component from the AppModule declarations and add to the lazy loaded module declarations.