Angular Summary

    npm uninstall -g @angular/cli
    npm i -g @angular/cli
    ng --version

Project First Steps

New Angular Project

  ng new my-app
  cd my-app
  ng serve --open

  Open in the Browser http://localhost:4200/

Install Bootstrap

  cd my-app
  npm i bootstrap
            Optional: 
              npm i jquery popper.js

Font Awesome

  ng add @fortawesome/angular-fontawesome
  Use down arrow and space to select all free options

  It updates automatically app.module.ts

ts file

  import { faTimes } from '@fortawesome/free-solid-svg-icons';

  export class TaskItemComponent implements OnInit {

    faTimes = faTimes;
    
  }

html file

  <div>
    <fa-icon [ngStyle]="{'color': 'red'}" [icon]="faTimes"></fa-icon>
  </div>

Font Awesome - the old way

  cd my-app
  npm i @fortawesome/fontawesome-free

Add to the project

Way 1:

In style.css write

      @import "@fortawesome/fontawesome-free/css/all.min.css";
      @import "bootstrap/dist/css/bootstrap.min.css";

Way 2:

Update angular.json file.

            
          "styles": [
            "src/styles.css",
            "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
            "./node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
        
          --- optional: ---
          "scripts": [
            "./node_modules/jquery/dist/jquery.js",
            "./node_modules/popper.js/dist/umd/popper.js",
            "./node_modules/bootstrap/dist/js/bootstrap.js"
          ]

Create new component

  ng generate component components/layout/header
  ng generate component components/common/button

  In older version:
    ng g c components/list --skipTests true
    ng g c components/list-item --skipTests true

Global style in src/styles.css
Put all global styles in this file.

List Of Items

Example #1

components/tasks/tasks/tasks.component.html

   <div *ngIf="tasks">
     <app-task-item *ngFor="let task of tasks" [task]="task"> </app-task-item>
   </div>

components/tasks/task-item/task-item.component.ts
```
   @Input() task!: Task;
```

components/tasks/task-item/task-item.component.html

  <div class="task">
    {{ task.text }}
  </div>

Example #2 - old

components/users/users-list.component.html

      <div *ngIf="users && users?.length > 0">
        <div *ngFor="let user of users">
          <app-user [user]="user"></app-user>
        </div>
      </div>

            <ul>
              <li *ngFor="let user of users">
                {{ user.firstName }}
              </li>
            </ul>

                  <li *ngFor="let page of pages; let i = index;">
                    <a>{{ i + 1 }}</a>
                  </li>

      <img [src]="post.imageUrl" alt="Post image">

components/users/user.component.ts

      import { Component, OnInit, Input } from '@angular/core';
      import { User } from 'src/app/models/User';
      
      @Component({
        selector: 'app-user',
        templateUrl: './user.component.html',
        styleUrls: ['./user.component.css']
      })
      export class UserComponent implements OnInit {
        @Input() user: User;   <---- Important!
      
        constructor() { }
      
        ngOnInit(): void {
        }
      
      }

components/users/user.component.html

      <div>
        {{user.name}}
      </div>

Steps To Create A Service

Create a service

  ng g s services/users --skipTests=true

In app.module.ts

  import { HttpClientModule } from '@angular/common/http';  
  import { UsersService } from './services/users.service';
  ...
  imports: [
    ...
    HttpClientModule
  ],  
  ...
  providers: [UsersService],

services/users.service.ts

  import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  import { User } from '../models/User';
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
  
      -- OR --

      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        }),
        withCredentials: true
      };
      -----

  @Injectable({
    providedIn: 'root'
  })
  export class UsersService {
    rootUrl:string = 'https://jsonplaceholder.typicode.com/users';
  
    constructor(private http:HttpClient) { }
  
    getUsers():Observable<User[]> {
      return this.http.get<User[]>(this.rootUrl);
    }

    //////////////

    addComment(comment: Comment): Observable {
      return this.http.post(this.rootUrl, comment, httpOptions);
    }
  
    updateComment(comment: Comment): Observable {
      const currUrl: string = `${this.rootUrl}/${comment._id}`;
  
      return this.http.put(currUrl, comment, httpOptions);
    }
  
    deleteComment(_id: string):Observable {
      const currUrl: string = `${this.rootUrl}/${_id}`;
      
      return this.http.delete(currUrl);
    } 
  }

