Use nvm For Managing Dev Environments For Any Version of Angular

Install nodejs
1. Install xcode
$ xcode-select --install
2. Install nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
3. Open another bash session to get settings from nvm install
4. List installed node versions
$ nvm list
5. Or list from the cloud (last 9 versions)
$ nvm ls-remote | tail -n9
6. Install v14.5.0
$ nvm install v14.5.0
7. Setup this version as default
$ nvm use v14.5.0
$ nvm alias default v14.5.0
8. Check node version
$ node -v
v14.5.0
9. Update npm
$ npm install -g npm
10. Check npm version
$ npm -v
6.14.6

Install yarn package manager
1. $ npm install -g yarn

Install angular cli on local project
1. Go to project base directory
$ cd ./project/ui
2. Add angular cli (with versioning if needed)
$ yarn add @angular/cli@9.1.12
3. Check version
$ ng --version
Angular CLI: 9.1.12
Node: 14.5.0
OS: darwin x64
Angular: 9.1.12

Getting Started with Angular NgRx

1. Install ngrx
$ yarn add @ngrx/store

2.  Install Redux Store dev tools
Install chrome browser Redux DevTools extension
$ yarn add @ngrx/store-devtools

3. Install NgRx Effects
$ yarn add @ngrx/effects

How to Integrate Clarity UI on your Angular App

I heart Clarity UI.

Install
$ yarn add clarity-icons
$ yarn add @webcomponents/custom-elements@1.0.0
$ yarn add clarity-ui
$ yarn add clarity-angular

Use clarity on Angular
$ vi .angular-cli.json
"styles": [
  ...
  "../node_modules/clarity-icons/clarity-icons.min.css",
  "../node_modules/clarity-ui/clarity-ui.min.css"
],
"scripts": [
  ...
  "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
  "../node_modules/clarity-icons/clarity-icons.min.js"
],

$ vi app.module.ts
import { ClarityModule } from "clarity-angular";
imports: [
  ...
  ClarityModule.forRoot(),
  ...
],

Angular Development Production Settings

This came from this post

Angular apps created using angular-cli will have src/environments directory.

1. Add another file in there called environment.staging.ts with the following entry...
export const environment = {
  production: false,
  envName: 'staging'
};

2. Modify .angular.cli.json
"environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "staging": "environments/environment.staging.ts"
      }

3. Now when creating a build or serving the app..
$ ng build -prod
$ ng build -staging
$ ng serve -prod
$ ng serve -staging

4. To use...
import { environment } from './environment';
export class MyappAppComponent {  
  title = 'myapp works!';
  environmentName = environment.envName;
}

Angular Material Table Dynamic Height

For md-table, the height can be dynamically adjusted this way...

1. sample-table.component.html
<div class="example-container mat-elevation-z8" [style.max-height.px]="tableHeight">
  ...
  <md-table #table [dataSource]="dataSource" mdSort>

2. sample-table.component.ts
import { HostListener } from '@angular/core';

export class SampleTableComponent {
  tableHeight: number;

