Angular - Experienced

Dependency Injection

A mechanism to inject our dependencies into components and directives throughout our application

Router State

A route tree Tree's nodes are aware of "consumed" URL segments, received arguments, and processed data Used to get the current routerState from anywhere in the application

HTTP Interceptors (HttpClient)

Allow us to intercept incoming and outgoing HTTP requests and responses Can edit or update the value of the request Perform actions on status codes or messages in the response Must be registered in the app module providers to be used

Router Links

Anchor tag directive that gives the router authority over those elements Pass in string values to the routerLink directive <a routerLink="/home" >Home Page</a> <a routerLink="/about-us" >About us</a>

ngOnChanges lifecycle hook

Called before ngOnInit, and whenever one or more input properties of a component change Receives a SimpleChanges object that contains the previous and current values of the property

Parameterized Pipes

Can accept additional parameters to customize transformation Params are created by appending a :

Native Encapsulation

Component does not inherit styles from the main HTML Styles in the @Component decorator are only applicable to that component

Emulated Encapsulation

Component inherits styles from the main HTML Styles in the @Component decorator are only applicable to that component

No Encapsulation

Component styles are propagated (transmitted) back to the main HTML Accessible to all components on the page

Explain pipes

Functions that format and transform data to be displayed • uppercase, lowercase, titlecase • percent, number, decimal • slice, json, keyvalue • date, currency • async - auto unwraps observables or promises and and updates the view

Change Detection

Mechanism to update the view when the app state changes Each component gets a change detector on app startup Detects changes in the app data and updates the views to reflect those changes Ensures the UI remains in sync with the data model

MVVM Architecture

Model View ViewModel • Model - structure/data of an object • View - visual layer of the app, displays the data from the model • ViewModel - abstract layer of the app, manages the data of a model and displays it in the view

Explain string interpolation (property binding)

One-way data binding technique Uses double curly brackets to display data from the component in the template When the data changes in the component, the changes are reflected in the view

Observables vs Promises

Promise • Emits a single value • Eager • Can not be cancelled Observable • Emits multiple values over time • Lazy, not called until subscription • Provides operators like map, forEach, filter, reduce, retry, retryWhen

What is RxJs

Reactive Extensions for JavaScript Enables use of observables by allowing us to compose async or callback-based code Typically used in HTTP calls

Class Decorators

TS feature used to extend and modify the behavior of classes Add metadata, modify functionality, or configure certain aspects of a class @Component @CustomDecorator @Injectable @Module Common properties: selector, template, templateUrl, styles, styleUrls, providers, inputs, outputs, queries, animations, etc

AOT Compilation

The browser cannot understand Angular components and templates, so they must be compiled Ahead Of Time - during build time

Explain bootstrapping

The main module (entry point) of an Angular app, commonly referred to as AppModule Responsible for initializing (boostrapping) the app Loads the root component and preps the app for execution

Transpiling

Transforming source code of one programming language into another TypeScript > JavaScript Dart > JavaScript

Angular Material

UI component library that provides pre-built, customizable UI components Follows Material design guidelines, which adheres to contemporary web design concepts

Property Decorators

Used to enhance properties in our classes @Input - declares an input property @Output - declares an output property @ReadOnly

Method Decorators

Used to extend and modify the behavior of classes @HostListener - subscribe to events @ViewChild/Children - gets the ref to a child component or element

Angular renders client-side by default, can it render server-side as well?

Yes, Angular provides a tool called Angular Universal for server-side rendering. Makes your content available on every search engine Loads faster since rendered pages are available sooner

ngAfterContentChecked lifecycle hook

called after ngAfterContentInit and every subsequent ngDoCheck responds after the projected content is checked

ngAfterViewChecked

called after ngAfterViewInit responds after the component's view, or child component's view is checked

ngDoCheck lifecycle hook

called after ngOnChange and ngOnInit used to detect and act on changes that cannot be detected by Angular

ngOnDestroy

called before Angular destroys the component Used to clean up code and detach event handlers

ngOnInit lifecycle hook

called once, after the ngOnChanges hook Marks the creation of a component Accepts no args, returns void

Component Decorator

import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })

ngAfterViewInit

responds after a component's view, or child component's view, is initialized

Eager Loading

• Default loading technique • Feature modules are loaded before the app begins • Good for small scale apps

Lazy Loading

• Loads feature modules dynamically as needed • Speeds up the app • Better for large projects where all modules are not required at the start

Advantages of AOT Compilation (--aot)

• Rendering is faster • Eliminates separate AJAX requests for HTML and CSS source files • Error detection during build phase • Better security - HTML and templates are added to the JS files before they run inside the browser

Encapsulation

• Specifies the component's template and styles • 3 types: native, emulated, none