Create a new file /service/data.service.ts
Import @Injectable and create class
Add as a provider to @NgModule
Call from component

Steps To Use A Service #1

components/users/users-list.component.ts

import { Component, OnInit } from '@angular/core';

import { UsersService } from "../../../services/users.service";
import { User } from '../../../models/User';

@Component({
  selector: 'app-users-list',
  templateUrl: './users-list.component.html',
  styleUrls: ['./users-list.component.css']
})
export class UsersListComponent implements OnInit {
  users: User[];

  constructor(private usersService: UsersService) { }

  ngOnInit(): void {
    this.usersService.getUsers().subscribe(users => {
      this.users = users;
    });
  }
}

Service with Mock data

Simple Mock data

src/app/Task.ts

      export interface Task {
        id?: number;
        text: string;
        day: string;
        reminder: boolean;
      }

src/app/mock-tasks.ts

    import { Task } from './Task';

    export const TASKS: Task[] = [
        {
          id: 1,
          text: 'Food Shopping',
          day: 'May 5th at 2:30pm',
          reminder: true,
        },
        {
          id: 2,
          text: 'Meeting at School',
          day: 'May 6th at 1:30pm',
          reminder: true,
        }
      ];

src/app/services/tasks.service.ts

      import { Injectable } from '@angular/core';
      import { Task } from 'src/app/Task';
      import {TASKS} from 'src/app/mock-tasks';

      @Injectable({
        providedIn: 'root'
      })
      export class TasksService {

        constructor() { }

        getTasks():Task[] {
          return TASKS;
        }
      }