  ngOnInit() {
    this.tableHeight = window.innerHeight - 90;
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize(event){
    this.tableHeight = event.target.innerHeight - 90;
    console.log("height: " + this.tableHeight );
  }

Angular Starter Project with Material

Follow angular setup from this post.
Reference posts from here and here. And from a starter project.

1. Create angular project
$ ng new management-gui
$ cd management-gui

2. Get Angular Material
$ yarn add @angular/material @angular/animations @angular/cdk

3. Get HammerJs and add to .angular-cli.json
$ yarn add hammerjs
$ vi .angular-cli.json
"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

4. Add Angular Material on to app.module.ts
$ vi src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Set global styles.css with an Angular Material theme
$ vi src/styles.css
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

6. Add Material icons in index.html
$ vi src/index.html

Angular Cheat Sheet

Creating Components

import { Component } from '@angular/core'
@Component({
 selector: 'courses',
 template: '<h2>Courses</h2>'
})
export class Component { }

Then, register them in AppModule (or the module the belong to):

@NgModule({
 declarations: [CoursesComponent]
})
export class AppModule { … }

Using Components

import { CoursesComponent } from './courses.component'
@Component({
 template: '<courses></courses>'
})

Templates
Interpolation syntax:
{{ title }}

Displaying lists:
<ul>
 <li *ngFor=“let course of courses”>
 {{ course }}
 </li>
</ul>

Services

import { Injectable } from '@angular/core';
@Injectable()
export class CourseService {
}

Dependency Injection

Register a service as a provider in AppModule (or the module it belongs to):

@NgModule({
 providers: [CourseService]
})
export class AppModule { … }

Then, inject it into the constructor of the components that need it:

export class CourseComponent {
 constructor(courseService: CourseService) {}
}

Directives
Basic structure
import { Directive } from '@angular/core'

@Directive({
 selector: '[autoGrow]',
 host: {
 '(focus)': 'onFocus()',
 '(blur)': 'onBlur()'
 }
})
export class AutoGrowDirective {
 onFocus() { … }
 onBlur() { … }
}

To access and modify DOM elements

import { ElementRef, Renderer } from '@angular/core'

export class AutoGrowDirective {
 constructor(
 private el: ElementRef,
 private renderer: Renderer) {
 }
 onFocus(){
 this.renderer.setElementStyle(this.el.nativeElement,
 'width', '200');
 }
}

Registration

Once you implement a directive, you should register it in AppModule (or the module it belong to):

@NgModule({
 declarations: [AutoGrowDirective]
})
export class AppModule { }

Angular Bindings

Interpolation
<h1>{{ title }}</h1>

Property binding
<img [src]="imageUrl" />
<img bind-src="imageUrl" />

Class binding
<li [class.active]="isActive" />

Style binding
<button [style.backgroundColor]="isActive ? 'blue' : 'gray'">

Event binding
<button (click)="onClick($event)">
<button on-click="onClick($event)">

Two-way binding
<input type="text" [(ngModel)]="firstName">
<input type="text" bindon-ngModel="firstName">

Input Properties
Using @Input annotation
import { Input } from ‘@angular/core’;
@Component(…)
export class FavoriteComponent {
 @Input(‘is-favorite’) isFavorite = false;
}

Using component metadata
@Component({
 inputs: [‘isFavorite:is-favorite’]
})
export class FavoriteComponent {
 isFavorite = false;
}

In the host component
<favorite [is-favorite]=“post.isFavorite”></favorite>


Output Properties
Using @Output annotation
import { Output } from ‘@angular/core’;
@Component(…)
export class FavoriteComponent {
 @Output(‘favorite-change’) change = new EventEmitter();

 onClick() {
 this.change.emit({ newValue: this.isFavorite });
 }
}


Using component metadata
@Component({
 outputs: [‘change:favoriteChange’]
})
export class FavoriteComponent {
 change = new EventEmitter();

 onClick() {
 this.change.emit({ newValue: this.isFavorite });
 }
}


In the host component
<favorite (favoriteChange)=“onChange()”></favorite>


Templates
@Component({
 template: ‘…’, // or
 templateUrl: ‘app/template.template.html’
})


Styles
@Component({
 styles: [‘…’],
 styleUrls: [‘…’, ‘…’];
})

Getting Ready for Angular Development

On Ubuntu:
Install nodejs
1. $ sudo apt-get install nodejs
2. $ sudo ln -s /usr/bin/nodejs /usr/bin/node
3. $ sudo apt-get install npm

Install typescript
1. $ sudo npm install -g typescript
2. $ sudo npm install -g typings

Install angular cli
1. $ sudo npm install -g @angular/cli

On Debian:
$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh -o install_nvm.sh
$ bash install_nvm.sh
$ source ~/.profile
$ nvm ls-remote
$ nvm install 8.5.0
$ nvm use 8.5.0
$ node -v
v8.5.0
$ npm -v
5.3.0
$ npm install -g yarn
$ yarn global add @angular/cli
$ vi ~/.profile
# yarn
export PATH="$PATH:`yarn global bin`"
$ ng set --global packageManager=yarn
$ ng --version
@angular/cli: 1.4.3
node: 8.5.0
os: linux x64

On Mac:
I followed this and this

Install nodejs
1. Install xcode
$ xcode-select --install
2. Install nvm
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
3. Open another bash session to get settings from nvm install
4. List installed node versions
$ nvm list
5. Or list from the cloud (last 9 versions)
$ nvm ls-remote | tail -n9
6. Install latest
$ nvm install 8.2.1
7. Setup this version as default
$ nvm use 8.2.1
$ nvm alias default 8.2.1
8. Check node version
$ node -v
v8.2.1
9. Update npm
$ npm install -g npm
10. Check npm version
$ npm -v
5.3.0

Install yarn package manager
1. $ npm install -g yarn

Install angular cli
1. $ yarn global add @angular/cli@1.2.7
2. Check version
$ ng --version
@angular/cli: 1.2.7
node: 8.2.1
os: darwin x64
3. Globally config angular-cli to use yarn
$ ng set --global packageManager=yarn

Test scaffold first angular app
1. $ ng new hello-world-app
2. Start server
$ cd hello-world-app
$ ng serve
3. Browse http://localhost:4200

Setup IDE
1. Install Visual Studio Code