Book Image

Switching to Angular - Third Edition

By : Minko Gechev
Book Image

Switching to Angular - Third Edition

By: Minko Gechev

Overview of this book

Align your work to stable APIs of Angular, version 5 and beyond, with Angular expert Minko Gechev. Angular is the modern Google framework for you to build high-performance, SEO-friendly, and robust web applications. Switching to Angular, Third Edition, shows you how you can align your current and future development with Google's long-term vision for Angular. Gechev shares his expert knowledge and community involvement to give you the clarity you need to confidently switch to Angular and stable APIs. Minko Gechev helps you get to grips with Angular with an overview of the framework, and understand the long-term building blocks of Google's web framework. Gechev then gives you the lowdown on TypeScript with a crash course, so you can take advantage of Angular in its native, statically typed environment. You'll next move on to see how to use Angular dependency injection, plus how Angular router and forms, and Angular pipes, are designed to work for your projects today and in the future. You'll be aligned with the vision and techniques of the one Angular, and be ready to start building quick and efficient Angular applications. You'll know how to take advantage of the latest Angular features and the core, stable APIs you can depend on. You'll be ready to confidently plan your future with the Angular framework.
Table of Contents (10 chapters)

Using NgModules for declaring reusable components

With NgModules, we can achieve a good degree of encapsulation. By explicitly exporting the public components, directives, pipes, and services, we can hide some of the implementation details of our modules. This way, we can implement reusable modules and expose only their public interface, and we do not reveal any low-level components to the user of the module.

In order to get a better idea, let's take a look at the following example:

@Component(...)
class ZippyHeader {
  @Input() header: string;
}

@Component(...)
class Zippy {
  @Input() header: string;
  visible = true;
}

@Component(...)
class App {}

In the preceding snippet, we declare the Zippy, ZippyHeader, and App components. Zippy is a component that has a header and a content; we can toggle the visibility of the content by clicking on the header. In the ZippyHeader...