Angular Getting Started

specific for react / vue developers

angular v11 / 2021-03

Will not teach you

typescript
rxjs
react
vue
what is dependency injection
how decorator work
...

Just like a summary

please still see the official documentation for more details

Angular in my opinion

reactive programing(rxjs) + component + dependency injection

// html
<input id="text" value="hello world" />
<span id="foo"></span>
<span id="bar"></span>

// ts
import { fromEvent } from 'rxjs';
import { map, distinctUntilChanged, startWith } from 'rxjs/operators';

const input = document.getElementById('text');
const foo = document.getElementById('foo');
const bar = document.getElementById('foo');

fromEvent(input, 'input')
  .pipe(
    map(event => event.target.value),
    distinctUntilChanged(),
    startWith(input.value)
  )
  .subscribe(text => {
     foo.innerText = text;
     bar.innerText = text;
  });

Props in my opinion

easily manage complicated data flow

easily build form and separate logics and layouts

power of rxjs

Cons in my opinion

learning curve extremely high

extremely depends on rxjs and there are some pitfalls if u are not familiar w/ rxjs

difficultly to manipulate complicated UI

So

Be careful to choose the appropriate scene to use angular

Basic UI

Template / Directive / Component

Text Interpolation

https://angular.io/guide/interpolation

To react developers: similar to jsx but it is html

