There are so many articles titled “Angular vs React”, “React vs Angular”, “Angular or React” – it is a miracle you opened this one! What these articles are missing, however, is a precise side-by-side comparison of Angular vs React.

So this is what I am going to do in this blog post: to place React and Angular in direct juxtaposition. We're going to review and contrast the two JavaScript frameworks and look at each possible characteristic to make sure we don't miss even a single piece of data.

In the end, I am not going to tell you which technology to choose. But I will give you enough food for thought for you to choose the technology that suits you and your project best.

1. Brief Overview

React

React is a JavaScript library for UI development. It is managed by Facebook and an open-source community of developers.

The framework was introduced in May 2013.

The latest updates were released on August 8th, 2019 – just over a month ago.

Angular

Angular is an open-sourced JavaScript framework for web and mobile development. It is TypeScript-based and managed by Google’s Angular Team and the Angular developer community.

Launched in September 2016, Angular (also known as Angular 2.0) is a complete rewrite of AngularJS (Angular 1.0), which was introduced in 2010.

There have been six versions of Angular already, and the latest release took place on August 28th, 2019 – almost three weeks ago.

2. Universality

React

React is a framework used in both web and mobile development. However, for mobile development, it needs to be incorporated with Cordova. Moreover, for mobile development, there is an additional framework – React Native.

React can be used to build both single-page and multiple-page web applications.

Angular

Angular is suitable for both web and mobile development. In mobile development, however, a great share of work is done by Ionic. Furthermore, similarly to React, Angular has an additional mobile development framework. The counterpart of React Native is NativeScript.

Angular can also be used for both single- and multiple-page web apps.

3. Self-Sufficiency

React

React is a framework for UI development, so apps written with React need additional libraries to be used. For instance, Redux, React Router, or Helmet optimize the processes of state management, routing, and interaction with the API. Such functions as data binding, component-based routing, project generation, form validation, or dependency injection require additional modules or libraries to be installed.

Angular

Angular is a full-fledged framework for software development, which usually does not require additional libraries. All the above-mentioned functions – data binding, component-based routing, project generation, form validation, and dependency injection – can be implemented with the means of Angular package.

4. Learning Curve

React

React is minimalistic: no dependency injection, no classic templates, no overly complicated features. The framework will be quite simple to understand if you already know JavaScript well.

However, it takes quite some time to learn how to set up a project because there is no predefined project structure. You also need to learn the Redux library, which is used in more than half of React applications for state management. Constant framework updates also require additional effort from the developer. Furthermore, there are quite a lot of best practices in React, which you will need to learn to do things right.

Angular

Angular itself is a huge library, and learning all the concepts associated with it will take much more time than in the case of React. Angular is more complex to understand, there is a lot of unnecessary syntax, and component management is intricate. Some complicated features are embedded into the framework core, which means that the developer cannot avoid learning and using them. Moreover, there are a lot of ways of solving a single issue.

Although TypeScript closely resembles JavaScript, it also takes some time to learn. Since the framework is constantly updated, the developer needs to put some extra learning effort.

5. Community

React

React framework is one of the most popular JS frameworks worldwide, and the community supporting and developing it is huge.

Working with React, you have to be a continuous learner since the framework is often updated. While the community tries to go forward with the latest documentation as swiftly as possible, keeping up with all the changes is not that easy. Sometimes, there may be a lack of documentation, but the issue is often solved by the community support on thematic forums.

React is actively used by such companies as Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber, and Microsoft.

Angular

Angular is less admired than React and faces a lot of skepticism, partially because of the unpopularity of Angular 1.0. Developers used to dismiss the framework as an overly complicated one as it required a lot of time to be spent learning. However, this framework has been developed by Google, which works in favor of Angular’s credibility.

Google provides the long-term support of the framework and constantly improves it. However, the updates are so fast that the documentation often falls behind.

Angular is used by such companies as McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike, and Microsoft as well.

6. Performance

React

React’s performance is greatly improved with the introduction of the virtual DOM. Since all virtual DOM trees are lightweight and built on server, the load on browser is reduced. Furthermore, since the data-binding process is unidirectional, bindings are not assigned watchers as in the case of Angular. Respectively, no additional workload is created.

Angular

Angular performs worse, especially in the case of complex and dynamic web apps.

The performance of Angular apps is negatively affected by bidirectional data-binding. Each binding is assigned a watcher to track changes, and each loop continues until all the watchers and associated values are checked. Because of this, the more bindings you have, the more watchers are created, and the more cumbersome the process becomes.

However, the most recent update of Angular has greatly improved its performance, and it does not lose to React anymore. Moreover, the size of an Angular application is slightly smaller than the size of a React app.

7. Language

React

React is based on JavaScript ES6+ combined with JSX script. JSX is an extension for syntax, which makes a JavaScript code resemble that written in HTML. This makes the code easier to understand, and typos are easier to spot. For the JSX code to be compiled in a browser, React is augmented with Babel – a code translation tool.

Angular

Angular can use JavaScript or TypeScript, which is a superset of JS developed specifically for larger projects. TypeScript is more compact than JavaScript, the code is easier to navigate, and typos are easily spotted. Code refactoring process also becomes simpler and faster.

8. App Structure

React

The structure of React provides developers with the freedom to choose. There is no “the only right structure” for a React app. However, the necessity to design the app structure at the beginning of each project makes it more difficult and longer to start.

Besides, React offers only View layer, while Model and Controller are added with the usage of other libraries.

The architecture of a React app is component-based. The code is made of React components, which are rendered with React DOM library and directed in two ways: functional (with a function that returns JSX)...