src/app/components/tasks/tasks.component.ts

      import { TasksService } from 'src/app/services/tasks.service';
      import { Task } from 'src/app/Task';

      @Component({
        selector: 'app-tasks',
        templateUrl: './tasks.component.html',
        styleUrls: ['./tasks.component.css'],
      })
      export class TasksComponent implements OnInit {
        tasks: Task[] = [];

        constructor(private taskService: TasksService) {}

        ngOnInit(): void {
          this.tasks = this.taskService.getTasks();    
        }

Mock data with Observable

src/app/services/tasks.service.ts

  import { Injectable } from '@angular/core';
  import {Observable, of} from 'rxjs';
  import { Task } from 'src/app/Task';
  import {TASKS} from 'src/app/mock-tasks';

  @Injectable({
    providedIn: 'root',
  })
  export class TasksService {
    constructor() {}

    getTasks(): Observable<Task[]> {
      const tasks = of(TASKS);  // of() turns it into observable
      return tasks;
    }
  }

src/app/components/tasks/tasks.component.ts

  import { Component, OnInit } from '@angular/core';
  import { TasksService } from 'src/app/services/tasks.service';
  import { Task } from 'src/app/Task';

  @Component({
    selector: 'app-tasks',
    templateUrl: './tasks.component.html',
    styleUrls: ['./tasks.component.css'],
  })
  export class TasksComponent implements OnInit {
    tasks: Task[] = [];

    constructor(private taskService: TasksService) {}

    ngOnInit(): void {
      this.taskService.getTasks().subscribe(tasks => this.tasks = tasks)
    }
  }

Communication Between Components

Example #1

components/layout/header/header.component.html

  <header>
    <app-button
      color="green" text="Add" (btnClick)="toggleAddTask()"
    ></app-button>
  </header>

components/layout/header/header.component.ts

  toggleAddTask() {
    console.log('Button toggle clicked');
  }

components/common/button/button.component.html

  <button [ngStyle]="{ 'background-color': color }" class="btn" (click)="onClick()">
    {{ text }}
  </button>

components/common/button/button.component.ts

  @Input() text: string = 'Default text';
  @Input() color: string = 'red';
  @Output() btnClick = new EventEmitter();

  onClick(): void {
      this.btnClick.emit();
  }

Example #2

services/comments.service.ts

    import { Injectable, EventEmitter } from '@angular/core';
    commentSelected: EventEmitter<Comment> = new EventEmitter();

comment-form.component.ts

    ngOnInit(): void {
      this.commentsService.commentSelected?.subscribe(comment => {
        this.isEdit = true;
        this.current = comment;
      });
    }

comment.component.ts

    constructor(private commentsService: CommentsService) { }
    ...
    editWasPressed(comment: Comment) {
      this.commentsService.commentSelected.emit(comment);
    }

Forms

FORM #1

users.component.html

    <form (submit)="onSubmit($event)">
    </form>

users.component.ts

    onSubmit(e) {
      e.preventDefault();
    }

FORM #2 - ngModel - Two Way Data Binding

add-todo.component

  <form (ngSubmit)="onSubmit()">
    <input type="text" name="title" [(ngModel)]="title">
    ...
  </form>

app.module.ts


  import { FormsModule } from '@angular/forms';
  ...
  imports: [
  ...
  FormsModule
  ],

FORM #3

components/post-form/post-form.component.html

      <h2>Add Post</h2>
      <div class="card card-body mb-3">
        <form>
          <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" name="title" #title>
          </div>
          <div class="form-group">
            <label>Body</label>
            <input type="text" class="form-control" name="body" #body>
          </div>
          <button (click)="addPost(title.value, body.value)" type="submit" class="btn btn-dark btn-block">Add Post</button>
        </form>
      </div>

components/post-form/post-form.component.ts

      import { Component, OnInit, Output, EventEmitter } from '@angular/core';

      import { PostService } from '../../services/post.service';
      import { Post } from '../../models/Post';
      
      @Component({
        selector: 'app-post-form',
        templateUrl: './post-form.component.html',
        styleUrls: ['./post-form.component.css']
      })
      export class PostFormComponent implements OnInit {
        @Output() newPost: EventEmitter<Post> = new EventEmitter();
      
        constructor(private postService: PostService) { }
      
        ngOnInit(): void {
        }
      
        addPost(title, body) {
          if (!title || !body) {
            alert('Please add post');
          } else {
              this.postService.savePost({title, body} as Post).subscribe(post => {
                this.newPost.emit(post);
              });        
          }
        }
      }

components/posts.component.html

<app-post-form (newPost)="onNewPost($event)"></app-post-form>
<h2>Posts</h2>
...

components/posts.component.ts

...
onNewPost(post: Post) {
  this.posts.unshift(post);
}

FORM #4 - with ngSubmit

    <form (ngSubmit)="onSubmit()"></form>

    onSubmit() {
      this.addUser();
        // e.preventDefault() is not required
    }

FORM #5 - with Template Driven Form

  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
    <div class="form-group">
      <label>First Name</label>
      <input 
        type="text" 
        [(ngModel)]="user.firstName"
        [ngClass]="{'is-invalid': userFirstName.errors && userFirstName.touched}"
        class="form-control" 
        name="firstName"
        #userFirstName="ngModel"
        required
        minlength="2"
      >
      <div [hidden]="!userFirstName.errors?.required" class="invalid-feedback">
        First name required
      </div>
      <div [hidden]="!userFirstName.errors?.minlength" class="invalid-feedback">
        Must be at least 2 characters
      </div>
    </div>
      ...
    <button [disabled]="!userForm.form.valid" class="btn btn-block bg-light mb-3">Add New User</button>
  </form>

...
onSubmit({value, valid}: {value: User, valid: boolean}) {
}

See Angular Basics 3 project (# 154)

Form buttons

<form>
  <div class="form-group">
    <input 
      type="text" 
      name="text" 
      [(ngModel)]="text"
    >
  </div>
  
  <input [disabled]="!text" type="submit" value="Add Log">
  <button [hidden]="!text" type="button">Clear</button>
</form>

See project #186 DevLogger

Reactive Forms

app.module.ts (or other module like auth.module.ts)

  import { ReactiveFormsModule } from '@angular/forms';
  ...
  imports: [

    ReactiveFormsModule
  ],

from.component.ts

  import { FormGroup, FormControl, Validators } from '@angular/forms';
  ...
  cardForm = new FormGroup({
    name: new FormControl('', [
      Validators.required,
      Validators.minLength(2),
    ])
  });

my-from.component.html

  <form [formGroup]="cardForm" (ngSubmit)="onSubmit()">
    <input formControlName="name" />
    <ng-container *ngIf="cardForm.controls.name.touched && cardForm.controls.name.errors">
      <div *ngIf="cardForm.controls.name.errors.required">    
        Value is required.
      </div>
      <div *ngIf="cardForm.controls.name.errors.minlength">    
        Value should contain at least {{ cardForm.controls.name.errors.minlength.requiredLength }} characters.
      </div>
    </ng-container>
    <button [disabled]="cardForm.invalid" type="submit">Submit</button>  
  </form>

----

For Debugging:

    <div>Form Contents
      {{ cardForm.value | json }}
    </div>
    <div>Form is valid: 
      {{ cardForm.valid }}     <---- default is true
    </div>
    <div>Errors around name: {{ cardForm.controls.name.errors | json }} </div>
    <div>Errors around name: {{ cardForm.get('name').errors | json }} </div>

Reactive Form - reusable component

my-from.component.ts

  import { FormGroup, FormControl, Validators } from '@angular/forms';
  ...
  cardForm = new FormGroup({
    name: new FormControl('', [
      Validators.required,
      Validators.minLength(2),
      Validators.maxLength(40),
      // Validators.pattern(/\s/),
    ])
  });

my-form.component.html

  <form [formGroup]="cardForm" (ngSubmit)="onSubmit()">
    <app-input label="Name" [control]="cardForm.get('name')"></app-input>
    <button [disabled]="cardForm.invalid" type="submit">Submit</button>  
  </form>

components/formControls/input/input.component.ts

  import { FormControl } from '@angular/forms';

  @Input() control: FormControl;
  @Input() label: string;

components/formControls/input/input.component.html

  <label>{{ label }}</label>
  <input [formControl]="control"/>
  <ng-container 
    *ngIf="
      control.touched && 
      control.errors"
    >
    <div *ngIf="control.errors.required">    
      Value is required.
    </div>
    <div *ngIf="control.errors.minlength">    
      Value should contain at least {{ control.errors.minlength.requiredLength }} characters.
    </div>
    <div *ngIf="control.errors.maxlength">    
      Value should contain maximum {{ control.errors.maxlength.requiredLength }} characters.
    </div>
    <div *ngIf="control.errors.pattern">    
      Invalid format
    </div>
  </ng-container>

Example: Credit Card with Reactive Forms

Events

  <input (input)="onChangeLength($event.target.value)" />

todo-item.component.html

  <input (change)="onToggle(todo)" type="checkbox">
    {{ todo.title }}    
  <button (click)="onDelete(todo)" class="del">x</button>

todo-item.component.ts

  onToggle(todo: Todo) {
    todo.completed = !todo.completed
  }

users.component.html

  <input (keydown)="fireEvent($event)" type="text" name="firstName">
            keyup
            keypress
            focus
            blur
            cut
            paste
            copy

users.component.ts

  fireEvent(e) {
    console.log(e.type);
    console.log(e.target.value);
  }

Template Syntax

*ngFor

  <div *ngFor="let user of users">
    {{user.name}}
  </div>

*ngIf

   <ul *ngIf="loaded && users?.length > 0">
     <li> </li>
   </ul>

*ngIf

  <ul *ngIf="loaded && users?.length > 0;else noUsers">
  </ul>
  <ng-template #noUsers><h4>No Users Found</h4></ng-template>

ng-container

Use when *ngFor and *ngIf are needed.

  <ng-container *ngFor="let page of pages; let i = index;">
    <li class="page-item"    
        *ngIf="i < 5"
    >
    ...
    </li>
  </ng-container>

ngSwitch

  <div [ngSwitch]="currentPage" class="mt-3">
    <div *ngSwitchCase="0">
      <p>First Page</p>
    </div>
    <div *ngSwitchDefault>
    ...
    </div>
  </div>

ngNonBindable

  <li ngNonBindable><pre>{{ 5 | number:"2.4" }}</pre></li>    gives same text: {{ 5 | number:"2.4" }}

Property Binding
- <button [disabled]="!enableAdd">Add New User</button>
- <img [src]="user.image" alt="">
- <img src="{{user.image}}" alt="">
- <img bind-src="user.image" alt="">
- <h3><span [textContent]="user.firstName"></span></h3>

Class Biding
- [class.bg-light]="user.isActive">
  Set bg-light class if user.isActive is true

ngClass

Example #1

todo-item.component.html

  <div [ngClass]="setClasses()"></div>

todo-item.component.ts

  // Set Dinamic classes
  setClasses(): object {
    let classes = {
      todo: true,
      'is-complete': this.todo.completed
    }

    return classes;
  }

-- OR --

    setClasses() {
      let classes = [];

      if (something()) {
        classes.push('active');
      }

      if (somethingElse()) {
        classes.push('something');
      }

      return classes;
    }

Example #2

users.component.html
  <button class="btn" [ngClass]="currentClasses"></button>

users.component.ts
  currentClasses = {}
  ...
  setCurrentClasses();
  ...
  setCurrentClasses() {
    this.currentClasses = {
      'btn-success': this.enableAdd,
      'text-center': true   
    }
  }

Example #3

  <button <span><i [ngClass]="user.hide ? 'fa fa-plus' : 'fa fa-minus'" ></i></span></button>

Example #4

  <li 
    [ngClass]="{ active: currentPage === i }"       <---- object
    *ngFor="let page of pages; let i = index;"
  >  
  </li>

Example #5

  <li 
    *ngFor="let log of logs"
    [class.list-group-item-secondary]="selectedLog === log"
  >
  ...
  </li>

See DevLogger - project #186

Style

  <div [style.height.rem]="2"><p>AAA</p></div>

Style Binding

  <div [style.border-color]="user.isActive ? 'green' : ''"></div>

ngStyle

  <p [ngStyle]="{'color': 'red'}">BBBB</p>

  <button [ngStyle]="{ 'background-color': color }" class="btn" (click)="onClick()">
    {{ text }}
  </button>

ngStyle

users.component.html

    <h3 [ngStyle]="currentStyles">{{ user.name }}</h3>

users.component.ts

    currentStyles = {} 
    ...
    setCurrentStyles();
    ...
    setCurrentStyles() {
      this.currentStyles = {
        'padding-top': this.showExtended ? '0' : '40px',
        'font-size': this.showExtended ? '' : '40px'
      }
    }

Mouse Events

<button (click)="fireEvent($event)">A button</button>

...

fireEvent(e) {
  console.log(e.type)
}

click
mouseover
mouseout
mousedown
mouseup
dblclick
drag
dragover

Pipes

String

  {{ name | uppercase }}
  {{ name | lowercase }}

Currency

          
  {{ balance | currency }}
  {{ balance | currency:"ILS" }}
  {{ balance | currency:"GBP" }}
  {{ balance | currency:"GBP":"code" }}
  {{ balance | currency:"GBP":"symbol" }}  same as   {{ balance | currency:"GBP" }}

Date

  {{ registered | date }}
  {{ registered | date:"dd/MM/yyyy HH:mm:ss" }}
  {{ registered | date:"mm/dd/yyyy" }}
  {{ registered | date:"yyyy" }}
  {{ registered | date:"shortDate" }}
  {{ registered | date:"longDate" }}
  {{ registered | date:"fullDate" }}      includes day of the week
  {{ registered | date:"shortTime" }}
  {{ registered | date:"longTime" }}

Number

  {{ 5 | number:"1.2"}}   gives 5.00
  {{ 5 | number:"2.4"}}   gives 05.0000

Percent

  {{ 1 | percent}}     gives 100%
  {{ 0.5 | percent}}   gives 50%

Function with agrument of different types

  removePost(post: Post | number): Observable<Post> {
    const id = typeof post === 'number' ? post : post.id;
    ...
  }

Router

Generate Module
```
  ng g m app-routing
```

Update app.module.ts

  import { AppRoutingModule } from './app-routing/app-routing.module';

  imports: [
    ...
    AppRoutingModule
  ],

Update app.component.html

  <div class="container">
    <router-outlet></router-outlet>
  </div>

Update app-routing.module.ts

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { HomeComponent } from '../components/home/home.component';
  import { UsersComponent } from '../components/users/users.component';
  
  const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'users', component: UsersComponent},
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }

  Use when Page Not Found does not work in Angular:
  imports: [RouterModule.forRoot(routes, {useHash: true})]

