My bookmarks and blogposts regarding Software Development in .NET, C#, Angular, JavaScript, CSS, Html
So now how about listening to events on the host element that wraps the component’s template? How can we do that properly in Angular apps? That’s the very question we will answer in this article. Before diving directly into listening to DOM events on a host element, I think we need to touch on what a host element is. The concept of host element applies not only to components but also attribute directives.
Source: Four ways of listening to DOM events in Angular (Part 2: @HostListener)
To run component tests only for a certain browser and spec file use this command:
ng test --browsers=Chrome --include=**/detail.component.spec.ts
Enables clicking on Angular selectors in your HTML files and being redirected to their component definition, as well as the other way around by clicking on templateUrl and styleUrls in your component.
No matter how much familiarity you have with Angular, or how you feel about it, JetBrains IDEs can make your experience with this framework much better. In today’s FOMO digest, we’ll tell you about the features for working in Angular that you can find in JetBrains IDEs, such as WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand, and RubyMine.
Source: FOMO Digest #2: Top 5 Tips for Angular Development With JetBrains IDEs | The WebStorm Blog
Store is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.
Key concepts
Actions describe unique events that are dispatched from components and services. State changes are handled by pure functions called reducers that take the current state and the latest action to compute a new state. Selectors are pure functions used to select, derive and compose pieces of state. State is accessed with the Store, an observable of state and an observer of actions.Local state management
NgRx Store is mainly for managing global state across an entire application. In cases where you need to manage temporary or local component state, consider using NgRx ComponentStore.
Source: NgRx – @ngrx/store
This article is an excerpt from my Angular deep dive course
Modern web stack involves lots of moving parts. A browser provides DOM to describe what should be rendered on the screen and API to manipulate that presentation. It runs JavaScript as a reaction to some kind of asynchronous events initiated by user actions. The JavaScript code is usually split into framework code and application code. Application code implements business logic that processes input data and updates application state. The task of a framework is to transform the application state into DOM updates. The common name for this phrase is rendering, but it has different names in different frameworks. In Angular it’s known as change detection.
Step 1.
Build your angular application for “production”:
ng build –dist -> output entire site to root/dist folder copy that folder to your IIS website folder.
Step 2.
IIS uses a file called web.config to setup some configuration for a website.
Make sure you have something similar as below in a web.config file in the site root folder (a typical Angular config scenario):
<configuration>
<system.webServer>
<!-- These rewrite rules requires the IIS Rewrite module -->
<rewrite>
<rules>
<!-- Support for Angular internal url routing system (routing module) -->
<rule name="Angular routing" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
<!-- Adds https scheme if missing for all URLs -->
<rule name="FQDN to SSL" stopProcessing="true">
<match url="^(.*)$" />
<conditions>
<add input="{HTTPS}" pattern="^OFF$" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:1}" />
</rule>
</rules>
</rewrite>
<!-- Mime type fix for woff2 font file type -->
<staticContent>
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
</system.webServer>
<!-- Its okay to cache these static files, index.html will include cache busting paths for Angular js and css files. (when building with --dist param) -->
<system.webServer>
<caching enabled="true">
<profiles>
<add extension=".svg" policy="CacheUntilChange"/>
<add extension=".ico" policy="CacheUntilChange"/>
<add extension=".js" policy="CacheUntilChange"/>
<add extension=".css" policy="CacheUntilChange"/>
</profiles>
</caching>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="5.00:00:00" />
</staticContent>
</system.webServer>
<!-- Make sure index.html is never cached -->
<location path="index.html">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
</staticContent>
<httpProtocol>
<customHeaders>
<add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
<add name="Pragma" value="no-cache" />
<add name="Expires" value="-1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
</configuration>
Very good offical Angular video explaining reasons why the dreaded error might occur and solutions.
I wanted to see how many listeners there was for a certain subject, and where they reside in the source code.
Here is how in chrome devtools, put a breakpoint before the subjects .next() call. And inspect the subject:
observers array count = number of “listeners”
FunctionLocation = source code reference
(Context: Angular v11, rxjs)
Introduction to Storybook for Angular Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
Source: Introduction to Storybook