function Hello(props){
return <div>Hello {props.name}</div>
}

...and class-based (with ES6 classes).

class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}

Angular

The structure of Angular is fixed and complex, suitable for experienced developers.

Angular is based on three layers – Model, Controller, and View. An object responsible for the Model is initialized by the Controller and displayed with the View.

The application code consists of different Angular components, each being written in four separate files: a TypeScript to implement the component, an HTML file to define the view, a CSS file to define the stylistic features, and a special file for testing purposes. Links to these files are written in the app directive, which displays the structural logic of the app. Respectively, Angular components are also reusable.

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

9. UI Components

React

UI tools for React are developed by the community. There are a lot of free and paid UI components on the React portal. To use material design components in React, you would have to install an additional library – Material-UI Library & Dependencies.

Angular

Angular has a built-in Material toolset, and it offers a variety of pre-built material design components. There are various buttons, layouts, indicators, pop-ups, and form controls. Because of this, UI configuration becomes simpler and faster.

10. Directives

React

In React, templates and logic are explained in one place – at the end of the component. It allows the reader to quickly grasp the meaning of the code even if they do not know the syntax.

Angular

In Angular, each template is returned with an attribute – a directive of how the object has to be set. The syntax of Angular directives is complex and sophisticated, which makes it incomprehensible for a reader without any experience in working with this technology.

11. State Management

React

In React, each component has its own state. A React developer can create special components for holding the state of the entire application or a particular part of it. The major disadvantage here consists in the fact that the global state needs to be stored in multiple different parts of the app with data being manually passed around different component tree levels.

class Clock extends React.Component {
  constructor(props) {
    super(props);
   this.state = {date: new Date()};
 }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>Now is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

To solve this problem, there is a special state management library – Redux. The idea of it is that the global state is represented as a single stateful object, which is altered in different parts of the app with the help of reducers – special Redux functions.

Another solution is offered by the state management library MobX. Unlike Redux with the global state stored in a single immutable stateful object, MobX offers storing only the minimal required state, while the rest of it can be derived.

Angular

In Angular, component data is stored in component properties. Parent components pass data through to children ones. State changes in some parts can be identified and recalculated, but in a large app, it can cause a multi-directional tree series of updates, which will be difficult to track. The features can be improved with the help of state management libraries, such as NgRx or RxJS , which would make sure that the data flow is unidirectional.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

12. Dependency Injection

React

React does not fully support dependency injection as it does not fully comply with the idea of functional programming and data immutability. Instead, it has a global state for all components.

Angular

The greatest advantage of Angular rests in the fact that, unlike React, it supports dependency injection. Therefore, Angular allows having different lifecycles for different stores.

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
  // we declare that this service should be created
  // by the root application injector.
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}

13. Data Binding

React

Data binding stands for the data synchronization process between Model and View. React should be augmented with Redux, which allows you to work with immutable data and makes data flow unidirectional. Unidirectional binding is predictable, which facilitates the debugging process.

Angular

Angular works with bidirectional data-binding and mutable data. While the advantages of mutable and immutable data are a matter of a heated discussion, it is definitely easier to work with bidirectional data-binding rather than with the unidirectional approach. At the same time, bidirectional data-binding negatively affects the performance since Angular automatically develops a watcher for each binding.

The ways of data-binding in Angular:

{{expression}}   Interpolation
[target]="expression"    Property
bind-target="expression"    Attribute

(target)="statement" Event
on-target="statement" Event

[(target)]="expression" Two-way
bindon-target="expression" Two-way

14. Change Rendering

React

React uses a virtual Document Object Model (DOM), which enables easily implementing minor data changes in one element without updating the structure of the entire tree. The framework creates an in-memory cache of data structure, computes the changes, and efficiently updates the DOM displayed in the browser. This way, the entire page seems to be rendered on each change, whereas actually, the libraries render changed subcomponents only.

The React team is constantly improving Fiber – a mechanism aimed at boosting the productivity of change rendering.

Angular

Angular uses a real DOM, which updates the entire tree structure even when the changes have taken place in a single element. The real DOM is considered to be slower and less effective than the virtual DOM.

To compensate for this disadvantage, Angular uses change detection to identify components that need to be altered. Therefore, the real DOM on Angular performs as effectively as the virtual DOM on React.

15. Tools

React

React is supported by multiple code editors. For instance, the code in React can be edited with Sublime Text, Visual Studio, and Atom. To bootstrap a project, you can use the Create React App (CLI) tool. In turn, server-side rendering is completed with the use of Next.js framework.

To test the entire app written in React, you would need multiple tools. For instance, Enzyme for component testing, Jest for testing JS code, React-unit for unit testing and so on. To debug the app in the development mode, you can use a browser extension React Dev Tools.

Another interesting tool is React 360, which is a library used for creating AR and VR applications.

Angular

Similarly to React, Angular is supported by a variety of code editing tools. For example, you may work with such code editors as Aptana, Sublime Text, and Visual Studio. A project can be promptly set up with Angular CLI. Server-side rendering is completed with the help of Angular Universal.

Unlike React, Angular can be fully tested with a single tool. For the end-to-end testing in Angular, the platforms are Jasmine, Protractor, and Karma. Another tool that debugs the app in the development mode is a browser extension Augury.

To Wrap Up

Angular is a full-fledged mobile and web development framework. React is a framework only for UI development, which can be turned into a full-fledged solution with the help of additional libraries.

React seems simpler at first sight, and it takes less time to start working on a React project. However, that simplicity as the main advantage of React is neutralized because you have to learn to work with additional JavaScript frameworks and tools.

