In this video, learn about directives and pipes, two constructs in Angular that allow you to add functionality and transform DOM, as well as how to modify content for display.
- [Instructor] In Angular a component is actually a directive with a template. Directives provide functionality and can transform the DOM. There are two types of directives, structural and attribute. Structural directives modify layout by altering elements in the DOM. Attribute directives change the behavior or appearance of an existing DOM element. Since directives do not have a template they are something you can create with the intent of applying them to an existing element, or in some cases a template element, to change that element in some way. Like a component, a directive gets configured with a selector that Angular will use to find a match and apply the directive. You apply a directive in different ways. You can write an attribute on an element that matches your selector, or you can use the template syntax to add a directive and an assignment statement. In addition to creating your own directives Angular comes with a number of directives out of the box to handle common web app constructs by conditionally rendering elements based on some expression, looping out items to render, or even for things like router links. Another tool in the Angular toolbox to display content is the pipe. A pipe takes in data, like a string or an array, and runs some logic to transform it to a new output. Angular comes with some common pipes like date, and uppercase and lowercase. You can also write your own pipes to handle custom scenarios that fit your application needs. Pipes are a great way to change data in a reusable way without having to imbed the transformed logic within component classes. And without having to modify the data just for display purposes.
- What is Angular?
- Working with components
- Binding events and properties
- Getting data to components
- Using directives and pipes
- Creating Angular forms
- Validating form data
- How Angular does dependency injection
- Making HTTP calls
- Styling components
Skill Level Intermediate
Angular: Building an Interfacewith Ray Villalobos2h 20m Intermediate
1. Architecture Overview
3. Directives and Pipes
5. Dependency Injection and Services
8. Styling Components
Next steps1m 20s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.