Angular Champion

I was honored to be selected as an Angular ng-conf Champion. It was really cool to be on the floor during my first ng-conf and watch the announcement :)

As part of my activity in this role, I will be posting regular articles on Angular?covering its use in science and engineering applications. This article serves as a perma-link to all the articles.

I hope you find something of use in them and best of luck in your Angular efforts!

Reviewed/Published (most recent article at end of list)

Published

Angular Elements: So Easy, Even A Mathematician Could Do It?(also covers Angular running inside React)

Scientific Visualization With Angular?(bonus link to single-quadrant graphing engine as an Angular Component)

Editing Tabular Data In Angular?(illustrates a lot of techniques I've used in actual applications)

Dynamic Component Generation in Lazy Loaded Routes?(how to create components programmatically from JSON data, all loaded on-demand in Angular 8)

Cubic Beziers in Angular?(creating cubic Beziers with arc-length parameterization and four-point interpolation using the Typescript Math Toolkit - PixiJS used for rendering)

Cubic Bezier Splines with Angular 8 and PixiJS?(use PixiJS to render a cubic Bezier spline that passes through a number of control points in an Angular 8 application)

Integrating maps into your Angular application with Leaflet?(How to integrate Angular 8 and Leaflet Maps to produce maps that fluidly adapt to changes in browser size).

Angular State Management With BehaviorSubject?(an introductory example of state management for simple models using the RxJs BehaviorSubject).

Freehand Drawing in Angular?(a variable-width, speed-dependent freehand stroke, packaged as an Angular attribute directive).

Random thoughts on randomness in Typescript?(Typescript utility functions that are helpful with computations dealing with random processes).

Component-Based Forms?(sub-forms built with highly re-usable, standalone components - also covers in-depth details of credit-card validation)

Implementing The Strategy Pattern Using Lazy-Loaded Components In Angular Version 9 - (Two simulations of the point-in-circle problem, one rendered to Canvas, the other to SVG, with the simulation component lazy-loaded at runtime based on an algorithm id)

Kinematics In Angular For Fun And Profit - An introduction to 2D forward and inverse kinematics, all implemented in a Typescript library with five Angular 9 demos.

Introduction to the NgRx Suite Part I - An organized introduction to @ngrx/store, @ngrx/effects, and @ngrx/entity via a four-part tutorial series. This series covers an example EdTech application involving practice and skill assessment with quaternion arithmetic.

Getting Started With TensorFlow in Angular - A very introductory article on using TensorFlow for interactive learning in Angular. The discussion provides a contrast between DL and classical least squares for polynomial regression.

Data-Driven Components - Beyond basic binding; dynamic (runtime-generated) templates with string data, assigned via external JSON data.

Getting Started With Fabric JS in Angular. How to gets started using Fabric JS in Angular and optimize change-detection when using Canvas drawing libraries.

Higher-Order Functions. How to turn one function into many - full TypeScript source provided.

Creating A Vectorscope In Angular 12. How to create a primitive vectorscope (for color grading) in Angular 12. Article shows multiple ways to use Canvas natively (without use of a third-party library such as Fabric or Pixi) in an Angular application.

Build Your Own Pathfinder in Angular. This article provides a high-level overview of the A* algorithm for waypoints. The code in the accompanying GitHub is perfect for those wishing to learn by deconstructing code. Many developers find such experimentation to be more helpful than starting with rigid mathematical foundations.

Reactive, Data-Driven Finite State Machine. Finite State Machines are more than just theoretical constructs from computer science. They can be a practical and efficient means of implementing complex business logic. This article introduces a reactive FSM whose states and functional descriptions are entirely data-driven. This provides an opportunity to load FSM's on-the-fly from the server to implement complex multi-tenant tasks.

Typescript Expression Engine. Parse expressions provided as strings using infix notation. Evaluate the expression to either a number, boolean, or string based on specified values of the independent variables. Free for commercial use.

Math Types in Typescript. This is a set of Typescript classes and functions that wrap common types used in math operations such as reals, integers, whole numbers, and fractions. Complex numbers and quaternions could be added in the future. A common interface for all math types allows them to be used as variables in an equation (that could be symbolically solved). Javascript strings and numbers can be used in operations on math types with consistent coercion among all types.