From the course: Angular Essential Training (2019)

Directives and pipes - Angular Tutorial

From the course: Angular Essential Training (2019)

Start my 1-month free trial

Directives and pipes

- [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, like 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 stringer 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 embed the transform logic within component classes and without having to modify the data just for display purposes.

Contents