To react developer:
1. {{ not {
2. do not write logic on template

Directive / Component

Selector

same as document.querySelector()

@Directive({
  selector: 'button[foo],a[foo]'
})
export class FooDirective {}

// template

// w/ foo directive instance
<button foo>

// no foo directive instance
<div foo>

@Directive({
  selector: 'foo'
})
export class FooComponent {}

// template

<foo>bar</foo>

Template & Styles

Styles

Support non-css files: .sass/.scss/.less/.styl

ChangeDetectionStrategy

https://angular.io/api/core/ChangeDetectionStrategy

To react developers:
OnPush -> PureComponent
Default -> Component

ViewEncapsulation

Emulated similar to
1. css modules
2. scoped in vue

https://angular.io/guide/view-encapsulation

Property Binding

How to pass data from parent to child

To vue developers: v-bind

To react/vue developers: props

If the type is string

<foo name="bar"></foo>

===

<foo [name]="'bar'"></foo>

Rename

<child [master]=""></child>

Getter / Setter

Event Binding

How to emit data from child to parent

To react developers: callback props

To vue developers: v-on/emit

Output

Two Way Binding

<ng-content>

Content Projection

To react developers: just children

In Angular

const Foo = ({ children, footer }) => (
  <div>
    {children}
    <div>
      {footer}
    </div>
  </div>
);

//
<Foo
 footer={
   <div>bar</div>
 }
>
 foo!!!
</Foo>

In React

<ng-content></ng-content>
<div>
  <ng-content select="[slot='footer']"></ng-content>
</div>

//
<foo>
  foo!!!
  <div slot="footer"></div>
</foo>

same as document.querySelector

View vs Content

// foo
@Component({
  selector: 'foo',
  template: `
    <div>foo title</div>
    <ng-content></ng-content>
    <div>foo footer</div>
  `
})
export class FooComponent {}

// bar template
<foo>
  <div>bar</div>
</foo>

View of Foo

Content of Foo

Host Element

angular always wrap your template into a html element called host

To react developer: yes, no fragment :)

// foo
@Component({
  selector: 'foo',
  template: `
    <div>foo</div>
    <ng-content></ng-content>
  `
})
export class FooComponent {}

// bar template
<foo> ---> will create a real html element
  <div>bar</div>
</foo>

// bar html result
<foo>
  <div>foo</div>
  <div>bar</div>
</foo>

Get HTMLElement of Host

Dynamic Component

see doc yourself

https://angular.io/guide/dynamic-component-loader

const componentMap = {
  foo: Foo,
  bar: Bar,
  baz: Baz
};

const Parent = ({ type, ...rest }) => {
  const Component = componentMap[type];

  return (
    <Component {...rest} />
  );
};

In React

Attribute/Class/Style

https://angular.io/guide/attribute-binding

Attribute

Class

[ngClass]

Style

[ngStyle]

Style Precedence

@HostBinding

bind attribute/class/style to host

@HostListener

bind listener to host

Lifecycle

https://angular.io/guide/lifecycle-hooks

ngOnInit

Initialize the directive or component after

1. first displays the data-bound properties
2. sets the directive or component's input properties

Called once after first ngOnChanges

ngOnDestroy

Clean up just before Angular destroys the directive or component

ngOnChanges

Respond when Angular sets or resets data-bound input properties.

The method receives a SimpleChanges object of current and previous property values.

Called before ngOnInit and whenever one or more data-bound input properties change.

ngDoCheck

custom change detection hook

Do not use this if possible

ngAfterContent(Init|Checked)

Init:
Respond after Angular projects external content into the component's view, or into the view that a directive is in.

Checked:
Respond after Angular checks the content projected into the directive or component.

ngAfterView(Init|Checked)

Init:
Respond after Angular initializes the component's views and child views, or the view that contains the directive.

Checked:
Respond after Angular checks the component's views and child views, or the view that contains the directive.

constructor

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewChecked

AfterViewInit

OnDestroy

mount

changes detection

No default value properties will be undefined before first ngOnChanges called

Directive

Component is a directive w/ template and styles

Attribute Directive

Built-ins: ngClass/ngStyle/...

Component Directive

@Directive({
  selector: 'button[myButton]'
})
export class MyButtonDirective {
  @HostBinding('class.my-button')
  readonly bindHostClass = true;
}

//

<button myButton>click me</button>

Structural Directive

*ngIf

return (
  <div>
    {items && items.map(...)}
    {items ? items.map(...) : null}
  </div>
)

In React

<ng-container>

*ngSwitch

*ngFor

items.map(item => (
  <div>
    {item.name}
  </div>
))

In React

items.map(item => (
  <ItemDetail item={item} />
))

In React

items.map((item, i) => (
  <div>
    {i + 1} - {item.name}
  </div>
))

In React

items.map(item => (
  <div key={item.id}>
    {item.id} - {item.name}
  </div>
))

In React

Structure Shorthand

*xxx

Template Variables

To react developers: similar to ref

exportAs

Get instance of specific directive

@Directive({
  selector: 'myButton',
})
class MyButtonDirective {
}

@Component({
  selector: 'app-root',
  template: `
    // #button will get html element of button
    <button myButton #button>click me</button>
  `
})
class AppComponent {
}

@Directive({
  selector: 'myButton',
  exportAs: 'myButton',
})
class MyButtonDirective {
}

@Component({
  selector: 'app-root',
  template: `
    // #button will get the instance of MyButtonDirective
    <button myButton #button="myButton">click me</button>
  `
})
class AppComponent {
}

Scope

NgTemplate

<ng-template>

Template block for *ngIf

TemplateOutlet

https://angular.io/api/common/NgTemplateOutlet

In Angular

const Foo = () => {
  const bar = (
    <div>bar</div>
  );
  
  return (
    <div>
      foo
      {bar}
    </div>
  );
};

In React

<ng-template #bar>
  <div>bar</div>
</ng-template>

foo
<ng-template [ngTemplateOutlet]="bar"></ng-template>

In Angular

const Foo = () => {
  const renderBar = (bar, { baz: qux }) => (
    <div>
      {bar}
      <div>
        {qux}
      </div>
    </div>
  );
  
  return (
    <div>
      foo
      {renderBar('hello', {
        baz: 'world'
      })}
    </div>
  );
};

In React

<ng-template #bar let-bar let-qux="baz">
  <div>
    {{ bar }}
    <div>
      {{ qux }}
    </div>
  </div>
</ng-template>

foo
<ng-template
 [ngTemplateOutlet]="bar"
 [ngTemplateOutletContext]="{
   $implicit: 'hellow',
   baz: 'world'
 }"
></ng-template>

TemplateRef From Input

@Component({ ... })
export class MyButton {
  @Input()
  loadingIcon?: TemplateRef<any>;
  
  @Input()
  loading: boolean = false;
}

// template

<ng-template #defaultLoadingIcon>
  ...
</ng-template>

<ng-template [ngTemplateOutlet]="loadingIcon || defaultLoadingIcon"></ng-template>
<ng-content></ng-content>

Interaction

w/ content and view

Interact child via variable

@(Content|View)Child/@(Content|View)Children

Query the content/view

https://angular.io/api/core/ViewChild

Get HTMLElement of component in view/content

To react developers: no need to add forwardRef everywhere

@ViewChild(FooComponent, { read: ElementRef })
fooElement: ElementRef;

Get directive in view/content

@Directive({
  selector: '[foo]'
})
export class FooDirective {}

// bar template
<div foo #foo></div>

// bar
@Component({ ... })
export class BarComponent {
  @ViewChild('foo')
  fooElement: ElementRef;
  
  @ViewChild('foo', { read: FooDirective })
  foo: FooDirective;
}

const MyList = ({ children, items }) => (
  <ul>
    {items.map(item => (
      <div key={item.id}>
        {children(item)}
      </div>
    ))}
  </ul>
);

In React

Template From Content

To react developers: render props

In Angular

export interface MyListItem {
  // ...
}

@Directive({
  selector: '[myList]',
})
export class MyListDirective {
  @Input()
  items: MyListItem[];

  @Content(TemplateRef)
  itemTemplate: TemplateRef<{ $implicit: MyListItem }>;
  
  trackByItem(_, item: MyListItem) {
    return item.id;
  }
}

// MyList template

<ng-container *ngFor="let item of items; trackBy: trackByItem">
  <div>
    <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
  </div>
<ng-container>

// Other template
<ul myList [items]="...">
  <ng-template let-item>
    ...
  </ng-template>
</ul>

Pipe

https://angular.io/guide/pipes

Transform data

Unwrapping Observable

Coercion

type will lie you

https://angular.io/guide/template-typecheck

In Angular

<Icon loading />

--->

<Icon loading={true} />

In React

<my-icon loading></my-icon>

--->

<my-icon [loading]="''"></my-icon>

since html

class Icon {
  // for template type checking
  static ngAcceptInputType_loading: boolean | '';

  private _loading: boolean;

  get loading(): boolean {
    return this._loading;
  }

  // for correct type
  set loading(value: boolean) {
    this._loading = (value === '') || value;
  }
}

class Icon {
  // really boolean ?
  loading: boolean = false;
}

CDK

official component development kit

React developers:

Or just always write

<my-icon [loading]="true"></my-icon>

upon to you

Dependency Injection

Injection Token/Provider

To react developer: just like context

import { createContext } from 'react';

export const TitleContext = createContext<string>('title');

<TitleContext.Provider value="Hero of the Month">
  {children}
</TItleContext.Provider>

const title = useContext(TitleContext);

description not default value

https://angular.io/guide/dependency-injection-providers

https://angular.io/guide/dependency-injection-in-action

anything

The class placed on useClass should be injectable

no need to use @Inject

Token === Class

Alias

Service

https://angular.io/guide/architecture-services

To react developers: for modularity and usability, just like hooks

Service Lifecycle

only support constructor/ngOnDestroy

Injector

To react developer: a thing to provide multiple contexts

resolves and creates dependencies
maintains a container of dependency instances

NgModule

Injectable Scope

root

no other configuration, just inject

Injectable Scope

to specific module

Injectable Scope

to directive/component

ModuleInjector

Special ModuleInjectors

ElementInjector

providers on directive/component

Hierarchy

@Injectable({
  providedIn: 'root'
})
class Foo {}

ReactDOM.render(
  <PlatformModule>
    <RootInjector>
      <App />
    </RootInjector>
  </PlatformModule>
);

// foo module
@NgModule({
  // ...
  providers: [
    // ...
  ],
  declarations: [
    FooComponent
  ],
  // ...
})
class FooModule {}

// routes
{
  loadChildren: () => import('./foo.module').then(m => m.FooModule)
}

const withModule = (providers) => (Component) => (props) => {
  // ...
  return (
    <ModuleInjector>
      <Component {...props} />
    </ModuleInjector>
  );
}

// foo module
export default withModule([])(Foo);

// routes
const Foo = lazy(() => import('./FooModule'));

@Component({
  // ...
  providers: [
    // ...
  ]
  // ...
})
class FooComponent {}

const withProviders = (providers) => (Component) => (props) => {
  // ...
  return (
    <ElementInjector>
      <Component {...props} />
    </ElementInjector>
  );
}

// foo
export default withProviders([])(Foo);

To react developers: like hierarchy of context

Resolution Rules

how to inject things for directive/component
where to inject things from

Examples from Official

assume

Provider

View Provider

only for view of component

child

inspector

root

from content

in view

Modifiers

modify resolution rules

@Optional

In Angular

export const FooContext = createContext('foo');

// some component
// assume there is no any ancestor provide the context
const foo = useContext(FooContext);

In React

export const FooToken = new InjectionToken<string>('foo');

// some component
// assume no one provide the token

// ...
constructor(
  @Inject(FooToken)
  foo: string
) {}
// ...

Throw error

default value

// ...
constructor(
  @Inject(FooToken)
  @Optional()
  foo?: string
) {}
// ...

@Self

@SkipSelf

@Host

resolve until host of this directive/component

@Component({
  providers: [
    FooService
  ],
  template: `
    <bar></bar>
  `
})
class Foo {

}


@Component({
})
class Bar {
  constructor(
    @Host()
    fooService: FooService
  ){}
}

@Component({
  providers: [
    FooService
  ],
})
class Foo {
}


@Directive({
})
class Bar {
  constructor(
    @Host()
    fooService: FooService
  ){}
}


// some template
<foo bar></foo>

forwardRef

Allow to refer to references which are not yet defined

https://angular.io/api/core/forwardRef

@Injectable()
export class FooService {
  constructor(
    @Inject(forwardRef(() => BarService)) barService: BarService
  ){}
}

@Injectable()
export class BarService {
  constructor(
    @Inject(forwardRef(() => FooService)) fooService: FooService
  ){}
}

To react developer: not the forwardRef u often use

Scenarios

parent provide data to children

export interface FooGroupContextValue {
  // ...
}

export const FooGroupContextToken = new InjectionToken<FooGroupContextValue>('foo context');


// foo group component
@Component({
  // ...
  providers: [
    {
      provide: FooGroupContextToken,
      useExisting: forwardRef(() => FooGroupComponent),
    },
  ],
  // ...
})
export class FooGroupComponent implements FooGroupContextValue {
  // ...
}


// foo component
@Component({
  // ...
})
export class FooComponent {
  // ...
  constructor(
    @SkipSelf()
    @Optional()
    @Inject(FooGroupContextToken)
    fooGroup?: FooGroupContextValue,
  ) {}
}

Scenarios

reusable logics need following lifecycle of component

import { Injectable, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class DestroyService extends Subject<void> implements OnDestroy {
  ngOnDestroy() {
    this.next();
    this.complete();
  }
}

import { takeUntil } from 'rxjs/operators';

@Component({
  // ...
  providers: [
    DestroyService
  ],
  // ...
})
class ArticlesComponent implement OnInit {
  // ...
  
  constructor(
    private articleService: ArticleService,
    private destroy$: DestroyService
  ) {}

  ngOnInit() {
    this.articles = this.articleService.getAll()
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        // ...
      });
  }
  
  // ...
}

