Angular (directives, pipes, bindings)

Directives

class that attaches to an existing DOM elements and modifies appearance , behavior, or adjacent elements structure.

uses decorator— @ Directive

Directives:

  • components
  • *structural directives

designed to change DOM layout by adding or removing DOM elements.

The asterisk (*) prefix *ngIf —in example above its same as if hero is true than display the name same is with for loop:

switch:

and etc…

  • [attribute directives]

designed to modify appearance or behavior of an element

@ Component — directives add behavior to an existing DOM element or an existing component instance, on the other hand @component creates its own hierarchy of DOM elements with attached behavior.

NgModel

DIRECTIVE

Creates a FormControl instance from a domain model and binds it to a form control element.

property binding []

Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.

event binding ()

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Two way binding [()]

Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.

Two-way binding combines property binding with event binding:

Pipes

uses @Pipe decorator

class that allows changing data inside of a template.

what are pipes?

for example if we want to output date

javascript:

Angular

General syntax looks like this

chaining pipes

it will transform string ‘Angular’ like this -> ‘Angular’ -> ‘ular’ -> ‘ULAR’

This is how we would use it in a code:

there are two types of pipes pure and impure

pure pipes

default

angular executes pure pipes only when it detects a pure change o the input value. a pure change is either primitive input value or changed object reference

  • primitive input value — String, Number, Boolean, Symbol
  • changed object reference — function,object,date,array

impure pipe

Angular executes impure pipe during every component change detection cycle.

an impure pipe will be called a lot, as often as every keystroke or mouse-move

bonus :

https://angular.io/api/core/Directive

https://angular.io/guide/attribute-directives

https://angular.io/guide/structural-directives

https://angular.io/api/core/Pipe

https://angular.io/guide/pipes

https://angular.io/api/common

--

--

--

Recommended from Medium

Javascript Console API.

Javascript Console API By Rajdeep Singh

Login and Registration Using JWT, Express, and MySQL

A HTML Designer Framework Component for WebComponents

First Step into JavaScript — Part 2

Uploading files to EC2 via SFTP using Node

7 newsletters to stay current about JavaScript

Using the useHistory Hook to Redirect After a Fetch Request in React

Rerouting City Diagram

Creating a dynamic inline editable table in React — Part 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nata chikhinashvili

Nata chikhinashvili

More from Medium

Angular Features

Angular ( ngModule, observables)

What’s new with Angular 13

Angular in a Nutshell