Rob Gravelle

Part 1: Form, Input, and Label Elements HTML Web forms have been gaining a lot of traction over the past several years as the World-Wide-Web has become increasingly interactive. HTML forms are used to collect user input. The user input is most often sent to a server for processing. Client-side JavaScript is sometimes employed as […]

The ViewChild decorator is the recommended way to access a directive, child component, or DOM element from a parent component class in Angular applications. Sure, you could use document.getElementByID() or similar JavaScript selector, but there are a few good reasons why that is not a good idea: It goes against Angular’s Component-based architecture by reaching […]

The Angular Material MatMenu is a floating panel containing list of options. It’s like the drop-down part of Select list, but without the textbox or label portion that shows the selected item:   Also absent is the arrow button that opens the list. For that reason, the menu is typically attached to an HTMLElement that […]

In the Binding CSS Styles to Events in Angular Applications article we learned a couple of techniques for dynamically styling elements in Angular, including the use of CSS variables. The great thing about CSS variables is that they may be applied to pseudo-classes like hover and focus. Another feature of CSS variables that we didn’t […]

Angular lets you conditionally set both classes and styles via the ngClass and ngStyle directives respectively. Overall, these work very well. However, there are some instances where they cannot be utilized, i.e. for: the dynamic styling of elements using TypeScript variables that are not known until runtime, or the assignment of styles to pseudo-classes such […]

In Angular applications, we often rely on more than one asynchronous call to load component data. This often necessitates that we hold off on initializing the component until we have received all of the responses. One way to do that is to employ some of the RxJS library’s plethora of combination operators. In this tutorial, […]

One of the hallmarks of complex applications is the sourcing of data from numerous sources. These can be external data providers, applications, or a local database. RxJS provides a variety of operators for combining these into one observable based on order, time, and/or structure of emitted values. In this article, we’ll learn to subscribe to […]

One of the first challenges you’ll face when working with RxJS Observables is getting them to execute in a specific order. On the surface, this seems like a straightforward goal, but, when it comes to asynchronous processes, nothing is ever simple. Even if observables are executed in succession, they won’t necessarily emit values in the […]

The early days of GUI applications ushered in a new kind of paradigm known as event-driven architecture. Its main feature is that the flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or message passing from other programs or threads. It was part of Visual Basic, […]

The easiest way to add external dependencies to your Angular projects is through npm. The second best option is to add script tags to the web page that hosts the application. However, that option only works if you have access to the host page. Barring that, you’ll have to load your JavaScript files dynamically. That’s […]

JavaScript (JS) is a wonderfully quirky language. Inspired by Smalltalk, it uses a C-like syntax that combines aspects of procedural, functional, and object-oriented programming (OOP), all thrown together in a delightfully non-opinionated way. JavaScript is object-oriented in the sense that everything in JS is an object. However, JS objects are not the same as the […]

People who develop Angular applications, like myself, tend to forget that TypeScript (TS) is more than Angular’s primary language (HTML and CSS aren’t technically languages are they?). It’s really an ideal choice for anyone who wants to code in JavaScript, but with stronger type enforcement. Even within the realm of Angular development, becoming more comfortable […]