Create components/home.component.html

  <button class="btn btn-secondary" routerLink="/users">Users Section</button>

Redirect

  import { Router } from '@angular/router';

  constructor(
    private router: Router
  ) { }

  myFunc() {
    this.router.navigate(['/somewhere']);  
  }

Navbar

  <nav class="navbar navbar-expand navbar-dark bg-success mb-4">
    <div class="container">
      <a routerLink="/" class="navbar-brand">Tasks App</a>
      <div>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
            <a routerLink="/" class="nav-link">Home</a>
          </li>
          <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
            <a routerLink="/add-task" class="nav-link">Add Task</a>
          </li>
        </ul>
      </div>
    </div>  
  </nav>

Creating new module

"Routed and Routing Module" - displayed directly inside of the AppComponent

Generate

  ng g m elements --routing     <----- Make this module ready for navigation

In elements-routing.module.ts file

  const routes: Routes = [
    { path: 'elements', component: ElementsHomeComponent}
  ];

In app.module.ts file

  imports: [
    ...
    ElementsModule
  ]

In app.component.html file
```
  <router-outlet></router-outlet>
```

"Domain Module" - displayed directly inside of the AppComponent

Generate

  ng g m elements --routing     <----- Make this module ready for navigation

In elements.module.ts file

  imports: [...],
  exports: [ElementsHomeComponent]