Router

To react developers: outlet / layout, not component

ActivatedRoute

To react developers: useLocation / useRouteMatch / useParams

https://angular.io/api/router/ActivatedRoute

Router

To react developers: similar to history

https://angular.io/api/router/Router

Router Events

https://angular.io/guide/router#router-events

Route Configuration

https://angular.io/api/router/Route

To react developers: no '/' prefix for configuration

Parameters

To react developers: same

const routes: Routes = [
  { path: 'article/:articleId', component: ArticleComponent }
];

Wildcard

To react developers: ** not *

Redirect

To react developers: seem to have in react-router v6 but

Nesting

To react developers: do not need to add prefix to path of each children

Lazy Loading

In react router

const Customers = lazy(() => import('./Customers'));

RouteLink

https://angular.io/api/router/RouterLink

https://angular.io/api/router/Router#createUrlTree

<a [routerLink]="['/team', teamId, 'user', userId]">link</a>
// /team/11/user/33

Relative

same as unix

State

Active Class

In react router

class will be added to element if the path active

Route Middleware

Guard

CanActivate

Resolve

pre-fetching data

RouterOutlet

https://angular.io/api/router/RouterOutlet

Auxiliary Routes

https://blog.angular-university.io/angular2-router/

https://angular.io/api/router/Router

