Using Renderer2 in Angular

The Renderer2 class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach because it then makes it easier to develop apps that can be rendered in environments that don’t have DOM access, like on the server, in a web worker or on native mobile.

Source: Using Renderer2 in Angular

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

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 FormsModuleHttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material DesignIonic, 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