Angular itself is more complex and takes quite some time to master. Yet, it is a powerful tool that offers a holistic web development experience, and once you learn how to work with it, you reap the fruits.

There is no better framework. Both are updated continuously to keep up with the competitor. For instance, while React was believed to win because of its virtual DOM, Angular equaled the score by implementing change detection. While Angular was considered to be winning because of being developed by such an authoritative company as Google, the immense devoted React community fully compensated for Google's reputation and made React similar to Angular.

In the end, React vs Angular is all a matter of personal preference, a matter of skills and habits. As a beginner in programming, you would probably benefit more from starting with React. As an experienced developer, you just keep working with what you know better.

Do not forget to challenge yourself and start learning a new framework, React or Angular. As a Project Manager or a business owner outsourcing developers, you should talk to your web development team and together choose the framework that suits all of you best, whether it be Angular or React.

Do you have an idea for either an Angular or React project?

My company KeenEthics is experienced in react development, and we, also, provide outstanding agularjs developers for your projects. In case you need the following services, feel free to get in touch.

If you have enjoyed the article, you should definitely read another wonderful comparison of 2 JS frameworks: React vs Svelte: How to Build Messaging Components.

P.S.

I would like to say thank you to everyone who contributed to this article including Sergey Gornostaev and Volodya Andrushchak, full-stack software developers @ KeenEthics.

The original article posted on KeenEthics blog can be found here: Angular vs React: Which One to Choose for Your App.

Do you remember when you were learning AngularJS (version 1), and tutorials kept telling you that you don’t need to add JQuery into your project?

That hasn't changed - you don’t need to add JQuery to your Angular 2+ project. But if, for any reason, you might need to use some JavaScript libraries, you need to know how to use them in Angular. So, let’s get started from zero.

I’m going to add underscore.js to a project and show you how it works.

1. Create a new project using Angular CLI

If you don’t already have CLI installed on your machine, install it. After installation, create a new project (if you don’t already have one).

ng new learning

Now you will have a new Angular project named “learning”.

2. Install the package into your project

Go to the project we just made:

cd learning

Use your preferred package manager to install the library you’re going to use; I use npm to install underscore.js.

npm install --save underscore

3. Import the library into Angular (TypeScript)

We are writing code in TypeScript, and we should follow its rules. TypeScript needs to understand underscore.js.

As you might know, TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript has its own syntax, function and variables can have defined types. But when we are going to use an external library such as underscore, we need to declare type definitions for TypeScript.

In JavaScript, the type of arguments are not important and you will not get an error while you’re writing code. But TypeScript won’t let you to give an array to a function that accepts a string as input. Then here is the question: should we rewrite the underscore.js in TypeScript and define types there?

Of course not - TypeScript provides declaration files (*.d.ts) which define types and standardize a JavaScript file/libraries for TypeScript.

Some libraries include a typing file and you don’t need to install TypeScript’s type destination for them. But in case a library does not have a .d.ts file, you need to install it.

We just need to find and import underscore.js type definition file. I suggest that you use Type Search to find the declaration file for the libraries you need.

Search for underscore in Type Sceach and it redirects you totypes/underscore. Install the declaration file using the following command:

npm install --save @types/underscore

4. Import type declaration into Angular app

Let’s say you’re going to use underscore in your app.component.ts file. Open the app.component.ts by your IDE and add the following code in the top of the file:

import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/

The TypeScript in that component now understands _ and it easily works as expected.

Question: How to use a library which does not have type definition (*.d.ts) in TypeScript and Angular?

Create it if the src/typings.d.ts does not exist. Otherwise open it, and add your package to it:

declare var

In your TypeScript, now you need to import it by the given name:

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method();

Conclusion

To wrap up, let’s make a simple example to see a working example of _. Open app.component.ts and inside the appComponent class write a constructor which returns the last item of an array using underscore's _.last() function:

...
import * as _ from 'underscore';
...
export class AppComponent {
  constructor() {
    const myArray: number[] = [9, 1, 5];
    const lastItem: number = _.last(myArray); //Using underscore
    console.log(lastItem); //5
  }
}

If you open your Angular app now, you will get 5 in the console, which means we could correctly add underscore into our project and it’s working as expected.

You can add any JavaScript libraries to your project just by following the same steps.

You can follow me for more articles on technology and programming.

Angular is a JavaScript framework, created my Misko Hevery and maintained by Google. It’s an MVC (Model View Vontroller). You can visit the official page to learn more about it.

Right now, the latest version of Angular is 5.2.10. There is first generation 1.x and second generation 2.x, and the two generations are totally different in their structures and methods. Don’t worry if you feel confused about the version, because in this article we will be using the second generation 2.x

Table of contents

• Adding an item (learn how to submit a form in Angular )
• Removing an item (learn how to add an event in Angular)
• Angular animation (learn how animate the components )

Prerequisites:

• Node.js

Check if node.js is installed in your computer. Learn more about installation.

• npm

npm (node package manager) is installed with Node.js

Check the node.js version:

node -v

npm:

npm -v

Angular-CLI

You should have the latest version of Angular-CLI. Learn more about Angular CLI here, and find the instructions for installation.

Install Angular-cli:

npm install -g @angular/cli

And finally, you should have:

• Basic knowledge of JavaScript
• HTML and CSS fundamentals

You don’t need to have any knowledge of Angular.

Now that we have the environment to run our Angular app, let’s get started!

Creating our first app

We will use angular-cli to create and generate our components. It will generate services, router, components, and directives.

To create a new Angular project with Angular-cli, just run:

ng new my-app

The project will be generated automatically. Let’s create our to-do app!

ng new todo-app

