Take this

Software Development / Web Development

Learning Angular 2 Directives

Learn how to build efficient Angular 2 directives with this fast and interactive guide


About This Video

  • Get started with developing successful, real-world Angular 2 directives in no time
  • Get to know about the modular web and how Angular 2 embraces this new emerging pattern
  • Learn to use all the Angular 2 components through this book's practical and easy-to-understand approach

In Detail

Get up to speed with the building blocks of Angular 2. New technologies and new patterns are emerging on a daily basis. Coding for the front end is extremely demanding, but at the same time more interesting and challenging than ever before. This highly dynamic ecosystem provides huge possibilities to create awesome things.

Learning Angular 2 Directives helps you get on track by introducing you to Google’s brand new Angular 2 web framework. In this video course, you will be guided through the various steps in building real-world Angular 2 components.

We will start by setting up a modern development environment with TypeScript and ES2015 support, and you'll gain an initial understanding of what components are about, how to build them, and how they differ from the directives. We then focus on applying new concepts while building a fictitious dashboard application for a home automation system.

We'll guide you through the process of building reusable Angular 2 components. You will learn about HTML rendering templates, see how to establish a data flow between different components, and even find out how to integrate external libraries. But not only that, we will also focus on how to make our components production-ready and maintainable by applying automated unit and end-to-end testing techniques. As a bonus, you will discover how to bring your Angular 2 components to other environments such as the server side and mobile devices.

Learning Angular 2 Directives is your go-to guide when building successful Angular 2 components.

Full details


  • Getting Started
    The Course Overview
    This video will provide an overview of the entire course.
    Project Setup
    The viewer doesn’t yet have a good understanding of ES6 and TypeScript, which makes it hard for him to read and understand Angular 2 code. Thus, we go over the fundamental features and we’ll take a look at our development setup, on top of which we build our application. • Understand Transpilers and the role they play in the modern developer’s workflow, what TypeScript is, and what it does. • Learn the fundamental features about ES6 • Understand how the ES6/TypeScript code is transpiled by SystemJS and loaded into the browser
    All About Components
    Current approaches in componentization and reusability on the web frontend have some undesirable side effects. This video shows the user what the potential problems are and how modern methodologies such as WebComponents and Angular aim at tackling them. • Explain a plain jQuery plugin/component • Introduce WebComponents by translating the jQuery plugin into a web component, and show how the previously mentioned issues are solved with it. • Finally, show how Angular approaches these issues by following a web component such as approach
  • Angular 2 – Scratching the Surface
    Upgrading from Angular 1.x
    Many people already have huge Angular 1.x applications. In the long run people will want to upgrade in order to benefit from Angular 2’s new features. This video shows some possible upgrade paths and measures that should be taken. • Follow the Angular 1 Style Guide, and then refactor controllers into directives. • Add TypeScript for ES6 support and SystemJS for module loading • Use UpgradeAdapter to allow Angular 1 and Angular 2 apps to run side by side
    Hello, Angular 2
    How do we write Angular 2 components? In this video, we’ll get a first grasp of it. • Create a simple HTML file • Define the hello-angular Angular 2 Component using Angular 2 annotations • Create a bootstrap file, import your component, and “bootstrap” the Angular 2 app.
    Feeding Our Component with Data
    Commonly, our components interact with the outside by having data flow in and out. This video demonstrates how to realize that data flow. • We prepare our original hello-angular component to accept input data • Use @Input to define a new input property and then render its value • Learn about @Output and EventEmitter to have data flow back out of the component through events
  • HomeAuto – First Screens
    Decomposing and Building Application Foundation
    We identify components on a static HTML page representing our app layout. • We decompose the UI into components, following an iterative workflow. • We apply a common naming convention and folder to structure on our new components • We identify components on a static HTML page representing our app layout
    Scanning for New Sensors
    Inject an external dependency into a component and render its data using the Angular template syntax. • Create a component with an HTML template • Iterate over a dataset using built-in Angular directives • Inject an external class that provides the data and register it as a provider for the component
    Creating a General Purpose Filter
    How to use pipes to filter data? And how to establish a data flow and communication between different components? • Identify the feature of filtering the list of sensors and how pipes can solve it • Implement a pipe that filters the data using user-defined arguments • Implement a UI for the filter and learn how to connect that filter, pipe, and list component through events and direct binding.
  • Building Reusable Modals
    Selecting and Configuring a New Sensor
    Develop a modal dialog, style it via dedicated component properties, and establish two-way data binding with the passed data. • Create a component and apply styles to it via the styles property • We use ngModel to bind data onto our component's template • Connect the new component with the other components and establish the data flow
    Making the Modal Generally Reusable
    Currently, our modal dialog solution is not reusable for different use cases. We will solve this problem in this video. • Identify the reusable part • Extract it and apply the newly learned <ng-content> concept • Move the component into the proper folder and also add keystroke detection support
    Attribute Directives to the Help
    Learn about the difference between components and directives. • Explain how to augment the functionality of a button with directives and declare the API • We use @Directive to build our directive and explain the differences to component, and so on. • We use @HostListener to complete our directive implementation and see it running.
  • Building Up Our Dashboard
    Creating a Dashboard Widget
    Learn how to interact with child content that is projected in a <ng-content> region. • Create a widget and a tabbed component consisting of <tabs> and child <tab> components • Make use of the @ContentChildren decorator to get an instance of all child components • Interact with the list of child components in the ngAfterContentInit() lifecycle event
    Integrating an External Library – Data Visualization with D3
    Learn how to best integrate external, third-party libraries and make them work with Angular 2. • Import/install the external library through npm • Use ElementRef to get access to the native DOM element and build the D3 visualization • Use the ngOnChanges event to update the chart whenever our data changes
    Ready for production – Bundling and Minification
    Minify, bundle, and deploy an app in production. • Show Angular CLI initiative and show the importance of tooling • Introduce angular2-seed by Minko Gechev • Introduce angular2-webpack-starter as a possible alternative based on webpack
  • Maintaining Components
    Unit Testing Angular 2 Components
    Writing a unit test for our Angular 2 component. • Learn about the setup with Karma and Jasmine • Introduce TestComponentBuilder and ComponentFixture • Write some tests involving testing the component API and the changes in the template
    Debugging (with Batarangle)
    Learn how to debug the current state of our application to gain better insight. • Introduce Batarangle • Show how to enable Angular 2 ELEMENT_PROBE_PROVIDERS • Demo Batarangle and show how to use ng.probe even on the Devtools console
    e2e Testing Angular 2 Components
    Learn how to automate the detection of malfunctioning software. • Introduce the concept of e2e tests and Protractor • Learn how to configure Protractor for the angular2-seed project • Write some e2e tests to demonstrate how it works
  • Show Me More!
    Angular 2 Goes Mobile with Ionic 2
    Learn how to build hybrid mobile apps with Angular 2. • Create an Ionic 2 setup • Show how to reuse the dashboard widget on the mobile app Build as Android and iOS application
    Going Universal with Angular 2
    Pre-rendering Angular 2 applications on the server. • Introduce the angular universal library • Showcase the angular universal-starter application • Explain how server-side rendering works on the demo example and highlight some potentia


  • AngularJS

Similar Courses

More Courses by this Instructor