Angular 11: Directives & Pipes

IN THIS COURSE

• 1.  Course Overview
  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
• 2.  Adding Logic to Components Using "ngIf"
  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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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