Angular – Page 5 – Andreas Plahn Blog

Angular – RadioControlValueAccessor

Using radio buttons with reactive form directives

The follow example shows how to use radio buttons in a reactive form. When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. Providing a name attribute is optional.

Source: Angular – RadioControlValueAccessor

3 Ways to Pass Async Data to Angular 2+ Child Components ― Scotch.io

Let’s start with a common use case. You have some data you get from external source (e.g. by calling API). You want to display it on screen.However, instead of displaying it on the same component, you would like to pass the data to a child component to display.The child component might has some logic to pre-process the data before showing on screen.
…
Solution 1: Use *ngIf
Solution 2: Use ngOnChanges
Solution 3: Use RxJs BehaviorSubject

Source: 3 Ways to Pass Async Data to Angular 2+ Child Components ― Scotch.io

Angular: Tips. The importance of Pipes – codeburst

What we all like in Angular primarily is that it all mostly about templates. Templates are smart, dynamic, they use change detection to update themselves on a moment’s notice when a model is updated, the can manage HTML elements and nested components, enrich the markup with directives and make on-the fly data transformations, and the template syntax is amazing. The tools provided are vast and rich, but is it up to us to use them wisely.

Source: Angular: Tips. The importance of Pipes – codeburst

Angular + Redux — The lesson we’ve learned for you

Gotchas from using Angular with Redux:

Source: Angular + Redux — The lesson we’ve learned for you – Supercharge’s Digital Product Development Guide – Medium

Deploy an Angular Application to IIS – Angular In Depth

Getting your Angular Router application actually working in a non-root folder on Internet Information Services

The Angular Router is a fantastic module for Single Page Apps. However, to deploy it in a Production scenario you will typically need to do some configuration to make it work. This article details the steps necessary to deploy an Angular Router application anywhere on Internet Information Services (IIS).

Source: Deploy an Angular Application to IIS – Angular In Depth

Working with Angular Reactive Forms and Radio Button / Checkbox inputs

Some good links regarding setup, validation, detecting changes etc.

Creating forms and fetching values: Angular 2 Radio Button and Checkbox Example

Creating forms dynamically with FormBuilder: (e.g. from code/json data) https://angular.io/guide/reactive-forms#generating-form-controls-with-formbuilder

Listen to changes: https://alligator.io/angular/reactive-forms-valuechanges/

Official doc: https://angular.io/guide/reactive-forms#reactive-forms

How to set aliases in Git Bash for Windows?

For Windows 10 with Git Bash:
Edit file “%userprofile%\.bashrc”
Using Notepad++ or other text editor in Administrator mode.

Add another alias line beneath the present alias lines:

alias ls='ls --color=auto --show-control-chars -a -p --time-style=long-iso -h -X --group-directories-first'
alias ll='ls -l --color=auto --show-control-chars -a -p --time-style=long-iso -h -X --group-directories-first'
alias ngs='ng serve --open'
alias grep='grep -i -n --color=always'
alias log='git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%C(bold blue) <%an> %Creset' --abbrev-commit'

Above is an alias ngs for serving angular development server and open a web browser.
Instead of typing “ng serve –open” in Git bash window you should now be able to just use ngs as an shortcut alias.

Understanding Angular modules (NgModule) and their scopes

Feature modules are NgModules for the purpose of organizing code.

As your app grows, you can organize code relevant for a specific feature. This helps apply clear boundaries for features. With feature modules, you can keep code related to a specific functionality or feature separate from other code. Delineating areas of your app helps with collaboration between developers and teams, separating directives, and managing the size of the root module.

https://angular.io/guide/feature-modules

The purpose of a NgModule is to declare each thing you create in Angular,

and group them together (like Java packages or PHP / C# namespaces).

There is two kind of main structures:

“declarations” is for things you’ll use in your templates: mainly components (~ views: the classes displaying data), but also directives and pipes,
“providers” is for services (~ models: the classes getting and handling data).

Source: Understanding Angular modules (NgModule) and their scopes

From angular official docs:

Modules are a great way to organize an application and extend it with capabilities from external libraries.

Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material Design, Ionic, and AngularFire2.

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

Modules can also add services to the application. Such services might be internally developed, like something you’d develop yourself or come from outside sources, such as the Angular router and HTTP client.

Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.

NgModule metadata does the following:

Declares which components, directives, and pipes belong to the module.
Makes some of those components, directives, and pipes public so that other module’s component templates can use them.
Imports other modules with the components, directives, and pipes that components in the current module need.
Provides services that the other application components can use.

Every Angular app has at least one module, the root module. You bootstrap that module to launch the application.

The root module is all you need in a simple application with a few components. As the app grows, you refactor the root module into feature modules that represent collections of related functionality. You then import these modules into the root module.

Read more here: https://angular.io/guide/ngmodules

Angular 5+ not working in Internet Explorer – solution

You installed the Angular CLI and used it to generate your new application. But, when you try to view it in Internet Explorer (IE), you see nothing. Now what?

The bad news:
Angular CLI applications require a few more steps in order to support Internet Explorer.

The good news:
It’s really simple: un-comment a few imports and install a couple of npm packages.

How to include and use jQuery in Angular CLI project

Tested in angular version 7:

install jquery:
npm install jquery
install jquery typescript intellisense:
npm install @types/jquery
edit the angular.json file in root folder:
in the architect / build / scripts location, add this:
```
"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
```
To use jquery inside a component.ts add this import at the top:

import $ from ‘jquery’;

Example code to check for functionality:
component html:
```
<button (click)="testJQuery()">Test jquery</button>
```
component.ts:
```
testJQuery() {
$('html').fadeOut();
$('html').fadeIn();
}
```
Click on the button should fade out and fade in the entire page.

Source: How to include and use jQuery in Angular CLI project