In this tutorial, we’ll continue to build our games viewer application and add new features as we go. We’re going to look at how we can use property data binding to set image properties in our component, then use them in the template to display an image for each game. From there we’ll use event binding to allow the user to click a button which will make the image disappear and then reappear.…

When building a user interface using Angular, we need a valid template defined either inline, or in a dedicated html file. The template itself is created using html, and in order to give that html special powers, Angular data binding and directives are used. Angular makes it easier to build out these user interfaces since data binding provides for dynamic data to be displayed and events allow the Angular application to respond appropriately to user actions.…

In this tutorial we’ll learn about how Angular bootstraps an application to get running. This happens by a combination of the root module and the root component working together. The root component is the very first component that is referenced and hosted in the main index.html web page. Everything else in Angular builds off of this root, so it helps to take a close look at how this root component works.…

We want the user to be able to take an action, and cause something to happen on the page. Users will enter text into input boxes, pick items from lists and click buttons. These types of user actions result in a flow of data from an element to a component. Listening for certain events such as keystrokes, mouse movements, and clicks are done with Angular event binding.…

Data-binding in AngularJS is quite similar to other popular libraries like React and Vue. It is the automatic synchronization of data between the model and view components. With this approach, the developer treats the model as the single-source-of-truth in the application. The view will always act as a projection of the model. This way, if the model changes, the view updates automatically, and vice versa. In this tutorial, we’ll see a few examples of how data binding in Angular works.…