Model

An angular library to manage state of angular projects. Using this models is very straightforward and very easy to understand and implement than using redux pattern and other state management libraries.

Installation

To install this package, just run the following command in the root directory of your angular project.

npm i @ng-clown/model

Create a model

To create a model, we can use create a class and decorate it with @Injectable and add extends BaseModel from this package.

Example.

import { Injectable } from "@angular/core";
import { BaseModel } from "@ng-clown/model";

@Injectable({ providedIn: 'root' })
export class User extends BaseModel {
    firstName: string = 'John';
    lastName: string = 'Doe';
}

Subscribe to changes

To subscribe to changes, we just need to inject the model to our component and subscribe to its observable property.

Example.

import { Component, OnInit } from '@angular/core';
import { User } from './user.model';

@Component({ ... })
export class AppComponent implements OnInit {

  constructor(private user: User) { }

  ngOnInit() {
    this.user.observable.subscribe(state => {
      console.log(state);
    });
  }

}

Emitting changes

Changing a value in the model's property will emit the changes and notify all the subscribers that there is a change in a model's property.

import { Component, OnInit } from '@angular/core';
import { User } from './user.model';

@Component({ ... })
export class AppComponent implements OnInit {

  constructor(private user: User) { }

  ngOnInit() {
    this.user.observable.subscribe(state => {
      console.log(state);
    });

    // Changing the value of a property will emit the changes to the subscribers
    this.user.firstName = 'Johnny';
  }

}

Note that changing multiple property will emit the changes multiple times. To change multiple property and emit the changes one time, we need to change the properties inside a method of the model. Please check the "Emitting via methods" section for more info.

Emitting via methods

To change multiple properties and broadcast the change only once, the properties needs to be updated inside a model property.

Example.

The model

import { Injectable } from "@angular/core";
import { BaseModel } from "@ng-clown/model";

@Injectable({ providedIn: 'root' })
export class User extends BaseModel {
    firstName: string = 'John';
    lastName: string = 'Doe';

    public setName(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

The component

import { Component, OnInit } from '@angular/core';
import { User } from './user.model';

@Component({ ... })
export class AppComponent implements OnInit {

  constructor(private user: User) { }

  ngOnInit() {
    this.user.observable.subscribe(state => {
      console.log(state);
    });

    // Changing multiple properties inside a model method will broadcast the changes only once.
    this.user.setName('Johnny', 'Smith');
  }

}

Unsubscribe all subscriptions

A model will always keeps track of the subscriptions and we can unsubscribe it all at once using unsubscribeAll method.

Example.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { User } from './user.model';

@Component({ ... })
export class AppComponent implements OnInit, OnDestroy {

  constructor(private user: User) { }

  ngOnInit() {
    this.user.observable.subscribe(state => {
      console.log(state);
    });
    this.user.observable.subscribe(state => {
      console.log(state);
    });
  }

  ngOnDestroy() {
    this.user.unsubscribeAll();
  }

}

Unsubscribe a subscriptions

To unsubscribe a single subscription we can do it like how we usually unsubscribe an rxjs subscription.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { User } from './user.model';

@Component({ ... })
export class AppComponent implements OnInit, OnDestroy {
  constructor(private user: User) { }

  private subscription: Subscription;

  ngOnInit() {
    this.subscription = this.user.observable.subscribe(state => {
      console.log(state);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}