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

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