Secret ingredients to quality software

SSW Foursquare

Rules to Better Angular - 22 Rules

Angular is everywhere.

There are two distinctive versions of Angular:

  • AngularJS, this is v1, not getting any new features, and ends LTS support at the end of 2021
  • and Angular (or Angular 2+) which represents any version of Angular after 2.0 (which was a major rewrite).

This page is a set of rules and guidelines to get you up and running using Angular with the least pain possible.

Angular and React have been the 2 dominant front-end technologies for the last few years. We have been running our Angular Superpowers course that entire time, and I’m still amazed that every time we run the course, we sell out. 

Of course, we update the course with every version, but it's still amazing because JavaScript frameworks have a reputation for being transitory. But these 2 frameworks have become entrenched in enterprises everywhere.

A lot of these rules have originated from the Angular Superpowers Tour.

Want to build an Angular application?

Check SSW's Angular Consulting page.

  1. Do you know why it is a good idea to upgrade your AngularJS application to the latest version of Angular (Angular 7, was Angular 6, was Angular 5, was Angular 4, was Angular 2+, and from here on will be known as Angular)?

    There are a number of reasons why you should consider migrating your AngularJS application to the latest version,

    1. Dynamism The most annoying feature of AngularJS 1.x is that we can’t add anything dynamically. In contrast, in Angular, we can create a component, configure a router and register a service in a pleasant way. One of the basic concepts of Angular 2 is that after clicking on some menu item we can dynamically pull the part of the application responsible for the application display. To do it in AngularJS we had to hack the framework, use undocumented functions and gaps in the framework – things that we actually shouldn’t do.
    2. Component-based Angular is entirely component-based. This feature enforces thinking in components and as a result, we get an application that is neatly and naturally divided into separate parts - at least if you don’t create one component for the entire subpage. Component-based application development is usually faster due to easy creation and reasoning. Well designed components are also reusable which makes an application code more coherent.
    3. Dependency injection There is a simpler, more intelligible dependency injection container in Angular. Few developers knew the difference between provider, service, and factory in Angular 1 and there is no such problem in Angular. Now the default setting is class instance - only if you want to use a different raw value you need to declare it explicitly using an easily understandable object literal.
    4. TypeScript Support The latest version of Angular fully embraces Typescript. For those unfamiliar with this term, TypeScript Lang builds on top of what you already know about JavaScript but incorporates many additional tools to your ability to refactor code, write in modern JS (ECMAScript 2015), and compile to the older versions depending on browser request. Another important facet is IDE integration is that it makes easier to scale large projects through refactoring your whole code base at the same time. Its inbuilt code completion tool effectively saves your precious time from having to look up various features from the libraries you use individually.
  2. This rule explains what to install in order to get started creating an Angular project.

    The best practice for creating an Angular project and components is to use the Angular CLI (command-line interface).

    The Angular CLI is also used in the latest .NET Angular SPA template.Read Do you know that the ASP.NET Core SPA Template for Angular uses the Angular CLI?

    The libraries that are required to get started are:

    1. Node.js ( and NPM (
    2. Git (, and
    3. Angular CLI (

    1. Node.js and NPM

    The first step is to install Node.js, which comes bundled with NPM. Node.js is a JavaScript runtime that will allow NPM (Node Package Manager) to run on your local machine. NPM allows the installation and management of 3rd party JavaScript libraries on your local machine and Angular project.

    Check that you have a version of Node.js installed that is compatible with the latest version of Angular. The latest Long Term Support (LTS) version of Node.js is a safe bet.

    To check you have the correct version of Node.js run the following from a terminal/command window.

    If you have older versions of Node.js or don't have it installed, please install the latest LTS version from here:

    As of Angular 9, you need to be on Node 11+.

    node -v

    Check that you are running NPM 6+ by running the following from a terminal/console window:

    npm -v

    If you have a version of NPM < 6, install the latest version running the following command from a terminal/console window. If you don’t have NPM installed, use the Node.js installer to install NPM.

    npm install -g npm@latest

    2. Git

    Install git

    Check you have git by running the following from a terminal/command window:

    git --version

    3. Angular CLI

    Check you have the latest version of the Angular CLI installed globally by running the following command in the terminal/command window. Check the result against the latest version shown on GitHub here:

    ng v

    If you don’t have Angular CLI installed, then run the command below in a terminal/command window to install it.

    npm install -g @angular/cli

    If you are not running the latest version, we recommend you run the below commands to update the global version of the Angular CLI.

    npm install -g @angular/cli@latest

    Upgrading the global Angular CLI version will not affect the version of the Angular CLI being used by existing local project. Multiple versions of the Angular CLI can run on the same machine, and the project specific version of Angular CLI will continue to be used by the project until you manually upgrade the project’s local version.

    Instructions for upgrading the Angular CLI of an existing project can be found here:

    angular cli 8 3 2x
    Figure: Running “ng v” (or any other ng command) in the command-line of an older Angular CLI project will give you a warning that the global version is greater than the local version (see yellow text in the screenshot)

    Getting errors?

    If you get node gyp errors, follow instructions here:

    If you get permission errors, follow instructions here:

    Which IDE should I use for developing Angular applications?

    We recommend you use VSCode - Read more on Do you know the best IDE for Angular?

  3. When developing Angular or React, there are lots of choices for code editors. The best experience by far is to use Visual Studio Code.

    angular machine setup 1
    Figure: Good Example - Visual Studio Code is a free, lightweight IDE that runs on Windows, Linux and OS X. Visual Studio Code is the IDE of choice for many Angular developers and has lots of great extensions for Angular

    Many experienced teams are using Visual Studio for their C# backend and loving using Visual Studio Code for their Angular or React projects.

    The recommended extension for Visual Studio Code is **Angular Essentials** from John Papa

    Angular Essentials is actually a meta-package that includes a list of great extensions for Angular Development – and this list may be updated in the future as more extensions become popular.


    angular machine setup 2
    Figure: Good Example – the Angular Essentials extension will install a great suite of extensions to support Angular development

    You can find more extensions at Visual Studio | Marketplace.

    Open in Visual Studio Code

    This extension is for those times where you have a project open in Visual Studio and you want to be able to quickly open it in Visual Studio Code .

    open in vscode
    Figure: Get to Visual Studio Code quickly from within Visual Studio - Open in Visual Studio Code extension

    More: Why do others love VS Code?

  4. is a great place to get started learning Angular, and since the Angular CLI is now an official Angular project, these docs now include using the CLI from the beginning.

    The Quick Start and Tour of Heros Tutorial will teach you lots about Angular.

    For an enterprise real-world project you should also consider:

    1. Whether your application will require the redux pattern
      See Do you know to use ngrx on complex applications?
    2. Do you need a UI framework?
      See Do you know the best UI framework for Angular?

    There are also several well-used templates that incorporate Angular and server-side tooling.While these starters often include advanced functionality, we prefer to implement pure Angular CLI projects where possible because Angular updates frequently.. and when you are using someone else's template that incorporates Angular you are left with the options of waiting for them to update their template to the latest version of Angular, or working out how to do it yourself. This can often leave you with large amounts of work or be being several months behind the latest versions.

    To learn how to build enterprise Angular applications check out FireBootCamp

    create angular good
    Figure: Good Example: The Angular CLI will create you a new Angular project with a single command, and that project will be set up with production build, unit testing, and end-to-end testing all configured. If you have very specific build requirements, the CLI also supports custom web pack builds.

  5. For .NET Developers only!

    For many Angular solutions, a good practice is to keep your client-side and server-side code in separate projects.

    • You get a clear separation of concerns
    • You usually expect your server-side stack to outlive your client-side technologies
    • You may plan to use your WebAPI with multiple user interfaces such as mobile or bots
    • Easier to deploy your angular app to a CDN

    For some solutions, it might be simpler to integrate your client-side and server-side into a single project – and with the SPA templates for ASP.Net Core, this has never been easier.

    • A single project might make sense for a smaller, simpler solution
    • There will be only one website to deploy to a single web server that will serve both angular and WebAPI sites
    • The project can be built with a single build process
    • This might be a good choice if you are looking to migrate an existing MVC website as you can host MVC pages and the Angular app under one site
    • This approach is easier if you want to use Windows Authentication
    • No CORS configuration required

    To create an Angular application with the SPA template new project from the command line or you can use Visual Studio. From ASP.NET Core 2.1 onwards, this template is included.

    create angular via cmd
    Figure: Creating a project from the command line

    create angular via vs
    Figure: Creating a project using Visual Studio

    Although Visual Studio can be used to create the project, we still recommend Visual Studio Code for working with the Angular code, as per Do you know the best IDE for Angular?

    The ASP.NET Core SPA Template for Angular Includes:

    simple example webapi
    Figure: A simple example WebAPI

    angular ui with bootstrap
    Figure: An Angular UI with Twitter Bootstrap styling

    angular server side config
    Figure: Server-side configuration in Startup.cs allowing the Angular UI to be hosted from under the single ASP.NET Core website

    This Angular app uses the Angular CLI and is fully compatible with any other Angular CLI app. If you want to create a new app from scratch, simply delete the contents of the ClientApp folder and run ng new.

    So you get the benefits of easy client-server integration without having to compromise any Angular client-side features or Angular CLI tooling.

  6. Typescript is the best choice when writing Angular and React applications. Angular is even written in Typescript itself! 

    Typescript allows you to strongly type your JavaScript code as well as use the new ES6+ specifications.

    You can start learning more about typescript at

    You should also check out SSW TV Videos on Typescript.

  7. Do you know the best sample applications?

    Before starting a software project and evaluating a new technology, it is important to know what the best practices are. The easiest way to get up and running is by looking at a sample application. Below is a list of sample applications that we’ve curated and given our seal of approval.

    Northwind Schema


    SQL Server

    SQL Server and Azure SQL Database



    UI - Angular

    UI - React

  8. Here are the best collection of resources for Angular.

    The Little Book of Angular v1 8
    Figure: Download the Little Book of Angular

    Free Resources

    Training Courses $


    Free Events

  9. Tools - Do you know the best Build Tool?

    Building, bundling and compiling Angular applications can get complicated. You need great build tools.

    Figure: Bad Example - Gulp requires hundreds of lines of config to build and bundle Angular applications

    Figure: Good Example - Webpack is an open-source JavaScript module bundler that can be used to build your application (and lots more as well). Teams with advanced build requirements use Webpack. The downside of Webpack is that it requires a large investment in learning Webpack - if it isn't required, the Angular CLI is a better choice

    Figure: Good Example - Use the Angular CLI on all new projects that don't require custom Webpack builds. The Angular CLI generates components, routes, services, and pipes, follows best practices as well as building applications for production. The Angular CLI build includes best practices including Tree Shaking and Ahead of Time (AoT) compilation out of the box! The Angular CLI uses Webpack under the covers

  10. The main contenders for the best UI framework for Angular are:

    Making the choice of which to use will depend on several factors related to your project:

    1. The look and feel of the site that your client is seeking
    2. The range of components that will be required in the application
    3. The developers' familiarity with the framework
    4. The designers' familiarity with theming in the framework

    Angular Material

    Angular Material has a very specific design metaphor, and if the look and feel is one that your client likes, then consider using it. But if the Material metaphor doesn't match the rest of the client's applications, then it may not be a good choice.

    angular material
    Figure: Angular Material is built by the Angular team

    The components available in Angular Material are solid, but it doesn't have the range of components that are available in Bootstrap. It is actively being developed though, and new, exciting components are being added regularly. For example, an infinite scroll component was added in October 2018.

    Angular Material uses Angular components for its widgets. This means that the HTML rendered in the browser will include directives, divs, and classes that are not present in the component template HTML. It is for this reason that Designers without a good understanding of Angular may have difficulties tweaking the look of the Angular Material components.

    Here are some tips for working with Angular Material:

    .mat-success {  color: $white !important;  background-color: $success !important;}

    Now you can do following:

    <button mat-raised-button color="success">Primary</button>


    Bootstrap is the obvious choice if your UI design requires extensive customization. Bootstrap makes it easy to theme your application's design and to tweak the design of individual components. In addition to components, Bootstrap 4 provides powerful layout and theming capabilities. These features make it popular with Designers.

    bad bootstrap
    Figure: Bootstrap has been the recommended UI framework for the web for years

    There are two popular bootstrap-based Angular component libraries - ng-bootstrap and ngx-bootstrap. Both support Bootstrap 4 and provide a rich choice of components.

  11. You can improve your Angular development experience by using some of these recommended packages and modules.

    We recommend you use NPM to include them.

    Angular Bootstrap

    Angular components for Bootstrap 4.


    Best way to quickly integrate Bootstrap 3 or Bootstrap 4 Components with Angular.

    OpenID Token Manager

    Handles management of OpenID authentication and tokens.


    A library for loading spinner specifically for Angular 4/5/6.


    A library for displaying toasts in Angular applications.

    For more, please check out the most popular npm packages:

  12. You can check the version of Angular by using the "Inspect" tool on your browser.

  13. UPDATE: This has been properly fixed since Angular 4. So now, this rule is irrelevant because Angular CLI provides a pleasant development workflow. Using ng serve, TypeScript transpilation occurs automatically and quickly (almost instantly).

    When dealing with client-side development – especially when transpiling TypeScript – it is common to have to wait for several seconds between writing code, and seeing the results.

    This adds up quickly – if you have to wait for 5 seconds every 3 minutes, you've spent 13 minutes of your day just waiting. This is a conservative estimate - we change code much more frequently than every 3 minutes!

    A naïve development experience is as follows:

    1. Make a code change using a misconfigured IDE

      • See errors everywhere as you type (even though the code is perfectly fine)
      • Inaccurate IntelliSense information
    2. Compile the code

      • Since the TypeScript compilation task is often part of the project build, this is a common way to recompile to JavaScript
    3. Run a gulp task to copy files around appropriately

      • This often takes a few seconds to run, especially if it “cleans” the folder beforehand
    4. Refresh the page

      • Depending on the setup, this may take anywhere from milliseconds to seconds
    5. Click around until the app is in the right state to test the functionality

      • If there is too much built-up state, and no routes set up, this chews up time

    Bad example - Many hours each week are wasted just waiting for the code you wrote to run

    A more ideal workflow is:

    1. Make the change using a properly configured IDE

      • One that only shows errors when they’re appropriate
      • Intellisense shows everything available, and nothing more
    2. Refresh the page (maybe)

      • With well set up watches for compilation and appropriate use of BrowserLink or LiveReload, this is very fast
      • With proper bundling, the initial page load is also fast in development environments.
    3. Already be at the component required, ready to check it works

    Good example - No time is wasted doing repetitive and slow tasksRemember : Spending 4 hours setting up a good dev experience will pay for itself within the week, and make your work like much happier.

    Guidelines to follow

    • Ensure that only the files that are changed need to be compiled – TypeScript handles this quite well with --watch
    • Avoid the use of task runners (eg. gulp) as part of your development flow. A few watches should be all you need. Save the task runners for release builds
    • Consider separate index pages for production and development, using the dev libraries for development, and minified/bundled ones for production
    • Use module loaders (eg. SystemJS) to manage dependencies and their associated bundlers/builders for releases
    • Load 3rd party modules (eg. Angular2 and Rx) as a bundle, not as their individual files – speed up development first-page load
    • Think about your routing – a refresh should almost always return the page to the exact same state or at the very least, the same screen
    • Most importantly, be unsatisfied - if things are slow, fix it. If you constantly have to manually close IISExpress to run your app, find out why and fix it! You will save everyone time in the long run
  14. A Service is a singleton object with a lifetime scope of the application. It is instantiated only once during the lifetime of an application. When combined with Angular’s Dependency Injection, a service can be injected into any component in an application via Constructor Injection. This makes a Service perfect for sharing reusable functionality throughout an application.

    A common example of when you’d use a Service is when you want to retrieve data from a WebApi using the HttpClient. There may be several places in your application where you need to retrieve the same list of data. By placing this functionality in a Service it gets rid of the duplicated code in the components that make the WebApi call.

    reusable service bad
    Figure: Bad Example - Code that is reusable should be placed in a Service

    reusable service good
    Figure: Good Example - Reusable code is placed in a Service and the component calls the Service

  15. Practices - Do you write small components?

    The Single Responsibility Principle is a well understood, and well-accepted tenant of good code design. It states that a class should do one thing, and do it well - The same applies to Components used with Frameworks such as Angular, React, Vue and Blazor.

    When designing components, keep them small, modular and reusable. For example, if you have a menu, put it into a menu component, don’t put it in your app component.

    comp 1
    Figure: Bad example - Having just 3 components for the page makes it difficult to reuse, maintain and test

    comp 2
    Figure: Good example - Splitting up the page into 11 components means they are small and targeted - and thus easy to maintain and test. Components can be reused on other pages

  16. Practices - Do you use client-side routing?

    Single page applications (SPAs) are getting more and more popular, and for good reason – a better and faster user experience, reduced server load and encourages good API separation.

    But have you ever visited a website, thought “I’ll refresh that” and then got taken back to the home screen? Or tried to copy or bookmark the URL, only to find it’s just “/Home”? This happens when client-side routing hasn’t been implemented properly and is a big hit to a site’s usability.

    This is easily fixed with Angular ’s routing capabilities, and implementing it in your SPA will confer several advantages:

    • URLs can be copy-pasted and shared
    • Page refreshes work as expected
    • Less prone to errors
    • Better separation of concerns (navigation vs page state)

    client side bad
    Figure: Bad example - The blog post component is choosing components based on the state of the component

    A better way is to set up routes, and use a router (the first-party component router is great for this) to manage your components:

    client side good
    Good: Setting up declarative routes and outlets gives a good user experience, persistent URLs, and fewer moving parts

  17. Inevitably any well-engineered Angular application will need to send and receive data from a service of some sort – usually a Web API. A common mistake people make when doing this is using typescript’s built in any type for these services, which offers no type safety whatsoever.

    dtogs bad
    Figure: Bad example - The "any" type is used as the DTO for this service. There is no type safety

    One step better is to manually create interfaces for the DTOs. This gives type safety, but still means a lot of manual, tedious work to generate the interfaces.

    dtogs ok
    Figure: OK example - Manually coded interface ensures any object passed to the service is in the correct format

    But this still doesn’t give safety over-the-wire – if the server side model changes, a developer has to remember to update it here, and hope that there are no typos. This is also extra effort to perform something mindlessly repetitive – something a machine is much better at doing. And we are programmers, right?

    If your WebAPI has an OpenAPI (a.k.a. Swagger) specification, then the NSwag tools can build a complete Typescript client configured as an Angular injectable service - complete with:

    • HttpClient calls that return Observables
    • All defined endpoints implemented as methods in the service
    • All DTOs included as Typescript interfaces

    Figure: Good example - NSwag generates the boring work so that you don't have to

    northwind client
    Figure: Good example - This client side api-access code from Jason Taylor's NorthwindTraders sample project has been generated by NSwag


  18. Using DOM is fine, but manipulating DOM directly in your component is not. With the introduction of Angular, there has been a big push in ensuring the DOM stays out of your JavaScript code. It is designed in such a way that an existing Angular application can be ported to another target by simply replacing the template and template loader. Projects such as Angular React Native Renderer leverages this to allow native mobile app development in Angular.

    • Smaller component code making it easier to maintain
    • Faster running and easier to write unit tests
    • Easier for designers to get involved

    This means that the component's state must expose things that are useful to the template as public properties or fields, and the Angular should read these fields to draw itself.

    This component manipulates the DOM directly to show and hide the menu

    This component sets component state, which the template can use. It is simpler, more descriptive and easier to test

  19. State management in Angular can quickly become unmaintainable if done incorrectly. It is important to fully understand why you are implementing state management and then decide how you are going to do it.

    There are many different options you can choose from, including the following:

    State managed in parent-child component hierarchies

    In this method, components do not know about the state of other components but rather receive data via inputs and emit data via events. It works well for simple scenarios but falls over when lots of communication is required between different components.


    • Simplicity - Out of the box


    • Communication - No shared state across component trees
    • Scalability - When the depth of hierarchies grows, it becomes hard to deal with
    • Separation of concerns - Tight coupling between components in the tree
    • Testability - You cannot properly unit test parent-child components

    State management in observable services

    Using observable services takes state management to the next level. Using this method, we can enable communication between different component trees. This solution is suitable for most scenarios.


    • Sharing state - You can pass state between different component trees
    • Ease of use - Quick and easy to implement
    • Separation of concerns - Keeps business logic away from the presentation logic


    • Scalability - Services can become a web of dependencies if not kept in check
    • Predictability - Consistency is not enforced in the way state is managed
    • Testability - It can be hard to test services due to the inherent dependency web

    Redux e.g. NgRx (see rule:

    Redux is a design pattern which centralizes the state into a single shared store across the application. It introduces several constraints on how data flows in and out of the state store in order to make the state scalable and consistent. However, it requires a lot more code and can lead to longer development times. Often this makes sense for large, complicated applications but less so for simple ones.


    • Centralized state - Makes global state management simpler
    • Separation of concerns - Goes one step further by separating business logic and state management
    • Predictability - Makes state change predictable by enforcing consistecy
    • Testability - Pure functions are much easier to test as they have no external dependencies


    • Velocity - It can take more code to write
    • Boilerplate - Requires the use of many files and has a lot of repetition
    • Learning curve - Can be easy to get wrong if you are an inexperienced user
    • Third-party library - Not part of the standard Angular library may increase overhead when upgrading Angular. Also introduces additional bundles in the published artifact.
  20. Heads Up: For new teams creating their first SPA using Angular, it is recommend to limit the initial focus to learning Angular, TypeScript, and RxJs. Avoid including advanced state management patterns such as NgRx, unless someone on the team has prior experience. Start with a simple approach to state management and evolve your design once the team has mastered the basics. When your team is ready, be sure to investigate the multitude of patterns, supporting libraries, and best practices available for advanced state management. If you are developing an application that absolutely requires advanced state management then be sure to invest in some training and / or enlist the help of another developer with the right skillset.

    State management is complex and time-consuming.

    On large applications, it becomes very difficult to maintain state. The redux pattern helps resolve this issue.

    NgRx is the redux pattern implemented for Angular. View on GitHub.

    Figure: NgRx supercharges the redux pattern with RxJS


    • Easy state management
    • Better tooling and debugging
    • Simpler applications to build
    • Increased performance
    • Code that is easy to test

    Figure: NgRx supercharges the redux pattern with RxJS

    Figure: The redux pattern is a way to implement a predictable state container

    The three principles of the redux pattern:

    1. The entire state of the application is represented in a single JavaScript object called a store.
    2. The store is acted upon using special functions called reducers.
    3. State is immutable and reducers are the only part of the application that can change state.

    What do we mean by complex?

    State management such as ngrx is most useful when applied to shared data - that can be changed or "mutated" in multiple ways. When applied to data that is not shared there is a risk of adding much more effort with little value

    Simple Example

    "Add a company edit form to capture a company's address and contact details, when the user clicks 'save', we send a HTTP POST to an API".

    In this type of scenario, the company details you are editing are not shared with any other component so you get little benefit from using state management.

    Complex example

    "Add a checkout screen where users can change order quantities and see the totals immedately update. Also there is a widget in the toolbar that shows number of items and cart total at all times"

    This type of complexity is perfect for ngrx! The state of your shopping cart can be in kept the Store an both the main Checkout Component and the Cart widget can be kept in sync by selecting this state from the store and raising actions to mutate that state in controlled and predictable ways.

  21. Debugging JavaScript application can be difficult. Having to console.log results can make for a slow and cumbersome development experience. There are five ways you can debug a JavaScript application without leaning on console.log() as your main tool.

    Options for Debugging JavaScript applications

    1. Debug your JavaScript using console.log()
    While this is a valid approach it should only be utilized for the simplest of manual debugging tests as they are slow, you have to re-run the app every time, do not allow you to change state mid-flight and developers sometimes forget to clean up after themselves and the code becomes riddled with console.log statements.

    debug js 1
    Bad code - Using console.log() to debug your JavaScript

    2. Debug in the browser with a breakpoint
    Chrome is by far the most popular browser for the average web developer followed by Firefox, but all the major browsers have a debugging tool.

    debug js 2
    Figure: Old school JavaScript debugging with Chrome Dev Tools is still the best and most versatile tool

    3. Debug in an IDE
    It is often more effort than it is worth to debug JavaScript in your IDE and it is still not very popular. If your app is a server-s ide NodeJS JavaScript app then it is very different since this type of JavaScript app does not run in the browser and this is what the IDE is designed for.

    • Visual Studio Code Chrome Debugger - Painful to set up source maps for advanced JavaScript applications that run in memory dev servers like WebPack Dev Server.
    • Visual Studio 2015 - Only works with TypeScript in Internet Explorer

    debug js 3
    Figure: Visual Studio Chrome Debugger with breakpoint set

    4. Time Travel Debugging with Redux
    Using tools like ngrx's store dev tools. You can traverse back and forth between states with excellent UI tools. Debugging through your states is much better than just debugging the current state but also to be able to see the actions triggered to change state.

    debug js 4
    Figure: Example of redux based time travel debugging

    5. Hot Module Reloading
    The problem with the above approaches is every time you make a change to your code you need to reload the website and navigate back to the page and state of that page again and again to repeat your manual test. Hot Module Replacement (HMR) exchanges, adds or removes modules while an application is running without a page reload.

    debug js 5
    Figure: Hot module reloader documentation from WebPack website

  22. There are two types of components 'dumb' and 'smart' components. Dumb components normally have no dependencies and no logic and just have @Input() and @Output(). Smart components are their parent components that would have multiple dependencies and logic but not necessarily an HTML template.

    Aiming to keep the components that display data 'dumb' makes them much easy to reuse in your application and less buggy, but many people do not like the terms smart and dumb components as a dumb component may just have less logic versus none. Many people and SSW included are preferring the terms container and presentational components for these reasons.

    company-list-table.component.ts @Component({
        selector: 'fbc-company-list-table',
        template: `
         <table id="company-list-table" class="table table-hover table-striped company-list-table-component">
                   <tr class="item" *ngFor="let company of companies">
                        <td class="button-column">
                            <button routerLink="/company/detail/{{}}" class="btn btn-default" >Details</button>
                            <button routerLink="/company/edit/{{}}" class="btn btn-default" >Edit</button>
                            <button (click)="confirmDelete(company)" class="btn btn-default">Delete</button>
    export class CompanyListTableComponent {
        @Input() companies: Company[];
        @Output() deleteCompanySelected = new EventEmitter<number>();
        confirmDelete(company: Company) {

    Figure: Good example of a presentational component with no injected dependencies

We open source. Powered by GitHub