Directives

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: structural directives modify layout by altering elements in the DOM.
• Attribute: attribute directives change the behavior or appearance of an existing DOM element.

Since directives do not have a template, there's 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.

@Decorator({
    selector: 'thisSelector'
})

You'll apply a directive in different ways. You can write an attribute on an element that matches your selector,

<div thisSelector>
    <img src="a_image.png">
</div>

or you can use the template syntax to add a directive in an assignment statement.

<div [thisSelector="true"]>
    <img src="a_image.png">
</div>

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.

Pipe

Another tool in the Angular tool box to display content is the Pipe

. A pipe takes in data, like a stringer in a ray and runs some logic to transform it to a new output.

Angular comes with some common pipes, like date and upper case and lower case. 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.