/article/10/edit(left:some/left/path//right:/some/right/path)

separate outlets by //

Forms

To react developers: redux form / final form / react hook form ?
no, just one in angular provided by official

NgModel


<label>
  <input type="radio" name="colors" value="yellow" [(ngModel)]="color">
  Yellow
</label>
<label>
  <input type="radio" name="colors" value="green" [(ngModel)]="color">
  Green
</label>
<label>
  <input type="radio" name="colors" value="red" [(ngModel)]="color">
  Red
</label>

Do not need to set attribute checked

Can use on nested

Change Listener

Template Driven Form

see doc yourself, just use [(ngModel)]

Reactive Form

FormControl

control the value and validation status of a form field

https://angular.io/api/forms/FormControl

control.setValue('foo');

setValue vs patchValue

replace all

partial update

FormGroup

control group of FormControls

https://angular.io/api/forms/FormGroup

Nested FormGroup

FormBuilder

each field is a tuple, [value,[validators | options]?]

FormArray

control array of FormControls

https://angular.io/api/forms/FormArray

Validation

for reactive form

Built Ins

Custom Validator

https://angular.io/api/forms/ValidatorFn

https://angular.io/api/forms/ValidationErrors

Cross Field Validator

Async Validator

similar to custom validator but

wrap the return result w/ Promise / Observable

Configure updateOn

usually for optimizing performance for async validators

ControlValueAccesor

An interface as a bridge between
angular forms api and native element in the DOM.

For custom ngModel or FormControl

Please see doc to know how to implement

After implement ControlValueAccessor

<address-form formControlName="address"></address-form>

Custom FormControl

Roadmap

strict typing for forms

Animation

FSM

https://angular.io/guide/animations

Web Animation Api

animation of angular is similar to

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

similar to css transition

Wildcard

glob / regex ?

Void State

Disabled

Callback

https://angular.io/api/animations/AnimationEvent

Keyframes

offset

Parameters

Not documented in
official
But in comments

state('foo', style({
  maxHeight: '{{ maxHeight }}px',
  overflow: 'hidden'
}), { params: { maxHeight: 1 } }),

<div [@bar]="{ 
  value: isBar,
  params: { maxHeight: foo * 10 } 
}">
  bar
