Book Image

Mastering Angular Components - Second Edition

By : Gion Kunz
Book Image

Mastering Angular Components - Second Edition

By: Gion Kunz

Overview of this book

Mastering Angular Components will help you learn how to invent, build, and manage shared and reusable components for your web projects. Angular components are an integral part of any Angular app and are responsible for performing specific tasks in controlling the user interface. Complete with detailed explanations of essential concepts and practical examples, the book begins by helping you build basic layout components, along with developing a fully functional task-management application using Angular. You’ll then learn how to create layout components and build clean data and state architecture for your application. The book will even help you understand component-based routing and create components that render Scalable Vector Graphics (SVG). Toward the concluding chapters, you’ll be able to visualize data using the third-party library Chartist and create a plugin architecture using Angular components. By the end of this book, you will have mastered the component-based architecture in Angular and have the skills you need to build modern and clean user interfaces.
Table of Contents (12 chapters)

Summary

In this chapter, we learned about the basic concepts of the router in Angular. We looked at how we can use the existing component tree to configure child routes in nested-router scenarios. We have learned about the router outlet element and the basic router link directive.

We have refactored our existing navigation elements, such as the project navigation and the tabbed interface on the project view. We've used router links and programmatic navigation to fulfil different navigation scenarios.

We looked into some common route configuration specifics and the basics of the router link DSL. We've also learned about route matching patterns as well as parameter placeholders and how to access these parameters in activated routes.

Last but not least, we've created a simple guard which prevents our users from accessing project details with invalid project IDs.

In...