Template Syntax, Directives, & Pipes

Angular    |    Intermediate
  • 19 videos | 1h 8m 54s
  • Includes Assessment
  • Earns a Badge
Rating 4.5 of 6 users Rating 4.5 of 6 users (6)
Angular includes a template syntax and built-in directives and pipes that can be used when creating apps. Learn how to work with these built-in features, and how to create custom directives and pipes based on app requirements.

WHAT YOU WILL LEARN

  • Set single classes on elements in angular 2 using a class binding
    Set simple inline styles on elements in angualr 2 using style bindings
    Modify html layour using templates
    Avoid null and undefined values in properties and property paths
    Set multple classes on elements using ngclass
    Toggle element rendering based on set conditions
    Set muliple styles on elements using using ngstyle
    Display one element tree from a set of multiple
    Present multliple elements in a concise way
  • Use the ngfor directive along with an index value
    Optimize ngfor performance by providing a tracking function
    Create and use a custom directive
    Easily convert text case of a string
    Easily display data in a json format
    Easily display data in either an appropriate currency format or an appropriate
    Easily display data as it arrives asynchronously
    Easily display formatted dates using the date pipe and display substrings or subsets using the slice pipe
    Create and use a custom pipe

IN THIS COURSE

  • 5m 29s
    In this video, you will learn how to set single classes on elements in Angular 2 using a class binding. FREE ACCESS
  • 2m 32s
    In this video, find out how to set simple inline styles on elements in Angular 2 using style bindings. FREE ACCESS
  • Locked
    3.  Working with * and <template>
    2m 20s
    In this video, you will modify HTML layout using templates. FREE ACCESS
  • Locked
    4.  Using the safe navigation operator
    3m 36s
    In this video, find out how to avoid null and undefined values in properties and property paths. FREE ACCESS
  • Locked
    5.  Using the ngClass directive
    3m 43s
    During this video, you will learn how to set multiple classes on elements using ngClass. FREE ACCESS
  • Locked
    6.  Using the ngIf directive
    3m 8s
    In this video, find out how to toggle element rendering based on conditions that you set. FREE ACCESS
  • Locked
    7.  Using the ngStyle directive
    4m 3s
    In this video, you will learn how to set multiple styles on elements using ngStyle. FREE ACCESS
  • Locked
    8.  Using the ngSwitch directive
    4m 40s
    Find out how to display one element tree from a set of multiple. FREE ACCESS
  • Locked
    9.  Using the ngFor directive
    3m 52s
    In this video, you will learn how to present multiple elements in a concise way. FREE ACCESS
  • Locked
    10.  Using ngFor with Index
    3m 2s
    Find out how to use the ngFor directive with an index value. FREE ACCESS
  • Locked
    11.  Using ngFor with TrackBy
    4m 28s
    During this video, you will learn how to optimize the performance of ngFor by providing a tracking function. FREE ACCESS
  • Locked
    12.  Creating Custom Directives
    5m 44s
    In this video, you will learn how to create and use a custom directive. FREE ACCESS
  • Locked
    13.  Using the Uppercase and Lowercase pipe
    2m 18s
    In this video, you will learn how to easily convert the text case of a string. FREE ACCESS
  • Locked
    14.  Using the JSON pipe
    2m 19s
    In this video, you will learn how to easily display data in a JSON format. FREE ACCESS
  • Locked
    15.  Using the Currency and Percentage pipes
    2m 48s
    In this video, you will learn how to easily display data in either an appropriate currency format or an appropriate format. FREE ACCESS
  • Locked
    16.  Using the Async pipe
    3m 23s
    In this video, you will learn how to easily display data as it arrives asynchronously. FREE ACCESS
  • Locked
    17.  Using the Date and Slice pipes
    3m 59s
    In this video, learn how to easily display formatted dates using the date pipe and display substrings or subsets using the slice pipe. FREE ACCESS
  • Locked
    18.  Creating a custom pipe
    4m 29s
    In this video, you will learn how to create and use a custom pipe. FREE ACCESS
  • Locked
    19.  Exercise: Using a Angular 2 custom pipe
    3m

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Course Angular 11: Working With Nested Components
Rating 4.4 of 94 users Rating 4.4 of 94 users (94)
Course Angular 11: Working With Forms
Rating 4.5 of 73 users Rating 4.5 of 73 users (73)
Book Pro Angular: Build Powerful and Dynamic Web Apps, Fifth Edition