</div>

Auto calculation

transition on height between 0 and 'auto' not work

export const collapseMotion: AnimationTriggerMetadata = trigger('collapseMotion', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: 0, overflow: 'hidden' })),
  // ...
]);

Transition

import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        content
      </div>
    )}
  </Transition>
);

<CSSTransition in={inProp} timeout={300} classNames="fade">
  <div>
    content
  </div>
</CSSTransition>


// css
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

react transition group

will add additional <div />

or use cloneElement / render props to control but still need to handle ref of children since Transition also need to pass ref to children

Transition

angular

export const fadeMotion: AnimationTriggerMetadata = trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ]),
]);

<div @fade *ngIf="open">
  content
</div>

Api

Restful

HttpClient

https://angular.io/guide/http

Options

Observe Result

Headers

Params

query string

Handle error

Interceptor

Use Cases

authorization

Use Cases

logging

Tracking Progress

File Upload

this.http.post('/api/upload', file, { observe: 'events', reportProgress: true })
  .pipe(
    map(event => {
      switch (event.type) {
        case HttpEventType.Sent:
          return `Uploading file "${file.name}" of size ${file.size}.`;

        case HttpEventType.UploadProgress:
          const percentDone = Math.round(100 * event.loaded / event.total);
          return `File "${file.name}" is ${percentDone}% uploaded.`;

        case HttpEventType.Response:
          return `File "${file.name}" was completely uploaded!`;

        default:
          return `File "${file.name}" surprising upload event: ${event.type}.`;
      }
    })
  )
  .subscribe(() => {
    // ...
  });

