Rules to Better Angular

​Angular is everywhere.

Angular is up to version 7 - some people also call it Angular 2+, but since version 4.0, it's just been known as Angular.  This page is a set of rules and guidelines to get you up and running with 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.

Want to build an Angular application? 

Check SSW's Angular Consulting page.

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you know why to upgrade from AngularJS to Angular?

    ​​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. Tools - Do you know what to install for an Angular project?

    ​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 (https://nodejs.org/) and NPM (https://www.npmjs.com/)
    2. Git (https://git-scm.com/), and
    3. Angular CLI (https://angular.io/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:​ https://nodejs.org/en

    node -v

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

    npm -v

    If you have a version of NPM < 5, 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 https://git-scm.com 

    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: https://github.com/angular/angular-cli.

    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 uninstall -g @angular/cli 
    npm cache verify
    npm install -g @angular/cli


    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: https://update.angular.io

    cmd-run-ng-v.jpg
    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: https://github.com/nodejs/node-gyp
    If you get permission errors, follow instructions here: https://docs.npmjs.com/getting-started/fixing-npm-permissions

    Which IDE should I use for developing Angular applications?

    We recommend you use VSCode - http://code.visualstudio.com
    Read more on Do you know the best IDE for Angular?

  3. Tools - Do you know the best IDE for Angular?

    ​When developing Angular, there are lots of choices for code editors. The best experience by far is to use Visual Studio Code.   
    angular-machine-setup-1.png
    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 projects.

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

    This 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.

    See https://github.com/johnpapa/vscode-angular-essentials.

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

    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.png
    Figure: Get to Visual Studio Code quickly from within Visual Studio - Open in Visual Studio Code extension

  4. Do you know the right way to create your Angular project?

    Angular.io​ 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.png
    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. Options - Do you know that the ASP.NET Core SPA Template for Angular uses the Angular CLI?

    ​​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.png
    Figure: Creating a project from the command line
    create-angular-via-vs.jpg
    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.jpg
    Figure: A simple example WebAPI
    angular-ui-with-bootstrap.jpg
    Figure: An Angular UI with Twitter Bootstrap styling
    angular-server-side-config.png
    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. Options - Do you use Typescript for your Angular and React Applications?

    ​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 http://www.typescriptlang.org/.

    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.

    SQL Server 2017

    SQL Server 2017 and Azure SQL Database

    Angular

    ASP.NET MVC + WebAPI


  8. Do you know the best learning resources for Angular?

    Here are the best collection of resources for Angular.

    The-Little-Book-of-Angular-v1-8.jpg
    Figure: Download the​​ Little Book of Angular
  9. Tools - Do you know the best Build Tool?

    ​Building, bundling and compiling Angular applications can get complicated. You need great build tools.
    gulp.png
    Figure: Bad Example - Gulp requires hundreds of lines of config to build and bundle Angular applications
    webpack.png
    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
    cli.png
    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. Tools - Do you know the best UI framework for Angular?

    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.png
    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:

    • Information regarding theme can be found here: https://material.angular.io/guide/theming
    • Tweaking individual components can be done by wrapping it in a CSS class and using ng-deep: https://blog.angular-university.io/angular-host-context/
      If you prefer, all such modifications can be done in a separate SCSS file that is then added into styles.scss.
      Make sure you use a wrapper class so you do not change all other same Angular Material components in the project.
    • Add the Flex Layout library to your project to take advantage of Flexbox.  It makes it easy to use Flexbox classes via directives in your Angular HTML templates.
      Here is a demo website for Flex Layout: https://tburleson-layouts-demos.firebaseapp.com/#/docs
    • For the creation of custom Angular Material components, the CDK can be used: https://material.angular.io/cdk/categories
    • If you need additional colours for the standard 'warn', 'primary', and 'accent', you can add that into global SCSS files:

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

      Now you can do following:

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

    Bootstrap

    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.png
    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. Tools - Do you know the best Packages and Modules to use with Angular?

    ​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.
    https://ng-bootstrap.github.io/

    Ng-boostrap

    Best way to quickly integrate Bootstrap 3 or Bootstrap 4 Components with Angular. 
    https://ng-bootstrap.github.io

    OpenID Token Manager

    Handles management of OpenID authentication and tokens.
    https://github.com/IdentityModel/oidc-token-manager

    NgxSpinner

    A library for loading spinner specifically for Angular 4/5/6.
    https://www.npmjs.com/package/ngx-spinner

    ngx-toastr

    A library for displaying toasts in Angular applications.
    https://www.npmjs.com/package/ngx-toastr​

    For more, please check out the most popular npm packages: https://www.npmjs.com/search?q=ng&ranking=popularity .

  12. Tips - Do you know how to check the version of Angular?

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

  13. Tips - Do you have a pleasant development workflow?

    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 tasks

    Remember: 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. Practices - Do you use a Service to share reusable logic?

    ​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.jpg
    Figure: Bad Example - Code that is reusable should be placed in a Service
    reusable-service-good.jpg
    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 – and an Angular component is no exception.

    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.png
    Figure: Bad example - Having just 3 components for the page makes it difficult to reuse, maintain and test​
    comp-2.png
    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.png
    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.png
    Good: Setting up declarative routes and outlets gives a good user experience, persistent URLs, ​and fewer moving parts
  17. Practices - Do you generate strongly-typed interfaces for your DTOs?

    Inevitably, our 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.png
    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.png
    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.
  18. Practices - Do you avoid directly modifying the DOM from your components?

    U​sing 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.

    dom1.png
    This component manipulates the DOM directly to show and hide the menu
    dom2.png
    This component sets component state, which the template can use.  It is simpler, more descriptive and easier to test
  19. Practices - Do you know to use ngrx on complex applications?

    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.

    ngrx.png
    Figure: ngrx supercharges the redux pattern with RxJS

    Benefits:

    • Easy state management
    • Better tooling and debugging
    • Simpler applications to build
    • Increased performance
    • Code that is easy to test
    img1.png
    Figure: ngrx supercharges the redux pattern with RxJS
    img2.png
    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.

  20. Tools - Do you know the best tools to debug JavaScript?

    ​​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.png
      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.png
      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.png
      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.png
      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.png
      Figure: Hot module reloader documentation from WebPack website
  21. Practices - Do you know to separate your Angular components into container and presentational components?

    ​​​​There are two types of components 'dumb' and 'smart' components. Dumb components normally have no dependencies and no logic and just have @Inputs() and @Outputs(). 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">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                   <tr class="item" *ngFor="let company of companies">
                        <td>{{company.name}}</td>
                        <td>{{company.phone}}</td>
                        <td>{{company.email}}</td>
                        <td class="button-column">
                            <button routerLink="/company/detail/{{company.id}}" class="btn btn-default" >Details</button>
                            <button routerLink="/company/edit/{{company.id}}" class="btn btn-default" >Edit</button>
                            <button (click)="confirmDelete(company)" class="btn btn-default">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        `
    })
    export class CompanyListTableComponent {
        @Input() companies: Company[] = [<Company>{}];
        @Output() deleteCompanySelected = new EventEmitter<number>();
                this.deleteCompanySelected.emit(company.id);
        }
    }

    ​Figure: Good example of a presenta​​tional component with no injected dependencies​