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.
Category: Angular
Top 5 Tips for Angular Development With WebStorm | JetBrains
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
NgRx – global state management for Angular applications – Getting started
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
Rendering cycle in Angular applications — browser, angular and zone.js interaction | Angular In Depth
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.
Running Angular on an IIS web server
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>
[Debugging] Expression has changed after it was checked – YouTube
Very good offical Angular video explaining reasons why the dreaded error might occur and solutions.
Rxjs debugging subscribers
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 Angular Storybook – a tool for component UI development
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
A simpler and smaller Angular starter project
A lot of complaints I heard when starting with Angular are about the sheer amount of files you get even on simple apps. When looking at the default starter template you get from Angular CLI’s
ng newcommand, it’s true that it can be a bit overwhelming if you’re not used to it.But it doesn’t have to always be that way. In this article, we’ll explore how we can create a smaller and simpler template that’s also easier to grasp for beginners, following the YAGNI principle.
(Angular version 14)
Source: A simpler and smaller Angular starter with ngLite – DEV Community
Use of Enums in Angular 8+ HTML template
in the TS
import { SomeEnum } from 'path-to-file';
public get SomeEnum() {
return SomeEnum;
}
in the HTML use
*ngIf="SomeEnum.someValue === 'abc'"
EDIT: Time goes by and we learn more as a developer, the approach I’m using right now doesn’t use the get method. Both solutions work, just choose the one you like the most.
in the TS
import { SomeEnum } from 'path-to-file';
export class ClassName {
readonly SomeEnum = SomeEnum;
}
in the HTML use
*ngIf="SomeEnum.someValue === 'abc'"From: Use of Enums in Angular 8 HTML template for *ngIf – Stack Overflow