7. Explaining Pipes and Communicating with RESTful Services | Getting Started with Angular - Second edition

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Getting Started with Angular - Second edition

By : Minko Gechev

Getting Started with Angular - Second edition

By: Minko Gechev

Overview of this book

Want to build quick and robust web applications with Angular? This book is the quickest way to get to grips with Angular and take advantage of all its new features.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Get Going with Angular

1. Get Going with Angular

Angular and semver

The evolution of the Web - time for a new framework

The evolution of ECMAScript

Lessons learned from AngularJS in the wild

Summary

2. The Building Blocks of an Angular Application

2. The Building Blocks of an Angular Application

A conceptual overview of Angular

Changing directives

Getting to know Angular components

Angular modules

Pipes

Improving change detection

Services

The new router

Summary

3. TypeScript Crash Course

3. TypeScript Crash Course

Introduction to TypeScript

Using TypeScript

TypeScript syntax and features introduced by ES2015 and ES2016

Meta-programming with ES2016 decorators

Writing modular code with ES2015

ES2015 module loader

ES2015 and ES2016 recap

Taking advantage of static typing

Further expressiveness with TypeScript decorators

Writing generic code by using type parameters

Writing less verbose code with TypeScript's type inference

Using ambient type definitions

Summary

4. Getting Started with Angular Components and Directives

4. Getting Started with Angular Components and Directives

The "Hello world!" application in Angular

Using TypeScript

Playing with Angular and TypeScript

Using Angular directives

Improved semantics of the directives syntax

Defining Angular directives

Creating custom Angular components

Explaining Angular's content projection

Hooking into the component's life cycle

Defining generic views with TemplateRef

Understanding and enhancing the change detection

Summary

5. Dependency Injection in Angular

5. Dependency Injection in Angular

Why do I need DI?

DI in Angular

Configuring an injector

Defining factories for instantiating services

Child injectors and visibility

Summary

6. Working with the Angular Router and Forms

6. Working with the Angular Router and Forms

Developing the "Coders repository" application

Exploring the Angular router

Using Angular's forms module

Two-way data binding with Angular

Storing the form data

Listing all the stored data

Summary

7. Explaining Pipes and Communicating with RESTful Services

7. Explaining Pipes and Communicating with RESTful Services

Developing model-driven forms in Angular

Exploring the HTTP module of Angular

Defining parameterized views

Defining nested routes

Transforming data with pipes

Summary

8. Tooling and Development Experience

8. Tooling and Development Experience

Running an application in a Web Worker

Initial load of a SPA

Enhancing our development experience

Angular quick starters

AoT compilation in Angular

Summary

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Transforming data with pipes

It is time to take a look at the last building block that Angular provides for the development of applications that we haven't covered in detail yet-the pipes.

Just like the filters in AngularJS, pipes are intended to encapsulate all the data transformation logic. Let's take a look at the template of the home page of the application we have just developed:

... 
<td [ngSwitch]="dev.popular"> 
  <span *ngSwitchCase="true">Yes</span> 
  <span *ngSwitchCase="false">Not yet</span> 
</td> 
...

In the preceding snippet, depending on the value of the popular property, we show different data using the NgSwitch and NgSwitchCase directives. Although this works, it is redundant.

Developing stateless pipes

Let's develop a pipe that transforms the value of the popular property and uses it in place of NgSwitch and NgSwitchCase. The pipe will accept three arguments: a value that should be transformed, a string that...

Search

Your notes and bookmarks