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