Angular 11: Directives & Pipes

Angular    |    Beginner
  • 10 videos | 37m 44s
  • Includes Assessment
  • Earns a Badge
Rating 4.4 of 134 users Rating 4.4 of 134 users (134)
Angular helps build interactive and dynamic single-page applications (SPAs) and is a technology that is highly in demand among experienced developers who want to move into full-stack development. Use this course to gain a better understanding of directives and pipes in Angular 11. Examine the use of conditional operators, array iteration through complex objects, and the concept of pagination. This course will also help you discover the functionality of sorting data, the use of built-in pipes and custom pipes, and how to filter a list of data as per user search input. Upon completing this course, you'll have the skills to implement directives and pipes using Angular for full-stack development.


  • Discover the key concepts covered in this course
    Use conditional operators in components and render html content
    Iterate a list of arrays and display array items in the user interface (ui)
    Perform iteration on complex objects and render employee details from an employee array
    Define pagination, render data on the front-end, and implementing pagination in the application
  • Sort data in a given list and display an updated sorted list of data
    Explain the concept of pipes in angular and the use of built-in pipes
    Create and implement custom pipes in angular
    Perform higher-order functions, filter data from a list, and update listed data based on user input
    Summarize the key concepts covered in this course


  • 1m 11s
    Here, you’ll learn about your instructor and this course. In this course, you’ll learn about ngIf, ng4, and other conditional operators. You’ll also explore iterating over data in an array and other complex objects. You'll consider pagination, sorting, and pipes. You’ll also take a look at building a custom pipe. Finally, you’ll look at filtering data in Angular. FREE ACCESS
  • 2m 25s
    Here, you'll take a look at adding logic to your components. You'll be looking at ngIf and ngFor. Angular offers two kinds of built-in directives, attribute directives and structural directives. Both ngIf and ngFor are structural directives. They allow you to perform conditional rendering of templates. They also evaluate the condition to decide whether that HTML component is part of the structure or not. FREE ACCESS
  • Locked
    3.  Iterating Arrays with "ngFor"
    3m 20s
    Here, you’ll watch a demo. In this demonstration, you’ll iterate over a collection, an array in this case. On your screen, you’ll see a boilerplate application using ng new. You’ll now switch over to Visual Studio Code to look at the product component. This is the only component that's inside of this boilerplate application at the moment. First, you’ll insert an array. FREE ACCESS
  • Locked
    4.  Iterating through Complex Objects
    3m 28s
    In this demo, you’ll build a complex object. Then, you'll iterate over that object to display the values that are part of that object. Onscreen, you’ll see a boilerplate application using ng new. You’ll then switch over to the Visual Studio code that shows the component with its selector template. Next, you’ll create a complex object. FREE ACCESS
  • Locked
    5.  Implementing Pagination in Angular
    8m 23s
    In this demonstration, you’ll learn more about the topic of pagination. Onscreen, you’ll see the boilerplate application you’ve been using throughout the series. You’ll switch over to Visual Studio Code. Now in Visual Studio Code, you’ll see the component file opened. This is a file with a template, a selector, and just one line of code. FREE ACCESS
  • Locked
    6.  Sorting List Data with Angular
    4m 14s
    In this demonstration, you’ll learn more about sorting in Angular. Onscreen, you’ll see the boilerplate application you’ve been using throughout this series. You’ll notice these numbers are not in any kind of order. You’ll click on the Visual Studio Code icon to go into Visual Studio Code. You’ll see the typescript file product.component.ts. You’ll see an external JavaScript file on the left side of Visual Studio Code. FREE ACCESS
  • Locked
    7.  Built-in Pipes in Angular
    2m 39s
    Here, you’ll learn about pipes in Angular. Pipes are functions, they accept data and they return data. But all of that data is transformed in some way. Pipes can be thought of as your formatting for currency, dates, and other types of data you need to transform in some way. They can be used throughout the application once you declare them. You’ll declare them in one place and use them in any component. FREE ACCESS
  • Locked
    8.  Creating Custom Pipes in Angular
    5m 25s
    In this demonstration, you’ll build a custom pipe and implement it into your application. Onscreen, you’ll see an application using ng new. You’ll see there’s now an external JavaScript file that generates 100 random numbers. You also see a component called product component onscreen now. Now, you’ll switch over to Visual Studio. FREE ACCESS
  • Locked
    9.  Filtering Data in Angular
    4m 46s
    In this demonstration, you’ll learn about filtering data using a higher-order function. Onscreen, you’ll see an application created using ng new. What you're looking at on the screen right now is the pagination of100 numbers. You’ll move from one page to another, and see ten numbers at a time. They're all randomly generated. Now you’ll add a filter to those numbers. FREE ACCESS
  • Locked
    10.  Course Summary
    1m 53s
    Here, you’ll summarize what you’ve learned in this course. You learned more about Angular components. You started by looking at nglf and ngFor. You also iterated through a complex object. A complex object is like a JavaScript object, it does have a name and a value. You also learned about implementing pagination in Angular. For that, you installed an external package called ngx-pagination. FREE ACCESS


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.


Rating 4.6 of 198 users Rating 4.6 of 198 users (198)
Rating 4.5 of 86 users Rating 4.5 of 86 users (86)


Rating 4.3 of 85 users Rating 4.3 of 85 users (85)
Rating 4.5 of 64 users Rating 4.5 of 64 users (64)
Rating 3.7 of 53 users Rating 3.7 of 53 users (53)