Angular 2 Template Syntax, Directives, and Pipes

Developers who want to learn how to use Angular 2 to create web apps


Expected Duration
76 minutes

Angular comes with a template syntax, as well as some built-in directives and pipes that you can use as part of creating apps. This course will cover those built-in features as well as describe how to create custom directives and pipes based on app requirements.


Angular Template Syntax

  • start the course
  • set single classes on elements in Angular 2 using a class binding
  • set simple inline styles on elements in Angular 2 using style bindings
  • avoid null and undefined values in properties and property paths

Angular Built-in Directives

  • set multiple classes on elements using ngClass
  • toggle element rendering based on set conditions
  • set multiple styles on elements using ngStyle
  • display one element tree from a set of multiple possible trees
  • present multiple elements in a concise way
  • use the ngFor directive along with an index value
  • optimize ngFor performance by providing a tracking function
  • modify html layout using templates
  • create and use a custom attribute directive

Angular Pipes

  • easily convert text case of a string
  • easily display data in a JSON format
  • easily display data in an appropriate currency format
  • slice strings and lists before display in Angular apps
  • easily display formatted dates using the date pipe and display substrings or subsets using the slice pipe
  • create and use a custom pipe

Practice: Creating Angular 2 Pipes

  • create and use a custom pipe in an Angular 2 application





Multi-license discounts available for Annual and Monthly subscriptions.