Then, open the files in your text editor. I use Sublime text, but you can choose any editor.

Here’s what the app structure looks like:

Don’t worry if you are confused about the files. All of our work will be in the app folder. It contains five files:

Note: Angular 2 uses TypeScript, in which files end with “.ts”extension.

To make a nice interface for our app, we will use the Bootstrap 4 Framework.

Include bootstrap cdn in index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Run the app in your terminal:

ng serve

The app will run in http://localhost:4200/

All is well ?!

Now let’s do some HTML structuring. We will use Bootstrap classes to create a simple form.

app.component.html:

<div class="container"> <form>  <div class="form-group">  <h1 class="text-center text-primary">Todo App</h1>   <div class="input-group-prepend">       <input type="text" class="form-control" placeholder="Add Todo" name="todo">    <span class="input-group-text">Add</span>   </div>  </div> </form></div>

In app.component.css:

body{ padding: 0; margin: 0;

}form{ max-width: 25em; margin: 1em auto;}

To capture the input value in Angular 2, we can use the ngModel directive. You can insert a variable as an attribute inside the input element.

<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>

To create a variable as an attribute, use # followed by the variable’s name.

<input #myVariable type="text" name="text" ngModel>

// get the value of the Variable<p>{{myVariable.value}}</p>

Now get the “todo” variable value:

<p>{{todo.value}}</p>

All is well ?!

Now we have to store the value captured from the input. We can create an empty array in app.component.ts inside the AppComponent class:

export class AppComponent {  todoArray=[] }

Then we have to add a click event to our button that pushes the value captured into “todoArray”.

app.component.html:

<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>

In app.component.ts:

export class AppComponent { todoArray=[]

addTodo(value){    this.todoArray.push(value)    console.log(this.todos)  } }

Use console.log(this.todoArray) to see Array value

Fetch data from “todoArray”

Now we have to fetch data stored in “todosArray.” We will use the [*ngFor directive](https://angular.io/guide/structural-directives) to loop through the array and extract the data.

app.component.html:

<div class="data">  <ul class="list-instyled">   <li *ngFor="let todo of todoArray">{{todo}}</li>  </ul>  </div>

After fetching data:

The data will now be fetched automatically when we click the add button.

Styling the app

I like to use Google-fonts and Material-icons, which are free to use.

Include Google fonts inside app.component.css:

/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');

And Material-icons inside index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After adding some styling to our app, it will look like this:

To use Material icons:

<i class="material-icons>iconName</i>

Add “delete” and “add” icons in app.component.html:

// put add icon inside "input-group-text" div

<span class="input-group-text" (click)="addTodo(todo.value)"><i class="material-icons">add</i></span>

// and delete icon inside list item <li *ngFor="let todo of todoArray">{{todo}}<i class="material-icons">delete</i></li>

For styles in app.component.css:

/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');

body{ padding: 0; margin: 0;

}form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em;}form h1{    font-family: "Raleway";    color:#F97300; }form input[type=text]::placeholder{   font-family: "Raleway";   color:#666; }form .data{    margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{    float: right;    color: #888;    cursor: pointer;}form .input-group-text{    background: #F97300;    border-radius: 50%;    width: 5em;    height: 5em;    padding: 1em 23px;    color: #fff;    position: absolute;    right: 13px;    top: 68px;    cursor: pointer;}form .input-group-text i{    font-size: 2em;}form .form-control{ height: 3em;    font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

Our app is almost done, but we need to add some features. A delete functionality should let users click a delete icon and delete an item. It would also be great to have the option to enter a new item with the return key, instead of clicking the add button.

Deleting items

To add the delete functionality, we will use the “splice” array method and a for loop. We will loop through “todoarray” and extract the item we want to delete.

Add a (click) event to delete icon and give it “todo” as parameter :

<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>

In app.component.ts:

/*delete item*/  deleteItem(){   console.log("delete item")  }

When you click delete, this should show up in the console:

Now we have to loop through “todoArray” and splice the item we clicked.

In app.component.ts:

/*delete item*/  deleteItem(todo){   for(let i=0 ;i<= this.todoArray.length ;i++){    if(todo== this.todoArray[i]){     this.todoArray.splice(i,1)    }   }  }

The result:

Awesome ?!!

Entering to add items

We can add a submit event to the form:

(ngSubmit)="TodoSubmit()"

We need to add the variable “#todoForm” to the form and give it “ngForm” as a value. In this case, we just have one field so we will just get a single value. If we have multiple fields, the submit event will return the values of all the fields in the form.

app.component.html

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>

in app.component.ts

// submit Form  todoSubmit(value:any){ console.log(value)  }

Check the console. It will return an object of values:

So now we have to push the returned value to “todoArray”:

// submit Form  todoSubmit(value:any){     if(value!==""){    this.todoArray.push(value.todo)     //this.todoForm.reset()    }else{      alert('Field required **')    }      }

Here we are ?. The value is inserted without needing to click the add button, just by clicking “enter”:

One more thing. To reset the the form after submitting, add the “resetForm()” build-in method to submit the event.

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>

The form will reset after each submit now:

Adding animations

I like to add a little touch of animations. To add animation, import the animations components in your app.component.ts:

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

Then add the animations property to “@component” decorator:

@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'],  animations:[   trigger("moveInLeft",[      transition("void=> *",[style({transform:"translateX(300px)"}),        animate(200,keyframes([         style({transform:"translateX(300px)"}),         style({transform:"translateX(0)"})           ]))]),

transition("*=>void",[style({transform:"translateX(0px)"}),        animate(100,keyframes([         style({transform:"translateX(0px)"}),         style({transform:"translateX(300px)"})           ]))])             ])

]})

