Angular – Transform Data with Pipes

Introduction We use pipe for transforming bound properties before displaying them in a view. Angular provides us with few built-in pipes e.g. date, number, decimal, percent, currency, json etc. This time, we want to build our own custom pipe. Use Case Build a custom pipe which replaces ‘-‘ character with a space ‘ ‘. It … Read more

Angular – Wrapping Third-party libraries

Introduction It is very common in web applications that we’ll want to use third-party libraries or components. Let’s see how we can take something like that and turn it into an injectable service in Angular. If you are new to angular, you can check previous posts for the background information. toastr For demo, we’ll use … Read more

Angular – Nested Components

Introduction Components are building blocks of angular applications. Splitting the functionality in smaller components is something very common in angular applications development. In this post we will learn about nested components and discover how to establish communication between nested component and its container component using two useful angular directives @Input and @Output. We’ll be using … Read more

Angular – Working with Data

Introduction In previous posts, we’ve started with angular basics and created an angular application. We learned that an Angular application is an interaction of the following Angular artifacts ComponentsServicesDirectivesPipesModules We’ll continue our learning and today we’ll see few more examples. We’ll learn about angular services and then use the service in component to work with … Read more

Angular – New Application Basics

Introduction In previous post, we started with Angular basics and setup an angular application. Today, we’ll continue our learning with some more angular basics such as components, and simple data binding with HTML elements. Components Modules Modules provide a way to organize our application. Every Angular application must have a “root module”, which is required … Read more

Angular – Creating a New App

Introduction Angular is a framework for dynamic web applications. It provides a way to organize your HTML, JavaScript and CSS to keep your front-end code clean. An Angular app is an interaction of the following Angular artifacts In this post, we will create a very simple angular application using angular-cli. Steps Install npm Install Angular … Read more