Angular Table Filter Component

Angular Table Filter Component

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

Angular Styles Vs StyleUrls

Angular Styles Vs StyleUrls

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

How To Use An Interface In Angular

How To Use An Interface In Angular

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

Angular Pipes And Data Binding

angular pipes and data binding

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

Angular Structural Directives

Angular Structural Directives

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