Now the items have a nice effect when they’re entered and deleted.

All the code

app.component.ts

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'],  animations:[   trigger("moveInLeft",[      transition("void=> *",[style({transform:"translateX(300px)"}),        animate(200,keyframes([         style({transform:"translateX(300px)"}),         style({transform:"translateX(0)"})           ]))]),

transition("*=>void",[style({transform:"translateX(0px)"}),        animate(100,keyframes([         style({transform:"translateX(0px)"}),         style({transform:"translateX(300px)"})           ]))])             ])

]})export class AppComponent {  todoArray=[];  todo;  //todoForm: new FormGroup()

addTodo(value){    if(value!==""){     this.todoArray.push(value)    //console.log(this.todos)   }else{    alert('Field required **')  }      }

/*delete item*/  deleteItem(todo){   for(let i=0 ;i<= this.todoArray.length ;i++){    if(todo== this.todoArray[i]){     this.todoArray.splice(i,1)    }   }  }

// submit Form  todoSubmit(value:any){     if(value!==""){    this.todoArray.push(value.todo)     //this.todoForm.reset()    }else{      alert('Field required **')    }      } }

app.component.html

<div class="container"> <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >  <div class="form-group">  <h1 class="text-center ">Todo App</h1>   <div class="input-group-prepend">       <input type="text" #todo  class="form-control" placeholder="Add Todo" name="todo" ngModel>    <span class="input-group-text" (click)="addTodo(todo.value)">    <i class="material-icons">add</i></span>   </div>  </div>  <div class="data">  <ul class="list-unstyled">   <li [@moveInLeft]  *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>  </ul> </div> </form></div>

app.component.css

/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');

body{ padding: 0; margin: 0;

}form{ max-width: 30em; margin: 4em auto; position: relative;    background: #f4f4f4;    padding: 2em 3em;    overflow: hidden;}form h1{    font-family: "Raleway";    color:#F97300; }form input[type=text]::placeholder{   font-family: "Raleway";   color:#666; }form .data{    margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{    float: right;    color: #888;    cursor: pointer;}form .input-group-text{    background: #F97300;    border-radius: 50%;    width: 5em;    height: 5em;    padding: 1em 23px;    color: #fff;    position: absolute;    right: 13px;    top: 68px;    cursor: pointer;}form .input-group-text i{    font-size: 2em;}form .form-control{ height: 3em;    font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

We are done ?. You can find the files and code on Github.

See the Demo

Conclusion

Angular is easier than you think. Angular is one of the best JavaScript libraries, and it has great support and a nice community. It also has tools that make working with Angular fast and easy, like Angular-cli.

Subscribe to this mail-list to learn more about Angular.

SaidHayani@ (@hayanisaid1995) | Twitter
_The latest Tweets from SaidHayani@ (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…_twitter.com

Here are some of the best online courses to learn Angular for free:

Angular 1.x

• Shaping with Angular
• Learn Angular

Angular 2.x (recommended)

• learn Angular2 (coursetro)
• YouTube playlist

This article originally appeared on dormoshe.io

Many of us use the Hierarchical Dependency Injection mechanism of Angular. We use it through a service or a component to resolve another service or provider. But, do we know what Angular does in order to resolve the dependencies? Probably not, because Angular takes care of what we need to use it as a black box.

In this article, we’ll open the black box and explore the code of the component dependencies resolution mechanism.

Back to the basics

Dependency Injection (DI) is a powerful pattern for managing code dependencies. Angular’s DI system creates and delivers dependent services “just-in-time”. Angular has its own DI framework, and we can’t build an Angular application without it.

The Angular DI system is actually a Hierarchical system. This system supports nested injectors in parallel with the component tree. An injector creates dependencies using providers. We can reconfigure the injectors at any level of that component tree. Behind the scenes, each component sets up its own injector with zero, one, or more providers defined for that component itself.

A mini Angular injectors tree

Resolution Order

The hierarchical DI has an order to the resolution of the dependencies. When a component requests a dependency, if it exists in the @Component.providers array (the component injector), then this dependency will be supplied.

Elsewhere, Angular continues to the parent component injector and checks again and again. If Angular doesn’t find an ancestor, it will supply this dependency via the application main injector. This is the core concept of the hierarchical DI mechanism.

Let’s see the code

When Angular instantiates a component, it calls the resolveDep function. This function's signature contains the component view container, the element, the dependency definition and some more arguments. We will focus on the component view and the dependency object. The dependency object contains only one dependency of the component.

Here is the resolveDep function skeleton from the Angular GitHub repository:

The function skeleton contains the main concepts of the resolution, without the edge cases. The full code can be found here. In the next parts, we will explore the function skeleton.

Pausa

The Exclamation mark is a new feature of Typescript 2.0. The ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact. Angular uses this feature frequently, so we should not be afraid.

Part 1 — Preparation

The const startView = view; code saves the original view (the view container of the component) in a variable because the view variable will change soon.

The const tokenKey = depDef.tokenKey; code fetches the tokenKey or the dependency key, for example, HeroService_4. This key builds by the dependency name and a generated number to handle the dependency uniquely.

Part 2 —Source component and Ancestors search

The while loop implements the stages of checking the source @Component.providers and the ancestor components.
According to the dependency token key, the source component providers will be checked in lines 1–3:

If the provider exists on line 4, then the source component satisfies the dependency. So, if the dependency was instantiated in the past on line 6, the instance will return by the resolveDep function at line 10. If this is the first time that the component or its children ask for the dependency it will be created at line 7 and will return by the resolveDep function at line 10.

If the dependency is not found in the view component injector, the
elDef = viewParentEl(view) !; and view = view.parent !; will be called to advance the variable to the parent element. The while loop will continue running until the dependency is found in the ancestor injector. If the dependency is still not found after checking all ancestors, the while loop will end and the third part will come into action.

Part 3 — Root injector

If come to this part, the dependency can’t be satisfied by any of the component ancestors injectors. Then the startView or the source component will be checked at line 1:

If the source component or one of its ancestor components was loaded by the Router Outlet (the router component), the root injector is the Outlet Injector. This injector supplies some dependencies like the Router service. Otherwise, the root injector is the bootstrap component’s injector.

If the dependency is found at line 3, then the value will be returned by the resolveDep function. In the other case, part 4 will come into action.

Part 4 — Application module injector

When we come to this part, it means that the dependency can’t be satisfied by part 2 and part 3. This is the last chance to satisfy the dependency. This part’s code tries to get the dependency from the application module injector or the root module. This module contains the application-wide dependencies:
return startView.root.ngModule.injector.get(depDef.token,notFoundValue);

This part finishes the resolveDep flow. If the dependency is not found, then Angular can’t satisfy this dependency and it should throw an exception.

Conclusion

The Hierarchical DI is a core feature that Angular leans on a lot. Sometimes, the resolution process looks complicated and long. It’s very convenient to leave Angular to manage this flow and enjoy the ease of use. Now, after we hiked in the backyard of the component dependency resolution, we know what to expect when we use it.

You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.

It’s public knowledge that Google uses a single repository to share code — all 2 billion lines of it — and that it uses the trunk-based development paradigm.

_This is easily one of the largest single code repositories in the world. [Source](http://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext" rel="noopener" target="blank" title=").

For many developers outside the company, this is surprising and counterintuitive, but it works really well. (The article linked above gives good examples, so I won’t repeat them here.)

Google’s codebase is shared by more than 25,000 Google software developers from dozens of offices in countries around the world. On a typical workday, they commit 16,000 changes to the codebase. (source)

This article is about the specifics of building an open source web framework (AngularDart) in this context.

_‘Human users’ means software engineers committing code at Google. (As opposed to source generation tools.) [Source](http://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext" rel="noopener" target="blank" title=").

Only one version

When you employ trunk-based development in a single huge repo, you have only one version of everything. That’s kind of obvious. It’s still good to point it out here, though, because it means that — at Google — you can’t have app FooBar that’s using AngularDart 2.2.1 and another app BarFoo that’s on 2.3.0. Both apps must be on the same version — the latest one.

_Illustrative image taken from [trunkbaseddevelopment.com](https://trunkbaseddevelopment.com/" rel="noopener" target="blank" title=").

That’s why Googlers sometimes say that all software at Google lives on the bleeding edge.

If your entire soul screams ‘dangerous!’ right now, that’s understandable. Depending on the trunk (‘master’ in git terminology) of a library with your production code sure sounds dangerous. But there’s a plot twist ahead.

74 thousand tests per commit

AngularDart defines 1601 tests (here). But when you’re committing a change to AngularDart code in the Google repository, it also runs tests for everyone at Google who depends on the framework. At the moment, that’s about 74 thousand tests (depending on how big your change is — a heuristic skips tests that the system knows you’re not affecting).

It’s good to have more tests.

I just made a change that only manifests itself 5% of the time, simulating something like a race condition in the change detection reinsertion verification algorithm (I added && random.nextDouble() > .05 to this if statement). It did not manifest in any of the 1601 tests when I ran them (once). But it did break a bunch of client tests.

The real value here, though, is that those are tests of actual apps. Not only are they numerous, they’re also reflecting how the framework is used by developers (not just the framework authors). This is significant: framework owners don’t always correctly estimate how their framework is being used.

It also helps that those apps are in production, and billions of dollars flow through them each month. There’s a big difference between demo apps that a framework author puts together in his spare time, and real production apps with tens or hundreds of person-years invested in them. If the web is to be relevant in the future, we need to better support development of the latter.

So what happens if the framework breaks some of the apps that are built on it?

You break it, you fix it

When AngularDart authors want to introduce a breaking change, they have to go and fix it for their users. Since everything at Google lives in a single repo, it’s trivial to find out whom they’re breaking, and they can start fixing right away.

Any breaking change to AngularDart also includes all the fixes to that change in all the Google apps that depend on it. So the breakage and the fix go into the repo simultaneously and — of course — after proper code review by all affected parties.

Let’s give a concrete example. When someone from the AngularDart team makes a change that affects code in the AdWords app, they go to that app’s source code and fix it. They can run AdWords’ existing tests in the process, and they can add new ones. Then, they put all of that into their change list and ask for review. Since their change list touches code in both the AngularDart repo and the AdWords repo, the system automatically requires code review approval from both of those teams. Only then can the change be submitted.

This has the obvious effect of preventing framework development in a vacuum. AngularDart framework developers have access to millions of lines of code that are built with their platform, and they regularly touch that code themselves. They don’t need to assume how their framework is used. (The obvious caveat is that they only see the Google code and not the code of all the Workivas, Wrikes and StableKernels of the world that also use AngularDart.)

Having to upgrade your users’ code also slows development down. Not as much as you may think (look at AngularDart’s progress since October), but it still slows things down. That’s both good and bad, depending on what you want from a framework. We’ll get back to that.

Anyway. The next time someone at Google says that an alpha version of some library is stable and in production, now you know why.

Large scale changes

What if AngularDart needs to make a major breaking change (say, going from 2.x to 3.0) and that change breaks 74 thousand tests? Will the team go and fix all of them? Will they make changes to thousands of source files, most of which they haven’t authored?

Yes.

One of the cool things about having a sound type system is that your tooling can be much more useful. In sound Dart, tools can be sure that a variable is of a certain type, for example. For refactoring, that means that many changes can be completely automatic, with no need of confirmation from the developer.

When a method on class Foo changes from bar() to baz(), you can create a tool that goes through the entirety of the single Google repository, finds all instances of that Foo class and its subclasses, and changes all mentions of bar() to baz(). With Dart’s sound type system, you can be sure this won’t break anything. Without sound types, even such a simple change can get you in trouble.

_One keystroke and your code is formatted according to Dart [style guide](https://www.dartlang.org/guides/language/effective-dart/style#formatting" rel="noopener" target="_blank" title="). In fact, the guide states: “The official whitespace-handling rules for Dart are whatever dart_style produces.”_

Another thing that helps with large scale changes is dart_style, Dart’s default formatter. All Dart code at Google is formatted using this tool. By the time your code reaches reviewers, it has been auto-formatted using dart_style, so there are no arguments about whether to put the newline here or there. And that applies to large scale refactors as well.

Performance metrics

As I said above, AngularDart benefits from its dependents’ tests. But it’s not just tests. Google is very rigorous about measuring performance of its apps, and so most (all?) production apps have benchmark suites.

So when the AngularDart team introduces a change that makes AdWords 1% slower to load, they know before landing the change. When the team said in October that AngularDart apps got 40% smaller and 10% faster since August, they were not talking about some synthetic tiny TodoMVC example apps. They were talking about real-life, mission-critical, production apps with millions of users and megabytes of business logic code.

Side note: Hermetic build tool

You may be wondering: how did this guy know which tests in the huge internal repository to run after introducing the flaky bug in AngularDart? Surely he wasn’t hand-picking the 74 thousand tests, and just as surely he wasn’t running all the tests at Google. The answer lies in something called Bazel.

At this scale, you can’t have a series of shell scripts to build stuff. Things would be flaky and prohibitively slow. What you need is a hermetic build tool.

“Hermetic” in this context is very similar to “pure” in the context of functions. Your build steps cannot have side effects (like temp files, changes to PATH etc.), and they must be deterministic (same input always leads to the same output). When that’s the case, you can run the builds and the tests on any machine at any time and you’ll get consistent output. You don’t need to make clean. You can therefore send your builds/tests to build servers and parallelize them.

Google has spent years developing such a build tool. It was open sourced last year as Bazel.

And thanks to this piece of infrastructure, internal testing tools can determine which builds/tests each change affects, and run them when appropriate.

What does it all mean?

AngularDart’s explicit goal is to be best-in-class in productivity, performance and dependability for building large web applications. This post hopefully covers the last part — dependability — and why it’s important that mission-critical Google apps like AdWords and AdSense are using the framework. It’s not just the team boasting about their users — as explained above, having large internal users makes AngularDart less likely to introduce superficial changes. It makes the framework more dependable.

_If this all sounds too business-y, you could check out my decidedly-non-business AngularDart projects like [Prime Finder](https://filiph.github.io/markov/" rel="noopener" target="_blank" title="">Automatic Donald Trump (Markov chain) or <a href="https://filiph.github.io/prime_finder/" rel="noopener" target="blank" title=").

If you’re looking for a framework that makes major overhauls and introduces major features every few months, AngularDart is definitely not for you. Even if the team wanted to build the framework in such a way, I think it’s clear from this article that they couldn’t. We sincerely believe, though, that there is space for a framework that is less trendy but dependable.

In my opinion, the best prediction of long-term support of an open-source tech stack is that it’s a big part of the primary maintainer’s business. Take Android, dagger, MySQL, or git as examples. That’s why I’m glad that Dart finally has one preferred web framework (AngularDart), one preferred component library (AngularDart Components) and one preferred mobile framework (Flutter) — all of which are used to build business-critical Google apps.

[Matan Lurey and Kathy Walrath contributed to this article.]

_[Discuss on Reddit, HN, Twitter.]_

UPDATE: The code in this article has been updated to Angular Final. We also assume that you’re using the latest Angular CLI.

Any serious Web application requires some sort of authentication feature. In this blog post, we’ll set up this feature for an Angular application using Firebase, thanks to the official AngularFire2 library.

Create a new Firebase project

Before using Firebase with our application, we need to create a new project in our Firebase developer console:

Firebase Developer Console

To use the Firebase Authentication feature, we need to enable the sign-in providers we want to use in our project. In our case, we’re going to use Google, Facebook, Twitter and Github to log in our users.

You can find the Authentication page in: Your App → Auth → SIGN-IN METHOD:

Some providers, such as Facebook, Twitter and Github, require you to provide an App/Client/API ID and App/Client/API secret keys, and use the given OAuth URI as the redirect URI:

In order to obtain this information, you will need to create one application for each provider using your developer account of each service (Github, Facebook and Twitter).

Configure your services

Github Application Settings

For Github, go to your developer settings, and register a new application.

Use your application Client ID and Client Secret in your Firebase configuration page.

You also need to fill in the Authorization callback URL using the OAuth URI from Firebase.

Twitter Application Settings

For Twitter, go to your Application Management settings, and create a new application.

Use your application API key and API Secret in your Firebase configuration page.

You also need to fill in the Callback URL (in the Settings tab) using the OAuth URI from Firebase.

Facebook Developer Console

Finally, for Facebook, go to your developer apps home page, and click on the “Add New App” green button at the upper-right corner.

Use your App ID and App Secret in your Firebase configuration page.

You also need to add a new Web platform. Click on +Add platform at the bottom of the page—and fill in the Site URL with the redirect URI from Firebase (i.e. OAuth URI).

Now you are ready to use Google, Twitter, Github and Facebook as your authentication providers for your web application.

Use AngularFire in your application

For the next step, I’m going to use an Angular application I scaffolded thanks to the official Angular CLI.

In this application, I’m going to use the Authentication providers we just set up in the previous step.

Here’s what the application looks like:

Clicking on a button will call a specific provider, authenticate the user, and get their information:

User logged in using github.com

Install and setup angularfire2

First things first, we need to install the firebase and angularfire2 libraries:

$ npm install angularfire2 firebase --save

Then we need to install Firebase types:

$ npm install @types/firebase

And add those types to your src/tsconfig.json file:

{  "compilerOptions": {    "declaration": false,    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "lib": ["es6", "dom"],    "mapRoot": "./",    "module": "es6",    "moduleResolution": "node",    "outDir": "../dist/out-tsc",    "sourceMap": true,    "target": "es5",    "typeRoots": [      "../node_modules/@types"    ],    "types": [      "jasmine",      "firebase",      "node"    ]  }}

A more detailed setup process is described in the official docs.

Configure AngularFire for your Application

In order to use Firebase with Angular, we need to provide some configuration for the AngularFire services.

Let’s start with the default Firebase configuration which looks like this:

defaultFirebase({  apiKey: "AIzaSyCk3weREVFpOIN6pL_QVVNFRl3C3keMIRU",  authDomain: "angular2-auth.firebaseapp.com",  databaseURL: "https://angular2-auth.firebaseio.com",  storageBucket: "angular2-auth.appspot.com"})

Note: Don’t worry about this exposed apiKey. This key is only used to identify the different services of your project: a kind of project identifier.

You can get your Firebase apiKey, projectId, databaseName, and bucket ID from your application dashboard.

Click on the WEB SETUP button in the top-right corner:

Next, for our use case, we want to provide a default authentication method:

firebaseAuthConfig({  method: AuthMethods.Popup})

Here, we choose to use a Popup to allow the user to log in. We could also use a Redirect method like this:

firebaseAuthConfig({  method: AuthMethods.Redirect})

Let’s now create a CoreModule in src/app/core.module.ts where we will put our configuration. It is best practice to group core dependencies in a separate NgModule named CoreModule. Here is an example of such module:

import { BrowserModule } from '@angular/platform-browser';import { HttpModule } from '@angular/http';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import {   AngularFireModule,   AuthMethods,   AuthProviders } from "angularfire2";

const firebaseConfig = {  apiKey: "AIzaSyCk3weREVFpOIN6pL_QVVNFRl3C3keMIRU",  authDomain: "angular2-auth.firebaseapp.com",  databaseURL: "https://angular2-auth.firebaseio.com",  storageBucket: "angular2-auth.appspot.com"};

@NgModule({  imports: [    BrowserModule,    FormsModule,    HttpModule,    AngularFireModule.initializeApp(firebaseConfig,{      provider: AuthProviders.Google,      method: AuthMethods.Popup    })  ],  exports: [    BrowserModule,  ]})export class CoreModule {}

Using it in your components

Now we’re finally ready to implement the authentication feature for our Angular application.

We need to inject the AngularFire service in the component’s constructor:

import { Component } from '@angular/core';import { AngularFire, AuthProviders } from 'angularfire2';

@Component({  moduleId: module.id,  selector: 'app-root',  templateUrl: 'app.component.html',  styleUrls: ['app.component.css']})export class AppComponent {  user = {};

  constructor(    public af: AngularFire  ) {    this.af.auth.subscribe(user => {      if(user) {        // user logged in        this.user = user;      }      else {        // user not logged in        this.user = {};      }    });  }}

In a real world application, you would create a separate service that handles authentication. Think SRP and DRY. But for this tutorial, we will keep it simple.

The AngularFire service gives us the auth property which implements the Observable API. So that means we need to subscribe to this auth property in order to get the authentication state. A NULL value means the user is not logged in.

Let’s add a couple of buttons in the component’s view:

<button md-raised-button (click)="login()">  <img width="30" src="google-logo.png" />Use My Google Account</button><button md-raised-button (click)="logout()">  Logout</button>

We will use those buttons to log in and log out, using the Google provider as an example.

In app.component.ts, we need to implement the login() and logout() methods:

login() {  this.af.auth.login({    provider: AuthProviders.Google  });} logout() {  this.af.auth.logout();}

To log a user in, we call the this.af.auth.login() method using the Google provider, and this.af.auth.logout() to log a user out.

The AngulareFire login() usually needs an authentication method. In our case, it will use the default method (i.e. AuthMethods.Popup) we set up in the bootstrap phase.

If you need to override the authentication method when calling the login() method, just provide a new auth configuration:

login() {  this.af.auth.login({    provider: AuthProviders.Google,    method: AuthMethods.Redirect  });}

Once everything is setup and working correctly, we can inspect the user object containing all the user’s session tokens sent by Google (the authentication provider):

You can get the user’s information such the displayName and the photoURL form the auth.provideData entry.

That’s it! Your users can now log in using their Google accounts.

You can add Github and Facebook in much the same way.

See the complete working application hosted on Firebase or read the complete source code on Github.

NOTE: I’m in the process of migration this repo to Angular final (see branch). This process is pending because of this issue in AngularFire2.

manekinekko/angular-firebase-authentication
_angular-firebase-authentication - An angular demoing Firebase Authentication providers_github.com

Tips & References

Follow @manekinekko to learn more about the web platform.