In app.module.ts file

  imports: [
    ...
    ElementsModule
  ]

In app.component.html file

  <app-elements-home></app-elements-home>
  <router-outlet></router-outlet>

Widgets - Shared Module

Generate Module and Component

  ng g m modules/Shared
  ng g c modules/shared/components/FormControls/Input --skipTests true

In shared.module.ts

  import { ReactiveFormsModule } from '@angular/forms';
  import { InputComponent } from './components/FormControls/input/input.component';
  @NgModule({
    imports: [
      ...
      ReactiveFormsModule
    ],
    exports: [InputComponent]
  })

Import in auth.module.ts

  import { SharedModule } from '../shared/shared.module';
  ...
  imports: [
    SharedModule
  ],

In register.component.html
```
  <app-input></app-input>
```

Auth Module Example

Create modules

  ng g m modules/Auth --routing 
  ng g m modules/Shared
  ng g c modules/auth/components/Login --skipTests true
  ng g c modules/auth/components/Register --skipTests true
  ng g c modules/shared/components/FormControls/Input --skipTests true

In auth-routing.module.ts file

  const routes: Routes = [
    { path: 'register', component: RegisterComponent },
    { path: '', component: LoginComponent }
  ];

In app.module.ts file
```
  imports: [
    AuthModule
  ],
```