Optimizing

GraphQL

apollo

https://apollo-angular.com/

Query

by client

Query

inject query

Query

variables

QueryRef

Query

refetch

Query

fetchMore

Query

update variables imperative

Query

variables from observable

@Component({ ... })
class PostsComponent {
  variables$ = new BehaviorSubject({ ... });
  posts$: Observable<Post[]>;
  
  ngOnInit() {
    this.posts$ = this.variables$
      .pipe(
        startWith(this.variables$.value),
        switchMap(variables => 
          this.apollo
            .watchQuery({
              query: GET_POSTS,
              variables
            })
            .valueChanges
        ),
        map(({ data }) => data.posts)
      );
  }
}

Mutation

by client

Mutation

inject mutation

Subscription

by client

this.apollo.subscribe({
  query: // ...,
  variables: {
    // ...  
  }
})

Subscription

inject subscription

Subscription

QueryRef.subscribeToMore

Code Generation

dto (data transfer object) - object transferred from network

https://www.graphql-code-generator.com/

Rx in Angular

Turn everything to stream

If possible

this.currentHeroId$ = this.route.paramMap
  .pipe(
    map(params => Number(params.get('id')))
  );
  
this.selectedHero$ = currentHeroId$
  .pipe(
    switchMap(id => 
      this.heroService.getHeroById(id)
        .pipe(shareReplay())
    )
  );

this.currentHeroId$ = this.route.queryParams
  .pipe(
    map(params => Number(params.get('id')))
  );

If currentHeroId changed from param to query, just

But sometimes need promise

for complicated flow control

https://indepth.dev/posts/1287/rxjs-heads-up-topromise-is-being-deprecated

Cold Observable

each subscriber create a new stream after subscribing

one stream to one subscriber

Hot Observable

singleton stream shared by every subscribers
one stream to many subscribers

Warm Observable

cold -> hot

similar to hot observable but stream start after first subscription

Pitfalls

Forget to unsubscribe

To avoid from memory leak
Do not need to unsubscribe cold observables or observables only used on async pipe
Or use takeUntil() operator

To react developers: similar to forget to cleanup in effect

HttpClient is cold

nothing happens

remember to subscribe

HttpClient is cold

share: make a cold observable warm

Avoid using multiple async pipe on same observable in one template

<div *ngIf="(articles$ | async) as articles">
  // ...
</div>
<div *ngIf="(articles$ | async) as articles">
  // ...
</div>

<ng-container *ngIf="(articles$ | async) as articles>
  <div>
    // ...
  </div>
  <div>
    // ...
  </div>
</ng-container>

Keep observable completion

nothing happens
stay at the original screen and the UI does not get updated

this.lessonsService
  .findLessonByUrl(route.params['id'])
  .pipe(
    first()
    // take(1)
  );

Architecture

w/ simple example

Single Responsibility Principle

Only do one thing

Aspect Oriented Programming

https://en.wikipedia.org/wiki/Aspect-oriented_programming

api

state

component

author

comment

article

view layer

core layer

state management

facade

data layer

abstraction layer

service layer

presentation

container

Core Layer

Domain / Application Logic

Data Layer

communicate w/ http, just api

@Injectable()
export class ArticleApi {
  readonly url = '/api/cashflowCategories';

  constructor(private readonly http: HttpClient) {}
  
  getArticles(options = {}): Observable<Article[]> {
    const { authorId } = options;
  
    return this.http.get<Article[]>(this.url, { authorId });
  }

  getArticleById(id: string): Observable<Article> {
    return this.http.get<Article>(this.url, { id });
  }
}

