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