In app.component.html file

  <a routerLink="" routerLinkActive="active">
    Login
  </a>
  <a routerLink="/register" routerLinkActive="active">
    Register
  </a>
  
  <router-outlet></router-outlet>

See project #194

Adding new module with lazy loading

Example #1

Generate a new module and and a new component

  ng g m modules/Account --routing   <----- Make this module ready for navigation

  ng g c modules/Account/components/AccountHome --skipTests true

In account-routing.module.ts file

  import { AccountHomeComponent } from './components/account-home/account-home.component';

  const routes: Routes = [
    { path: '', component: AccountHomeComponent }
  ];

In app-routing.module.ts

  const routes: Routes = [
    // --> Lazy Loading
    { path: 'account', 
      loadChildren: () => 
        import('./modules/account/account.module').then(m => m.AccountModule) 
    }
    // <-- Lazy Loading
  ];

In navbar
```
  <a routerLink="/account">Account</a>
```
See project #194

Exapmle #2

Generate a new module

  ng g m views --routing     <----- Make this module ready for navigation

Add a link to the navbar in the app.component.html

  <a routerLink="/views" routerLinkActive="active">
    Views
  </a>

Add lazy load of the views module in app-routing.module.ts

  const routes: Routes = [
  // --> Lazy Loading
  ...
  {
    path: 'views',
    loadChildren: () => 
      import('./views/views.module').then(m => m.ViewsModule)
  },
  // <-- Lazy Loading
  { path: '', component: HomeComponent },
  { path: '**', component: NotFoundComponent }
];

Generate a ViewsHome component in the the views module

  ng g c views/components/viewsHome --skipTests true

Add a rule in views-routing.module.ts to show ViewsHome component

  const routes: Routes = [  
    { path: '', component: ViewsHomeComponent }
  ];

