So far we only have one view in our little Angular application. Of course we are going to want to have more options for the user to visit different views for different information and experiences. Just like we have links on basic web pages, we can also set up links in an Angular application to navigate to various views. It is via the routing functionality provided in Angular that we can set up various routes to various sets of information.…
To fetch data in Angular, we can use Observables with http to fetch data. An angular application will use http via a GET request to fetch data from a back-end server. The back-end could be powered by any number of server-side technologies such as Java, PHP, Python, or even server-side JavaScript in the form of Node.js. An http response is sent from the back-end web service to the client side angular application.…
Services in Angular are used to define data and logic that is not associated with a particular view which can be shared across components. In this tutorial we’ll learn how to create a service, and then make use of dependency injection to use that service in a given component or class. If you have worked with dependency injection in any other object-oriented programming language, you’ll feel right at home.…
In this tutorial we’ll look at nested components in Angular and how to use them. Why nest components? It helps to organize the layout of the user interface in addition to allowing specific functionality to be packaged up and re used in other components. This means that a nested component is going to need a way to communicate with its parent or containing component. Components can nest several times if you like.…
One way you might consider filtering the games is by using a Pipe. In this scenario, you would have to build your own custom pipe since Angular does not have a filtering or sorting Pipe built-in. Using a custom pipe might be ok for small amounts of data only, since generally these types of pipes are not high performing. Instead of using a Pipe, it might be better to move the filtering logic into the component itself.…
When building templates for components in an Angular application, you are likely going to want the ability to style that specific component with CSS styles without effecting other components. A given template is often going to need a unique style. For example, if you build a special footer component, you might want to style hyperlinks with a style different from the rest of the application. In the case of having nested components, there are a couple of ways to apply styles to the nested component with no leakage to other components.…
Since Angular leverages Typescript, developers can make use of strong typing. This is a big help during development, since your IDE will help catch errors before even building the application. That way, you can fix issues as soon as the IDE gives a notification that something went awry. Taking this concept one step further is the use of Interfaces. Although JavaScript itself does not have Interfaces, Typescript does.…
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.…