State Management

maintains a lot of BehaviorSubjects/Observables and methods

import * as jwtDecode from 'jwt-decode';

@Injectable({
  providedIn: 'root'
})
export class AuthState {
  private readonly accessToken$$ = new BehaviorSubject<string | null>(localStorage.getItem('accessToken'));
  
  accessToken$ = this.accessToken$$.asObservable();
  
  isAuthenticated$ = this.accessToken$
    .pipe(
      map(token => !!token)
    );
    
  get accessToken() {
    return this.accessToken$$.value;
  }

  get payload() {
    return jwtDecode(this.accessToken);
  }

  setTokens(accessToken, refreshToken) {
    this.accessToken$.next(accessToken);
    // ...
  }
  
  removeTokens() {
    this.accessToken$.next(null)
    // ...
  }
}

Do not expose BehaviorSubjects to avoid from mutating data by outside methods

conditional, sometimes just in service

Service Layer

domain business logics, like auth/form

@Injectable()
export class EditArticleForm {
  readonly form = this.fb.group({
    // ...
  });
  
  constructor(private readonly fb: FormBuilder) {}
  
  validate() {
    // ...
  }
  
  validateSomeField() {
    // ...
  }
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(
    private readonly authApi: AuthApi,
    private readonly authState: AuthState
  ) {}

  login(email, password) {
    this.authApi.login(email, password)
      .subscribe(({ accessToken, refreshToken }) => {
        this.authState.setTokens(accessToken, refreshToken);
      });
  }
  
  logout() {
    this.removeTokens();
    // ...
  }
  
  updateAccessToken() {
    const { refreshToken } = this.authState;
  
    if (refreshToken) {
      this.authApi.updateAccessToken(refreshToken)
        .subscribe(
          ({ accessToken, refreshToken: newRefreshToken }) => this.authState.setTokens(accessToken, newRefreshToken),
          () => this.logout()
        );
    }
  }
}

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
  // ...
  getArticles$() {
    return this.articleApi.getArticles()
      .pipe(shareReplay());
  }
  
  getArticlesOfAuthor$(authorId: string) {
    return this.articleApi.getArticle({ authorId })
      .pipe(shareReplay());
  }
  // ...
}

Facade

Facade pattern

https://en.wikipedia.org/wiki/Facade_pattern

Compose specific logics/flow control
Control router
Cache
...

@Injectable()
export class AuthorPageFacade {
  author$ = this.authorService.getAuthorProfile$();
  articles$ = this.author$
    .pipe(
      switchMap(author =>
        author
          ? this.articlesService.getAritclesOfAuthor$(author.id)
          : of([])
      )
    );

  constructor(
    private readonly authorService: AuthorService,
    private readonly articleService: ArticleService
  ) {}
  
  navigateToAriclePage(artcile: Article) {
    this.router.navigate(['/article', article.id]);
  }
}

Example in wiki

View Layer

Presentation

export class AritcleListComponent {
  @Input()
  articles: Article[];
  
  @Output()
  articleSelect = new EventEmitter<Article>();
  
  onArticleSelect(article: Article) {
    this.articleSelect.next(article);
  }
}

// 
<article-list-item
  *ngFor="let article of articles"
  [article]="article"
  (select)="onArticleSelect($event)"
></article-list-item>

Do not know anything except @Input and @output

Container

export class AuthorPageComponent {
  author$ = this.authorPageFacade.author$;
  articles$ = this.authorPageFacade.articles$;
  
  constructor(
    private readonly authorPageFacade: AuthorPageFacade
  ) {}
  
  onArticleSelect(article: Article) {
    this.authorPageFacade.navigateToArticlePage(article);
  }
}

// 
<author-profile [author]="author$ | async"></author-profile>
<article-list
  [articles]="articles$ | async"
  (articleSelect)="onArticleSelect($event)"
></article-list>

Communicate w/ facade and presentational views

author page facade

author service

article service

author profile component

author page component (container)

article-list

author$

articles$

getArticles(author.id)

getAuthor

@Input()
author$ | async