Generate statistics component in the the views module

  ng g c views/components/statistics --skipTests true

Show statistics component in ViewsHome component: in views-home-component.html
```
  <app-statistics></app-statistics>
```
Add usage of Shared module
- In views.module.ts
```
  imports: [
    SharedModule
  ]
```
- Use it in views-home-component.html

Using json info

Add in tsconfig.app.json file:

  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    "esModuleInterop": true    
  },

See project #149

Nice CSS

In .css file

  :host:not(:first-of-type) {   <-- host component, but not the first one 
    display: block;
    margin-top: 20px;
  }

In .html file

  <app-devider>First Component</app-devider>
  <app-devider>Second Component</app-devider>

RxJS

            this.myService.getValues()   <--- observable == sourse of event. Observable emits an event
            .pipe(                       <--- contains a chain of specific operators
              map(event => console.log(event))   <-- gets an event that is comming out of the observable
            )
            .subscribe()
          
            ---------------
          
            this.myService.getValues()   
            .pipe(                       
              map(event => event.someValue),  <-- result of event.someValue is returned automatically
              map(value => parseInt(value)),  <--   the "value" was return during the previous step
              map(value => {
                if (isNaN(value)) {
                  throw new Error('Enter a number')
                } 
                return value;
              })
            )
            .subscribe()
          
            ---------------  
          
            this.myService.getValues()   
            .pipe(                       
              map(event => event.someValue),  <-- result of event.someValue is returned automatically
              map(value => parseInt(value)),  <--   the "value" was return during the previous step
              map(value => {
                if (isNaN(value)) {
                  throw new Error('Enter a number')
                } 
                return value;
              })
            )
            .subscribe({     <--- observer is inside the subscribe method
              next(value) {
                console.log(`Your value is ${value}`);
              },
              error(err) {       // catches errors
                console.error(err.message);
              },
              complete() {
          
              }
            })

pluck operator

  { color: 'red', year: 2000 }
  -->
  pluck('year')
  -->
  2000

  this.myService.getValues()   
  .pipe(
    pluck('target', 'value'),    <-- if input is { target: { value: 'fvhg'}}                       
    map(value => parseInt(value)),  <--   the "value" was return during 
    .....
  )

observable.subsribe - way 1

  const observable = new Observable((subscriber) => {
    // Throw the value 1 into our pipeline
    subscriber.next(1);

    // Marks the observable as complete, no more values will come out
    subscriber.complete();

    //Emit an error, no more values will come out. Since complete() was called above, error will not be emitted
    subscriber.error(new Error('hgfhkfvk')); // not throw new Error
  }).pipe(
     // the value 1 will come here
  );


  observable.subscribe({    <--- observer
    next(value) {
      console.log('Got a value: ', value);
    },

    complete() {  // called at complete above, no argument here
      console.log('Observable is complete. Don't expect any values);
    },

    error(err) {   // called when error emits
      console.log(err.message);
    }
  });

observable.subsribe - way 2

  observable.subsribe(
    (value) => console.log('Next value:', value),  // next
    (err) => console.error(err.message),  // error
    () => console.log('COMPLETE')         // completion
  );

observable.subsribe - way 3

  observable.subsribe(
    (value) => console.log('Next value:', value),  // next
  );

  const observable = new Observable((subscriber) => {
    // Throw the value 1 into our pipeline
    subscriber.next(1);
    subscriber.next(2);
    subscriber.next(3);

    // Marks the observable as complete, no more values will come out
    subscriber.complete();

    //Emit an error, no more values will come out. Since complete() was called above, error will not be emitted
    subscriber.error(new Error('hgfhkfvk')); // not throw new Error
  }).pipe(
     // the value 1 will come here

      tap(value => console.log('From tap:', value))  // tap - Perform a side effect for every emission on the source Observable, but return an Observable that is identical to the source.    
  );

  observable.subsribe(
    (value) => console.log('Next value:', value),  // next
    (err) => console.error(err.message),  // error
    () => console.log('COMPLETE')         // completion
  );

  observable.subsribe((value) => {
    console.log('From second subscribe', value);
  });

Tools
- Augury - Chrome Extension

Build
```
  ng build --prod --base-href .
```