Download "Angular Advanced. Урок 1. Пользовательские директивы и компоненты"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: Методологии управления проектами. SDLC – цикл разработки программного обеспечения. Урок 1 Next video: Глава 3 (3.3). Семь раз отмерь, один раз отрежь: предварительные условия. Книга "Совершенный код"

0:54

План урока

1:13

Директивы

34:29

Фильтры (Pipes)

Глава 3 (3.3). Семь раз отмерь, один раз отрежь: предварительные условия. Книга "Совершенный код"

Глава 3 (3.3). Семь раз отмерь, один раз отрежь: предварительные условия. Книга "Совершенный код"

Методологии управления проектами. SDLC – цикл разработки программного обеспечения. Урок 1

Методологии управления проектами. SDLC – цикл разработки программного обеспечения. Урок 1

Тестирование API

Тестирование API

Python Starter. Урок 3. Условные конструкции.

Python Starter. Урок 3. Условные конструкции.

Ruby Essential. Урок 2. Базовые типы данных. Работа с числами

Ruby Essential. Урок 2. Базовые типы данных. Работа с числами

Создание многопоточного клиент-серверного приложения на Java

Создание многопоточного клиент-серверного приложения на Java

Python Essential. Урок 1. Введение в ООП Python

Python Essential. Урок 1. Введение в ООП Python

CyberBionic

ITVDN

программирование

курсы программирования

Microsoft

Framework

.net

Angular Advanced

angular

angular 2

angular урок

angular уроки

angular курс

Пользовательские директивы

компоненты

cyberbionic systematics

00:00:00

[music]

00:00:07

good afternoon my name is Dmitry Akhremenko

00:00:09

I am glad to welcome you to the

00:00:10

informational video resources for

00:00:12

developers these are introduced daughter how we

00:00:15

are starting a new

00:00:16

angular advensd course which consists of

00:00:18

four lessons the first lesson is

00:00:21

custom directives and pipes and in the

00:00:23

second lesson we will look at the use of

00:00:25

forms more advanced topics compared

00:00:28

to the previous course nkrs angel

00:00:31

3 lesson reactive programming and

00:00:34

using the rx library pps and the

00:00:37

fourth lesson will be devoted to

00:00:38

tracking changes and

00:00:41

performance issues the first lesson of the course is

00:00:45

dedicated to custom directives and pipes, that

00:00:48

is, creating custom directives

00:00:50

and bytes or filters this lesson consists

00:00:54

of In the beginning of the following parts, we will

00:00:55

have to look at the creation of attribute

00:00:58

directives; let us look at examples of

00:01:00

using structural directives and

00:01:02

learn how to create custom

00:01:04

filters or pipes, and since they are

00:01:07

called in the documentation, directives in the

00:01:13

cooler are something that the html

00:01:15

templates of our application cannot do without; in essence, the

00:01:17

directive represents ourselves a marker

00:01:19

that we hang on a certain node

00:01:22

tree house this marker determines what

00:01:25

will happen with this house tree node the

00:01:27

directive can add new behavior

00:01:29

the directive can change the structure of the

00:01:32

house tree node by adding new elements or

00:01:35

deleting the node on which the

00:01:38

directive hangs, at its core the directive

00:01:40

represents itself is just a set of

00:01:42

instructions that are attached to the

00:01:44

desired element and do something with this

00:01:47

element, either change the behavior

00:01:49

or change the structure, the directive

00:01:54

is actually an ordinary component

00:01:56

that does not have a template stove, that is,

00:01:58

there is no representation,

00:02:00

so technically creating a directive and

00:02:03

working as a directive in an angular project you

00:02:06

will work with a component with

00:02:08

reduced functionality; it

00:02:10

develops a directive like

00:02:12

most other elements; a

00:02:14

project engineer; we will create a class; we will

00:02:16

add metadata for this class;

00:02:19

we can divide all directives into two

00:02:21

categories;

00:02:22

these are built-in directives that

00:02:24

the framework provides; these are

00:02:25

custom ones, which we developed

00:02:27

independently and, in turn, everything These

00:02:31

directives are divided into two classes:

00:02:32

attributive, which adds behavior

00:02:35

or changes the design of certain

00:02:38

markup nodes, and structural, which,

00:02:42

when created, requires specifying a template and

00:02:45

ultimately

00:02:47

changes the structure of the current document using this template

00:02:50

by adding and removing

00:02:53

markup from the page,

00:02:56

creating a new directive, we will have to

00:02:58

define a class

00:03:00

in this case this class will have to be

00:03:03

decorated with metadata of directives in

00:03:05

which the important point is the

00:03:07

selector selector these are css rules with the

00:03:10

help of which it will be determined how

00:03:13

angular will find elements in the

00:03:16

markup for which

00:03:18

the directive will be applied, for example, if we create a

00:03:21

selector may color in square brackets

00:03:23

this will mean that all elements

00:03:26

which have the May color attribute

00:03:29

will have to be processed by the given

00:03:32

directive. The second important part of the directive

00:03:35

is the constructor, which through dependency

00:03:37

injection should receive two parameters, the

00:03:39

first parameter is kilometers, with its help

00:03:42

we can access the

00:03:45

house tree node to which the directive was

00:03:47

applied, this will give us the opportunity

00:03:49

somehow manipulate this node and such a

00:03:53

data type as the renderer of the second version,

00:03:56

which will give us the opportunity to

00:03:58

manipulate the markup to change the

00:04:00

state or structure of the house tree.

00:04:04

In the first example, we will look at the

00:04:07

simplest directive that can be

00:04:09

defined in an angular project, and

00:04:11

most other elements of applications,

00:04:13

the directive should be placed in a separate

00:04:15

file and name this file

00:04:17

accordingly to the directive, we

00:04:19

called it may color, so the file in which the

00:04:22

directive is located

00:04:24

is called mayfair only with a dash,

00:04:26

since the file contains a directive, the

00:04:29

file name contains the

00:04:31

words yes and roar type, defining that

00:04:33

the directive is located here, we

00:04:35

name the components in the same way pipe and other parts of

00:04:38

our application, describing the

00:04:40

directive itself, we define a class and

00:04:42

decorate it with metadata, we

00:04:45

need to apply the directive and the main

00:04:48

property that needs to be specified is its

00:04:50

metadata doric div is a

00:04:53

selector property describing the

00:04:55

css rule through which

00:04:57

the search for markup elements

00:05:00

that will be served by this

00:05:02

directive will be carried out in our case we

00:05:05

set the sector properties in square

00:05:07

brackets with the

00:05:08

phrase may color if you know the principles of

00:05:12

using such css the selector of this

00:05:15

sector must find subtract all markings

00:05:17

all elements that have the

00:05:20

mykala attribute all these elements that

00:05:21

will be found will have to

00:05:24

change the constructors and methods

00:05:26

that are described below for now our directive is

00:05:29

very simple, here there is only a constructor,

00:05:31

but in the following examples we will look at how

00:05:33

to make more complex directives with

00:05:35

more functionality,

00:05:36

more functionality, when we

00:05:39

describe the directive itself, then for the directive to work,

00:05:41

we will need a constructor

00:05:43

with at least two parameters, the

00:05:45

first parameter defines a link to the

00:05:48

element on which the directive is has now been

00:05:51

installed,

00:05:52

our directive is called mykala,

00:05:54

if we open the html file of the code of the current

00:05:58

example, we see that

00:06:00

there are two paragraphs in the markup and the first

00:06:02

paragraph has the mykala directive set to

00:06:04

as an attribute, that’s exactly

00:06:08

the presence of this attribute

00:06:10

and the presence of this selector, so

00:06:14

angular will apply for of our paragraph

00:06:16

this directive and at the same time the first

00:06:19

argument that we will receive through

00:06:21

dependency injection will be just a

00:06:23

link to this paragraph in the house tree a

00:06:26

link to this element the

00:06:27

second parameter we

00:06:29

will get is renderer 2 this data type

00:06:32

allows us to change the

00:06:34

house elements add new ones delete do

00:06:36

not change them properties,

00:06:39

using this interface, we will

00:06:41

manipulate the house tree, what we

00:06:43

do inside the constructor itself, we

00:06:46

access render.ru,

00:06:48

we access the set style method, call

00:06:51

it and specify three parameters, the first

00:06:53

parameter is

00:06:54

what we want to set the style of, which

00:06:57

element we need to replace, we take

00:06:59

LMDF

00:07:00

and take find flamant exactly that each of

00:07:03

them all living open is in

00:07:05

the markup we indicate that we are changing the color as

00:07:08

if we are changing it to green if we

00:07:11

run this application then we will see

00:07:12

that the first paragraph has become green the second

00:07:15

paragraph has become unchanged I have already

00:07:18

executed the engineers command in the

00:07:22

visual terminal studio application was successfully

00:07:24

compiled and this is what our

00:07:28

first example looks like: a simple directive changed

00:07:31

the color of the paragraph to green, while the

00:07:34

second paragraph remained unchanged when

00:07:38

developing the directive, we will

00:07:41

often have to react to events of the

00:07:43

house of elements in order to

00:07:45

use the event model of the house of the

00:07:48

element and process the event in the

00:07:50

directive we we can use a special

00:07:52

decorator move and sinner

00:07:54

in the second example on the size page

00:07:58

divs are placed and each div has an

00:08:01

attribute may event each of this attribute

00:08:04

perform the following task when hovering the

00:08:07

cursor over def changes the text of the div

00:08:11

to red when the cursor goes

00:08:13

beyond the div the color changes to

00:08:16

initially to initial to default

00:08:19

it turns out that the task of this directive is

00:08:21

to process two mouse events entering the

00:08:26

div area and leaving it, here is

00:08:31

our second example, point to chlorine lt

00:08:33

color changes to red was point to

00:08:36

another div our previous div changes

00:08:40

color to default in order to receive

00:08:45

directives with this behavior,

00:08:46

we need to make the following

00:08:48

changes in the code of the directive, in addition to the

00:08:53

types that we imported in the previous

00:08:55

example, we add another type like

00:08:57

hustle sinner, it acts as a

00:08:59

decorator, defining hots lysander,

00:09:03

decorating hots with lesnar, we are methods,

00:09:06

methods that should become

00:09:08

event handlers, we are interested in

00:09:11

on this element of the mouseenter event

00:09:14

and the little drain event, we create two

00:09:17

methods, decorate these methods with the hustle

00:09:20

sinner attribute decorator and specify

00:09:24

as a parameter the name of the event on

00:09:26

which the method will become a handler when the

00:09:29

mouseenter event occurs, we

00:09:31

will launch our change color method by passing

00:09:34

it the

00:09:35

red method than the scales turns to

00:09:38

render.ru which we received through

00:09:40

injection and changes the style of the element

00:09:43

color changes to the one that was received

00:09:46

through the arguments when the

00:09:48

mouse lion event occurred, we

00:09:51

will run the method it is small drain which

00:09:53

will cause cinch colors to the parameters cash

00:09:56

accordingly changed the value to

00:09:58

full to black except for processing events, the

00:10:03

directive very often needs

00:10:06

information information that we usually

00:10:08

transfer from that part of the application in

00:10:10

which directives begin

00:10:12

to be used. Now we see in

00:10:16

the markup 2 directives and two different

00:10:18

options for passing information to the directive 1

00:10:21

div using the Mike Lara

00:10:23

Chenchik directive with the value ed since ed is

00:10:26

directly the value Let's specify which

00:10:29

directive we want to use, then we don't

00:10:31

use a square bracket about

00:10:32

the value here, we just pass it to the directive so

00:10:35

that the it directive

00:10:36

can use the value. In the

00:10:38

second case, our directive will

00:10:40

use the car and color properties; these

00:10:43

properties are defined at the

00:10:44

component level, here is our caring color property

00:10:48

on event new he and no this property

00:10:51

changes its value to green and

00:10:53

accordingly here we cannot

00:10:55

leave the carat color just like that

00:10:58

because in this case it will be

00:10:59

perceived as the value of the caring color

00:11:01

we need to pull out the target green

00:11:04

which is in the properties so

00:11:06

here we are already we use square

00:11:08

brackets to perform

00:11:09

data binding so that the directive

00:11:12

can read the information that we

00:11:14

pass it like this, the directive

00:11:17

must have the following structure to the

00:11:19

directive

00:11:20

we must define an input property

00:11:23

which, in fact, will be

00:11:24

initialized from the markup, our

00:11:27

directive uses the selector may color

00:11:29

change exactly we used such attributes

00:11:32

in the markup, but we also set a value for

00:11:35

this attribute when using the directive,

00:11:37

so in the

00:11:40

directive itself we need to

00:11:43

define the properties that will

00:11:45

use the same name Mike Doctors

00:11:48

the name corresponding to the selector properties in the

00:11:53

code is called by some

00:11:55

name convenient for you in our case to

00:11:58

change color but thanks to this

00:12:01

input and the input parameter, and in the markup when

00:12:04

using the property we will

00:12:07

use mykala high and low,

00:12:08

which will allow us to

00:12:11

immediately set the attribute to a value that will go into

00:12:13

this property, the property

00:12:14

itself works as

00:12:16

in the previous examples

00:12:17

based on the render and methods and style

00:12:20

changes the appearance of the element,

00:12:25

let's look at how the

00:12:28

third example works, the first element became

00:12:30

red, the second element became green, and

00:12:37

data binding was used to obtain color data. In the fourth example, we will see an even

00:12:41

more advanced Marie Pit directive.

00:12:43

The task of this directives a certain

00:12:45

number of times in the user

00:12:47

interface you see a message while the

00:12:51

may ripit can be applied in two

00:12:54

ways either through an

00:12:55

attribute as done on the first line

00:12:58

or using an element as done

00:13:01

on the fifth line and the directive

00:13:03

works exactly the same if we

00:13:05

run this example then We will see that the

00:13:07

first time we used a div with a

00:13:10

directive we had 10

00:13:12

messages displayed the second time 2 messages were

00:13:15

displayed its 5 messages

00:13:16

10 5 and the number of messages

00:13:20

besides the fact that the directive can be

00:13:22

used in two different ways

00:13:24

also the directive takes two separate

00:13:27

values and the title then the parameter meat whose

00:13:29

count parameter let's see how

00:13:32

the directive is organized in such a way that

00:13:34

we can apply it in two different

00:13:37

ways in the markup in order for

00:13:39

this behavior to appear in the

00:13:42

directive selector, we need to indicate, separated by commas,

00:13:43

the rules under which the

00:13:47

elements used by this

00:13:50

directive fall, that is, all elements with

00:13:52

attributes rips all the elements that

00:13:54

are my ripit separate t and mary

00:13:56

pete they will have to be processed by

00:13:59

this class

00:14:00

since we want to receive from

00:14:02

use two parameters of

00:14:04

the account message we create two properties

00:14:06

we decorate these properties with ken puts since

00:14:10

you can see we did not set any

00:14:12

parameters in these decorators then,

00:14:14

accordingly, in the markup of the property, the

00:14:16

accounts of the properties of a message will be

00:14:18

called that way and the attributes that we will

00:14:21

set the value for them will

00:14:23

carry the account; we did not change the constructor,

00:14:25

as in the previous examples, it

00:14:27

receives two arguments and

00:14:30

there are no Indiana events, we use the previously

00:14:32

received values for this to

00:14:34

generate markup here we will use

00:14:37

this directive and not just change

00:14:38

the behavior of some element, we will

00:14:41

generate new

00:14:42

elements there, perhaps this is incorrect

00:14:44

because attribute directives you

00:14:46

must change the behavior and how the

00:14:49

appearance of the element and structural directives

00:14:51

add something to the house tree

00:14:53

but Since this example

00:14:55

primarily demonstrates the use of

00:14:57

selectors and several parameters,

00:14:59

here we slightly violate the rules and

00:15:05

use the structural directive, the attribute directive as if it

00:15:06

were structural, in order to

00:15:08

generate the house elements, we use the

00:15:11

renderer using the create element method

00:15:14

as parameters we indicate that it is

00:15:16

we who generate, create a new dev,

00:15:19

we add this created div to the element on

00:15:23

which the directive hangs, we do this

00:15:26

using the same render and the

00:15:28

append child method and add line 20 to

00:15:32

our give in range tml so that where

00:15:34

you have

00:15:35

the text that will be displayed

00:15:37

to the user When creating directives and

00:15:40

manipulating the tree house, never

00:15:42

manipulate the tree house directly through

00:15:44

these lma and since you can

00:15:46

make a mistake and your application may

00:15:50

be unsafe if you work

00:15:52

directly with the tree house elements,

00:15:54

work in the tree house special

00:15:57

classes that add an additional

00:15:59

level of abstraction and protect yours saved us

00:16:02

from errors by the following directive, we will see

00:16:07

how you can forward methods from one

00:16:10

of one component to a

00:16:12

directive so that these

00:16:15

methods can be used there

00:16:16

on the same directive that we are considering

00:16:19

will consist in the following directive

00:16:22

will play the role of a handler for

00:16:25

click events but before calling a method

00:16:27

associated with book events will ask the

00:16:30

user if he really wants to

00:16:31

run this method. For example, we

00:16:34

will have such an improvised form

00:16:36

supposedly here we are editing

00:16:39

user accounts and a button that

00:16:42

deletes a user account, this

00:16:44

button should

00:16:45

omit the method, it divides the mettaton ticket

00:16:47

is with us in the code of the component and it

00:16:49

simply enters a message on the console stating

00:16:51

that the method was launched,

00:16:53

but we bind this method to the button not

00:16:56

using event binding, not

00:16:59

using parentheses [ __ ], but

00:17:01

using our Micon for directives,

00:17:05

let's see how our application works

00:17:09

we open the console, click on the delete button, we

00:17:15

get a message about whether we are sure that we are

00:17:18

going to want to

00:17:21

run the delete method, we press

00:17:24

consul and no messages are displayed in the console,

00:17:26

if we click delete and press ok, a

00:17:29

message appears in the console and there is a message

00:17:32

that says that the method in the

00:17:34

component was launched, let's see

00:17:39

how the code of the directive is organized, our

00:17:44

directive, as always, uses

00:17:47

selector and in order to get the data

00:17:49

that will be available to users in our

00:17:52

case, this function we use the

00:17:55

comfort properties but decorate it

00:17:58

input on with the same the name of both ours and the

00:18:01

selector so that in the markup we don’t

00:18:03

have to separately set the

00:18:05

attribute for the directive to separately

00:18:07

stop the attribute that we will

00:18:09

fill in the value of this property it

00:18:12

confirms it confirm is a function

00:18:15

that accepts nothing more precisely it does not

00:18:18

accept and returns nothing in fact this is the

00:18:22

function ours initially is just a

00:18:25

dummy, here is a method that has

00:18:27

no implementation,

00:18:29

then on the eleventh line we create a

00:18:32

method called confirm and

00:18:36

this method is decorated

00:18:38

using a hustle synar on the click event, it

00:18:43

turns out the element on which the

00:18:45

directive data will be located will, when

00:18:48

clicked, launch

00:18:50

it with sweets but at the same time, in this method we

00:18:52

will check

00:18:54

whether users agree with the call of

00:18:57

this method, we will launch a standard

00:18:59

office window, we will receive the result from the user,

00:19:03

if this result is a corpse,

00:19:06

then we will run the method that we previously

00:19:08

received on line 9,

00:19:10

if the result is a fall, then in this

00:19:13

case we will have nothing will happen to us in the

00:19:17

sixth example we will see how the directive

00:19:19

can retrieve information about the event

00:19:22

that occurred in the house door on in the

00:19:26

markup we have a div that

00:19:27

uses the may horse

00:19:29

maiden directive we used styles to set the height,

00:19:32

width and background when we move the cursor

00:19:37

over the surface of the sofa the directive collects

00:19:39

information about the mouse move event and

00:19:42

the coordinates of the cursor displays the

00:19:44

upper left part of the div. The

00:19:46

purpose of this example is

00:19:48

to demonstrate how we can retrieve the

00:19:51

event object and find out some data

00:19:55

we need to work in order for

00:19:59

the directive to read

00:20:00

information about the event we need the tail of the

00:20:03

fox the world a little Configure differently

00:20:06

when defining Lesnar's hust, we

00:20:08

set the name of the event and with the second

00:20:10

parameter we indicate the data

00:20:14

that will be passed to the events when

00:20:17

it is launched, we want that when the

00:20:21

mouse move event is launched, when

00:20:23

this particular method is launched, the

00:20:25

event object is passed as a parameter,

00:20:28

essentially if If we were to install a

00:20:30

handler for a sticker handler in the markup, for example, and would like to

00:20:32

know the data about the event, then by calling the

00:20:36

angular method in our component

00:20:38

as a parameter, we would pass it a

00:20:40

dollar event, here we do the

00:20:42

same thing, we say that our handler

00:20:44

will need to pass events

00:20:46

to pass that information that is related to

00:20:49

current events in the tree house, events

00:20:53

could be able to come to us here

00:20:55

as a parameter and then we

00:20:57

just pull out the necessary values and

00:21:00

generate text that will be

00:21:02

displayed simply you norwich topic

00:21:04

here we did not bother with the principle of

00:21:06

displaying data to the user and displayed

00:21:09

them directly in the dev on which our

00:21:12

directive hangs, to complete the examples of working

00:21:14

with directives, we will look at how you can

00:21:16

bind to composite elements,

00:21:21

how to make sure that the properties that

00:21:22

exist in the directive

00:21:24

are bound to the properties that exist

00:21:28

in the house or copper, in example number seven,

00:21:31

a paragraph and a div are placed on the page both

00:21:34

elements use our click directive

00:21:37

was also on honey if you look at the

00:21:41

working example then when you hover over the

00:21:44

directive the mouse cursor appears, a

00:21:47

pointer black appears when you click,

00:21:49

the style changes when we release the

00:21:52

mouse button the style is removed and the div and

00:21:55

paragraph work the same in order for

00:22:00

our example this is how it worked, we create a

00:22:03

separate directive, this directive, when I

00:22:07

launch my constructor, takes a

00:22:09

reference to the element and changes the

00:22:11

style of the element with the cursor by enter, here we did not

00:22:15

use a renderer,

00:22:16

but simply went directly to the element

00:22:19

nay-na house elements changed its

00:22:23

design, which is incorrect, it

00:22:25

would be more correct here get

00:22:27

a renderer and, as in our previous

00:22:29

examples, use renderer methods,

00:22:31

then we bind hustle sinner

00:22:34

mouse down and has lesnar mouseup when we

00:22:37

click the mouse on an element, then the

00:22:40

properties and clicks will equal true

00:22:43

when we raise the mouse and click

00:22:45

equals falls and additionally 14

00:22:48

line we set one more

00:22:51

property with a new decorator for us, the

00:22:54

host bonding decorator, in this

00:22:56

decorator we specify an expression

00:22:58

that will be

00:22:59

applied to the element, essentially this one,

00:23:02

and the dark element on which our

00:23:05

directive hangs, and this expression

00:23:10

will be used as the value for this expression from the click Roughly

00:23:12

speaking, we are now at home the element for

00:23:15

which the directive is attached,

00:23:17

we set this binding, we

00:23:22

add an expression to the eyes and click on the keyboard

00:23:35

press more precisely and bind the disk property

00:23:38

liked

00:23:39

if there is a corpse here, then for this element a

00:23:42

class should be attached, they ask if there is a

00:23:45

fall here, then accordingly the

00:23:47

press class should be removed It is clear that

00:23:49

you can come up with other more useful

00:23:51

options for using these bindings, but

00:23:54

the essence of the host Boeing is precisely to

00:23:57

define an expression for our

00:24:01

tail element and indicate the source

00:24:04

that will change this expression and,

00:24:07

accordingly, if true here,

00:24:09

then this element receives the press class, the

00:24:11

press class is described at the level component,

00:24:15

there is a squat style that

00:24:17

sets the backgroundcolor, so by

00:24:19

clicking on the element, changing the fall to true inside

00:24:23

this directive, we change the binding at the

00:24:26

host level and add or remove a

00:24:29

class for this h100,

00:24:34

but for the directive itself everything is quite

00:24:37

simple, just the host branding and the

00:24:39

data source that this host

00:24:41

is flying some records

00:24:44

the first examples showed us

00:24:46

the use of attribute directives and

00:24:48

as you saw, working with them is an order of magnitude

00:24:50

easier than in angular jet, all we

00:24:53

need to do is define a class and

00:24:55

specify a css selector that will tell

00:24:57

which house elements fall under the work of

00:25:01

our directive to the same directive

00:25:03

for in order to read data from

00:25:06

markup to bind to properties

00:25:08

or to events that if the home element

00:25:12

all we need to do is

00:25:13

use several standard

00:25:17

decorators that we use in

00:25:19

components or other parts of the system the

00:25:22

next part of our examples will be

00:25:24

devoted to working with structural

00:25:27

directives structural directives are

00:25:30

directives which changes the structure of the house

00:25:33

with a tree and their peculiarity is

00:25:36

that they always come with and respect all

00:25:39

template which is used to

00:25:41

change the

00:25:42

house tree also all structural

00:25:45

directives are used in a special way in the

00:25:47

markup when we use structural

00:25:50

directives we indicate an asterisk in the name

00:25:53

the presence of this asterisk

00:25:55

tells the angular compiler that

00:25:58

this fragment of the house tree needs to be

00:26:01

wrapped,

00:26:02

converted into a template in template, roughly

00:26:06

speaking, this is the markup after

00:26:08

compilation, turned into a template

00:26:10

on which the usual

00:26:12

directive of my ivs will already hang and depending on

00:26:14

how this directive will work,

00:26:17

what it is in its the internal organization

00:26:20

will use this template, it will be

00:26:23

active or inactive, that is, a

00:26:25

tree will be added to the house or a tree will be removed

00:26:27

from the house, let's see what

00:26:32

happens in May and in the directive

00:26:34

in order to describe our structural

00:26:37

directive, we need to essentially create a

00:26:39

regular directive but

00:26:42

pass others in the constructor parameter

00:26:43

in the constructor we are in liquid template rip

00:26:47

and view container rf two new types

00:26:50

template rip this is a link leading to a

00:26:54

template that defines this markup

00:26:56

which directive should show or

00:26:59

delete the parameter

00:27:03

view container c allows you to determine in

00:27:06

view that part of the code where

00:27:09

the content should appear or disappear generated by this

00:27:11

directive, this is a link to the template

00:27:14

and this is a link to that part of the view where

00:27:17

the directive was applied, our directive

00:27:21

now works in a very simple way,

00:27:24

it uses properties and hammered this without

00:27:28

being more precise than the current component and the

00:27:31

current component also has a

00:27:33

female hammer method which this property

00:27:35

will change Initially, when we

00:27:37

launched the application, the visa was faulty

00:27:40

when we clicked on the button,

00:27:43

fix it, this visa was changed to the

00:27:45

opposite one,

00:27:47

that is, initially our element should

00:27:49

be invisible in the markup, run

00:27:52

the example, there is a button, fix it, no data

00:27:55

is displayed if we click on

00:27:57

button cinch my

00:27:58

iv sample seen click on the

00:28:00

cinch button may and the sample disappears it turns out

00:28:04

that this directive works exactly the

00:28:07

same as in India you allow you to show

00:28:10

or hide this element my pizza

00:28:13

let's look at how

00:28:15

these signs change, the value in the

00:28:18

directive is 13 line we create properties ay ev

00:28:23

in Ilya and indicate that this property, when

00:28:26

using the binding, will work and

00:28:28

will be named the same as our

00:28:29

motive directive, while the value

00:28:32

that gets here is the condition

00:28:35

used below in the condition if the

00:28:38

condition variable is true,

00:28:39

then we need

00:28:40

our element to be visible for To do this, we

00:28:43

need to take the template rip template,

00:28:45

this markup that we already have, and

00:28:48

based on the same markup, create a house

00:28:50

tree, placing it in the view container,

00:28:53

the place where the directive was applied,

00:28:56

we will view the containers, call the method warms the

00:28:59

embedded view and indicate the template

00:29:01

based on which we need to do this

00:29:03

built-in view

00:29:05

when this method is called it works

00:29:08

in the place where we used the

00:29:10

directive, this template appears and

00:29:12

chronos condition is equal to falls to view

00:29:15

container navi container we call the

00:29:17

clear method this place where

00:29:20

the directive was applied is freed from the house elements

00:29:22

that were previously generated,

00:29:25

this is a simple principle of operation structural

00:29:28

directives take a template create this template

00:29:31

place in a certain part and ears

00:29:33

or remove this template from a certain

00:29:36

part of the bank the following example with

00:29:42

structural directives we will show

00:29:43

a directive that with a certain

00:29:45

delay displays an element in the

00:29:48

tree house on the page we have placed

00:29:50

several divs and all divs use a

00:29:52

structural directive maidan with the value

00:29:55

500 1000 1000 5 and so on, the task of the

00:29:58

directive, after this time has elapsed, is

00:30:02

to make the element visible, add it to the

00:30:05

house tree, let's look at the work of

00:30:08

the example, with a frequency of half a second,

00:30:11

elements appear on the page in

00:30:17

order to organize similar logic

00:30:19

in the directive code, we have defined a

00:30:21

constructor that accepts template

00:30:23

rip

00:30:24

and view container RF we have defined

00:30:27

properties add time which will be

00:30:30

called exactly the same as our

00:30:31

directive so as not to add

00:30:33

individual attributes to the markup and every

00:30:36

time a method is called, more precisely, the

00:30:40

method site set properties delay time is called,

00:30:42

we call both

00:30:43

timeout and we specify a method that

00:30:46

in the container calls create mbd two

00:30:49

yoon with the raw templates being passed as a parameter;

00:30:51

we create

00:30:54

the markup added to the view using the template and do

00:30:56

this with a delay, specifically its time

00:30:59

variable; in the third example, we will

00:31:02

look at a structural

00:31:05

directive, a directive that allows us to

00:31:07

use the context of

00:31:08

additional information that in

00:31:11

the end, we will use templates to form,

00:31:13

let's imagine that we

00:31:15

have a directive that

00:31:17

will subsequently be used by several members of

00:31:19

our team and each developer in the

00:31:22

team wants to

00:31:24

use the data from our

00:31:27

directive in different ways, in different ways this data is shown to

00:31:29

the user we have, for example, a

00:31:31

user map directive which of remote

00:31:33

sources collects information about the current

00:31:35

user and then we

00:31:37

can somehow use this information for ourselves and for our own purposes.

00:31:39

In our case, the card user

00:31:42

receives information in the form of two values

00:31:46

first name and power so that these

00:31:48

values can be applied in the template of

00:31:49

this directive we define Here is an

00:31:52

expression: we create a variable fn,

00:31:55

we write the first name in the variable

00:31:57

Island, we put dreams in it, and both of these

00:32:00

variables are given to us by the

00:32:02

directive of the user cards, in the same way we

00:32:04

have variables that are provided

00:32:06

today by form and give Chinche Faringia in

00:32:10

such variables is not provided here

00:32:12

system directives that also give

00:32:14

us some kind of context that can be

00:32:16

applied at the time of generating the

00:32:19

markup generation template, the context that

00:32:22

we got here is used by us 2 3 lines to

00:32:25

display the user's card his

00:32:28

first name his cool let's

00:32:31

see what we did in this

00:32:33

directive for this in order to be

00:32:34

able to pull out 2, to pass more precisely

00:32:38

two values into the markup where the directive

00:32:41

will be used so that the

00:32:42

developer can apply them for his own

00:32:44

purposes somewhere in the template, we go to

00:32:48

our directive in the constructor, the directive

00:32:50

accepts the same data as before, but here

00:32:53

we

00:32:54

are and engy it and no we have a

00:32:56

new new code that

00:32:59

was not previously on the eleventh line at the time of

00:33:01

initialization of the directive

00:33:03

we create a variable like user cards

00:33:06

context this is our class which we

00:33:09

described below in this class there are two

00:33:11

properties first name imperious these are exactly

00:33:13

these properties we just used the

00:33:15

markup here first name so

00:33:19

here we used the first name property

00:33:21

by defining an instance of this class and

00:33:23

passing it as a parameter

00:33:25

values on the eleventh line we

00:33:27

turn to the view container and create

00:33:29

ours based on the template

00:33:31

mb years view we attach the markup here is

00:33:35

our template which we want to build,

00:33:36

but here is our context that we want to

00:33:38

transfer to this template for which the template

00:33:41

received the information that our

00:33:43

user art

00:33:45

Darik pulled out, you received it from some source,

00:33:47

it is clear that we are not

00:33:49

receiving information from their source now, we

00:33:51

are simply generating it on the fly by calling the constructor

00:33:54

but here there could be some more

00:33:56

complex code that retrieves data on the

00:33:58

user or on some other

00:33:59

business entities from the storage

00:34:02

and provides it further to the

00:34:04

user interface in this

00:34:05

way. As a result, when our example

00:34:08

runs, we receive data from the

00:34:11

context and use it for this purpose

00:34:13

to display display in the interface

00:34:16

on the same principle, essentially the

00:34:19

same controls for directives and other

00:34:21

structural directives work which we can

00:34:23

write

00:34:24

an expression when using the

00:34:26

directive itself, filters or pipes play a very important role in building

00:34:30

user interfaces

00:34:32

and in angular

00:34:35

jess these constructions were called

00:34:37

filters in angular 2 and subsequent versions

00:34:40

in the documentation this construct

00:34:42

is called pipe but we will still

00:34:44

call filters implying that a

00:34:47

pipe filter is a tool that

00:34:50

allows you to change the value before

00:34:53

displaying it in the user

00:34:55

interface, while the value is changed

00:34:57

only for the user interface the

00:34:59

component itself the source the data

00:35:01

remains

00:35:02

unchanged if we want to apply a

00:35:05

filter or pipe then we essentially have to

00:35:07

use the following syntax

00:35:10

binding expression

00:35:12

interpolation expression we will need to

00:35:13

set the value for example take

00:35:15

properties from our component

00:35:17

then put pipe or a vertical

00:35:20

slash after which indicate the name of the filter

00:35:22

or the filter that we take is built-in

00:35:27

frame art or your own filter

00:35:28

after the filter, if necessary, we

00:35:30

can specify parameters after the colon

00:35:32

that will somehow affect the

00:35:34

operation of the filter and change

00:35:37

the principle of data formatting before

00:35:40

output, let’s say the filter does what

00:35:43

we see on the slide,

00:35:44

it can apply the

00:35:46

prepared format as a parameter a line

00:35:49

indicating in which particular

00:35:51

representation we want to see

00:35:52

the format of the date and time there are many

00:35:55

built-in filters that allow you to

00:35:57

display information by formatting it as a

00:36:00

monetary unit as a real

00:36:02

value convert upper to lower

00:36:04

case use the value when

00:36:06

formatting the date but besides

00:36:09

that we have a series built-in filters,

00:36:11

we also have the ability to create

00:36:14

our own filters that will

00:36:16

transform information in some special way

00:36:18

before output,

00:36:21

creating your own filter is very simple for

00:36:24

this, as for most other

00:36:25

parts of angular, we just need to

00:36:27

define a class,

00:36:28

if the back class is a filter then we

00:36:31

must decorate it with paypal and specify the

00:36:34

required name parameter. In essence,

00:36:37

through this parameter we

00:36:39

determine what will need to be written in

00:36:42

the markup after the pipe symbol. This is what we will

00:36:44

need to indicate the name of the pipe

00:36:47

when we describe the class itself, it

00:36:50

is important for us that the class has a

00:36:52

transform method that will convert the

00:36:54

value to the data that

00:36:56

the user will already see

00:36:57

and if we want to define a class that

00:37:00

will work as a pipe, we should

00:37:03

implement the pipe

00:37:05

transform interface which and check that

00:37:07

our class contains a method with the

00:37:09

correct signature that is suitable

00:37:11

for the work of filters. Consider the

00:37:14

use of built-in filters in the first

00:37:17

example. In the course of our component,

00:37:19

we create an array product, filling it with

00:37:22

data from the data, we have a name, price,

00:37:26

category, cat and date, let’s say

00:37:30

this product was created in the database,

00:37:32

we display all this information in the

00:37:34

user interface for

00:37:36

clarity, we have two tables, one

00:37:38

table in which the

00:37:39

initial data is 2 tables in which the

00:37:41

filtered data is given in a table with the original

00:37:45

data, we use easy for

00:37:47

to go through the product array to

00:37:50

display the data for everyone on the screen, and in the

00:37:53

second table we make all the same forms,

00:37:55

but when we display the data on the screen, we

00:37:57

apply different filters for the

00:38:00

price property we apply the carinthia filter

00:38:01

by passing

00:38:02

two parameters to this filter, the parameter just

00:38:05

and the parameter tru,

00:38:07

using this mountain to display categories,

00:38:10

we apply the filter Lavra case code.org

00:38:13

from when displaying the date, we apply the date filter,

00:38:16

we will now compare how the data will be displayed

00:38:17

in this plate the data in this

00:38:19

plate

00:38:20

at the same time, the information itself that

00:38:23

is in the product array does

00:38:24

not change when these filters are applied;

00:38:26

the filters change only the

00:38:29

values in the interface; the values in the

00:38:31

component

00:38:32

remain the same; we open our first

00:38:35

example and here we see how

00:38:39

what happened when we applied the

00:38:41

Karen si filter;

00:38:42

we display the values that was

00:38:45

originally of the number type in

00:38:48

the format that is used for

00:38:50

monetary units, we see the currency symbol and

00:38:54

we see we see the ravana format itself and the

00:38:57

value is already in floating point when

00:38:59

we tried on the

00:39:00

lorcas and the 100 value of the category

00:39:02

was converted to lower case by hand they were

00:39:04

all converted to upper case date

00:39:06

was initially in a very inconvenient

00:39:09

format for the user when we simply

00:39:11

applied date filters, we got

00:39:13

this neat output, it is clear

00:39:17

that these filters have a lot of different

00:39:18

settings for different applications, but

00:39:21

this lesson does not include an analysis of all the

00:39:23

intricacies of working with filters with filters

00:39:26

very easy figure it out using the official

00:39:28

documentation, so you can just

00:39:30

google it and read what options there are, for example,

00:39:32

the options for using the David filter,

00:39:35

what you can pass a value to

00:39:37

format the date in the form

00:39:39

your application needs,

00:39:42

what we haven’t looked at yet is

00:39:45

this interesting syntax and when you

00:39:48

work with filters and want to pass

00:39:49

several parameters to the filter, then you

00:39:51

pass these parameters not separated by a comma,

00:39:53

but by a colon, this parameter is trump,

00:39:56

it affects whether a

00:39:59

special currency symbol will be used if it is

00:40:02

available for the selected currency, we

00:40:05

removed the morning parameter

00:40:06

and we now see that instead dollar

00:40:09

is used its sd prefix 5 is simply

00:40:12

the text that we specified

00:40:15

here as the second parameter with the

00:40:17

value throne, we display the currency symbol, the

00:40:21

dollar is displayed working with system

00:40:25

filters and with our own filters,

00:40:27

including we can build chains

00:40:29

so that the value is processed by the filter

00:40:32

was passed to another filter and the value of

00:40:35

2 filters 3 and so on in the example we

00:40:38

have a component properties quay shendrik

00:40:41

where the value is located responsible for the

00:40:44

current date simply called the

00:40:47

Newgate constructors received the current time in the

00:40:49

markup of this component there is a

00:40:52

binding expression that binds the

00:40:54

sidekick indium so in the user

00:40:56

interface but in this case, a

00:40:58

number of filters are applied, the first filter is a date with the

00:41:01

full date parameter, this means that we

00:41:04

want to convert the creation and do it value

00:41:06

into an insurance value

00:41:08

that will represent the full date,

00:41:11

that is, month number year without time and

00:41:14

everything else,

00:41:15

this is what is now highlighted on on the screen

00:41:17

this will be a new

00:41:20

string value that we want to

00:41:21

show to the user, but

00:41:23

we pass this new value to another pipe and

00:41:26

another filter and about the case and translate

00:41:29

it all to upper case. As a result, on the

00:41:31

screen we see this representation

00:41:34

Thursday, December 13 we took out an

00:41:40

interesting pipe which is used in

00:41:43

cases where we work with

00:41:44

asynchronous objects representing

00:41:46

asynchronous operations with mixins overview of the

00:41:49

area if we want such an object

00:41:52

representing a synchronous pirate to be displayed

00:41:54

in the user interface we

00:41:56

will have to use pipe assy ng

00:41:59

first let's look at how the

00:42:02

component in which it exists works and the

00:42:05

synchronous and asynchronous code in the

00:42:08

sing pipe component, the component on the

00:42:10

ninth line defines a variable of

00:42:12

type promise which is closed by type

00:42:14

string, this variable is data from server,

00:42:17

it essentially represents an asynchronous

00:42:19

operation upon completion of which we

00:42:22

will receive a string value, essentially this

00:42:24

object is a promise

00:42:26

that in the future Someday

00:42:28

data will appear in it in the constructor, we

00:42:30

initialize that object by calling the

00:42:32

constructor, and if we work with, in addition to

00:42:34

the summit, we must pass

00:42:36

the code to the constructor that will essentially

00:42:39

describe the asynchronous operation, while

00:42:41

when calling the constructor we get here we

00:42:45

pass a function with two With the parameters

00:42:48

reason and reject in the body of this function we

00:42:50

must describe how our promise will

00:42:52

work and at some point we must

00:42:54

take this parameter once and call

00:42:57

it since cargo is a method

00:42:59

we call this exhaust we will say

00:43:01

that this promise has already completed its

00:43:04

synchronous operation a value has appeared in it

00:43:06

that can be

00:43:08

used as for all the others, but

00:43:10

here in the reject method is located first in the

00:43:13

reject parameter there is a method that

00:43:15

we will call if something goes wrong,

00:43:18

thereby we will notify everyone that

00:43:20

this promise has completed its work with an

00:43:22

error

00:43:23

but in our example here we do not perform

00:43:27

any logic, all we do is

00:43:29

call, that is, a function that should

00:43:32

run if everything is fine, we write the

00:43:34

collapse in the promise variable to 10 at

00:43:36

the point, this change is an

00:43:38

abstract function and the file is initialized, the

00:43:42

reject variable is written to the reject function

00:43:44

field file and then now in the

00:43:47

logic of this component we just need to

00:43:50

define some asynchronous operations,

00:43:51

depending on how they end successfully or

00:43:54

unsuccessfully, call one of

00:43:56

these methods, we won’t complicate our

00:43:58

lives here by contacting the server or

00:44:00

doing something similar we have it’s just a

00:44:02

method, when called, we start a

00:44:06

timeout, wait one second and call

00:44:08

cut in the promise, while in the collapse in

00:44:10

addition,

00:44:11

we transfer the data that should

00:44:13

appear inside this process upon completion of

00:44:15

asynchronous operations, that is, if

00:44:17

someone is interested, this someone

00:44:19

can take data from the server and when

00:44:21

receiving results from this about meat,

00:44:23

display them somewhere in the interface to

00:44:26

do something superfluous, now we want to

00:44:28

simply display this date from server in the

00:44:30

user interface,

00:44:32

but the problem is that the data in this

00:44:34

object does not appear immediately, it

00:44:36

appears after some time,

00:44:37

if we write data from server just

00:44:40

like it is, just bind it to a

00:44:43

page element, then in this case we will get the

00:44:46

following problem: data from server

00:44:48

is an object, so when binding

00:44:50

this object, we see the

00:44:53

date string on the work result page

00:44:55

if we want to see that the value

00:44:58

that will appear after the asynchronous

00:45:00

operation, we will not see it because

00:45:02

the binding occurred to the object to the string

00:45:04

that appeared after the call tostring

00:45:07

and the entire circle of the asynchronous operation has long since ended;

00:45:10

this object contains the result of this

00:45:12

operation, but we cannot see it if

00:45:16

we add a

00:45:17

pipe here koffing this will mean that we

00:45:20

want to attach a handler to the completion of the

00:45:23

asynchronous operation, as soon as it

00:45:24

ends we will display the results of the operation,

00:45:27

that is, we do not display the object itself,

00:45:28

but the result of the operation when it

00:45:31

appears, we try again,

00:45:34

now there is no data here

00:45:37

because we used the passing unit pipe

00:45:39

sees that the result of the work is synchronous

00:45:41

and there is no percent, so it doesn’t display anything here,

00:45:43

we press request, a

00:45:45

second passes, the value that

00:45:47

paypal was extracted from appears, except as

00:45:53

you know, promise is not the most popular

00:45:54

data type for working with asynchronous

00:45:57

operations in angular, more often we use the

00:46:00

overview val was type data and example number

00:46:02

four will show how the code

00:46:05

that works with the output of UFA will look like,

00:46:08

the interface of the work results of the review was

00:46:10

objects in the example, we create a component

00:46:14

whose 13 lines are defined by

00:46:16

flying this field of type obderu was a

00:46:18

closed

00:46:19

type, we would like more details about what a

00:46:23

review was and how we can work with it,

00:46:25

we will see in lesson number three

00:46:27

dedicated to reactive programming,

00:46:30

if we briefly explain the purpose of the ampere,

00:46:33

it was an object, it is an object that can be

00:46:35

monitored, this object can

00:46:37

issue events, it turns out that the object is

00:46:39

timed to initialize it correctly,

00:46:41

from time to time it

00:46:42

can issue events on the cat

00:46:44

we will react in order to

00:46:47

initialize this object when calling the

00:46:49

start method, we call the

00:46:50

region review constructor

00:46:52

as parameters to this constructor we

00:46:54

pass a method describing how

00:46:57

this time should work with its

00:47:00

observers who are on it for the event

00:47:03

from this review the object will be

00:47:05

subscribed if someone then this mom will start watching

00:47:08

this, this someone will be included

00:47:10

as a parameter in this function, this is the

00:47:13

overview of the mountains, this is the object that is

00:47:15

monitoring this time, and

00:47:18

every time new

00:47:20

subscribers appear, the following operation will be performed for these subscribers

00:47:21

in order to

00:47:24

To notify the subscriber about new

00:47:26

values, we run the set interval

00:47:29

method and

00:47:32

call the next method on subscribers every second to

00:47:35

pass there as a value the

00:47:37

increased counter created earlier, that

00:47:40

is, our subscribers will simply

00:47:43

receive a notification every second, this method

00:47:46

is simple give a new new portion of

00:47:48

data to our subscribers in this case,

00:47:52

the subscribers will be the

00:47:54

user interface in the paragraph,

00:47:57

we are tied to the time, but we know that

00:48:00

time was a review, that is, it is a large

00:48:02

object with

00:48:03

properties and methods, we are interested in and

00:48:05

extract from this object the result

00:48:08

information, this information appears

00:48:10

every time when

00:48:12

how when the next method is called essentially

00:48:15

this piece of code is a

00:48:17

subscriber subscriber who is tied to that we

00:48:20

every time the next method is called

00:48:22

and sing the result of the work methane x

00:48:25

will be displayed in the paragraph let's run

00:48:29

this example with five amazing click on the

00:48:33

start button and we we see a counter that is

00:48:35

constantly changing,

00:48:37

if we take and remove the passing

00:48:41

the share, as in the previous case, we will

00:48:44

see the object since the Abwehr

00:48:49

was an object, we see this object

00:48:50

tied to the interface, this object is

00:48:53

constantly in

00:48:54

new events, in fact, now

00:48:56

it does not produce these new events but could

00:48:58

issue them and we can’t subscribe to them

00:49:01

since we can display them since

00:49:03

we are binding to the whole object,

00:49:06

they

00:49:07

subscribe to the events that happen in this

00:49:10

object, we finally

00:49:15

got to examples of creating

00:49:16

custom pipes In example number 5,

00:49:19

we have html markup in which on

00:49:22

line number one there is an input which,

00:49:25

through a bidirectional binding,

00:49:27

is connected to the properties

00:49:29

defined in this component,

00:49:32

line number three is displayed in the paragraph, but we

00:49:35

use our own pipe for value, which is

00:49:38

called Mike Afton, let's see

00:49:42

how this example looks like we

00:49:45

enter data into the input field, this data

00:49:49

is displayed simply in square brackets, it

00:49:51

turns out that the task of this pipe is

00:49:56

to wrap this information in square

00:49:59

brackets before outputting information, there will be no this pipe, we output the

00:50:01

data in the same form in which they were

00:50:03

entered in the input field,

00:50:05

let's look at how the

00:50:06

pipe code is organized when creating a pipe, we

00:50:09

defined a class called it my custom

00:50:11

pipe and indicated that this class

00:50:13

is incrementing the pipe transform interface, because of

00:50:15

this we need it on the eighth

00:50:18

line or in some other part of

00:50:19

this class define a transform method

00:50:21

that takes a mandatory parameter,

00:50:23

vilju, and an optional set of arguments,

00:50:27

while returning any value so

00:50:30

that this pipe can be

00:50:32

used in the interface in the code, we

00:50:35

register it using the pipe decorator,

00:50:37

specifies the name Mike Afton for the pipe,

00:50:40

this is the name we do not use

00:50:43

subsequently, somewhere in the markup of our

00:50:45

project, the transform method, all we

00:50:50

need to do for our pnp to work is to

00:50:52

figure out how the values that we

00:50:54

received in the pipe should be

00:50:55

transformed before outputting it

00:50:58

anywhere, I’ll pour this out and this is the

00:51:01

value that is located above the left of the

00:51:03

symbol byte this value goes into the pipe, it

00:51:06

is converted and instead of this

00:51:08

expression, the already

00:51:10

converted information is displayed. In our case,

00:51:12

if there is a value, we put it in

00:51:15

square brackets, we return it like this,

00:51:17

converted if the value is for now, so that

00:51:19

we return an empty

00:51:21

string, this is how our first

00:51:24

pipe works, the following example this is a more complex

00:51:28

filter in which the filter will change the

00:51:31

output result depending on the parameter; the task of

00:51:35

our filter is format: distance

00:51:38

takes values in meters as input; output the

00:51:41

result in kilometers or miles,

00:51:43

depending on the parameters; if

00:51:46

we pass the value true as a parameter to the filter,

00:51:48

this value will be in miles

00:51:50

from bodice

00:51:51

kilometers if fall then the value will be in

00:51:54

miles let's look at how

00:51:56

this filter is organized, the distance format is

00:51:58

to define this filter, we

00:52:00

created a class, specified pipe for this

00:52:04

class with the name distance format,

00:52:06

implemented the pipe transform interface, but

00:52:09

in this interface when we

00:52:11

created it we indicated the names of the parameters

00:52:13

says in my cable and metrics and although in the

00:52:16

previous example we had

00:52:18

completely different names there a pipe transform interface

00:52:20

it does not in any way limit

00:52:22

the principles of naming arguments, the main thing is

00:52:25

that we have the correct method with the

00:52:26

correct name and the required number of

00:52:28

parameters

00:52:30

everything else, for example names

00:52:32

we can rename the parameters at our

00:52:34

discretion

00:52:35

in the body of this method we check if the

00:52:37

parameter is a metric nostrum then we

00:52:40

convert to kilometers we

00:52:43

obtain the values obtained from the parameters

00:52:46

by a thousand and indicate that the units

00:52:48

of measurement are kilometers if the

00:52:51

metric values fall we

00:52:53

divide the obtained values in the parameters by 1600 and

00:52:55

indicate that our units of measurement are miles,

00:52:58

then for beauty we round the values

00:53:03

to hundredths and indicate the result in the form of

00:53:06

this formatted value

00:53:08

if we have the eps format,

00:53:09

if there is a non-0 value

00:53:12

then we use the template we take

00:53:15

the format it says space unit of measurement

00:53:18

and we return this line to the

00:53:20

user interface

00:53:21

if the cs formats did not work out for some

00:53:24

reason, this is where 0 is located, then we

00:53:26

return an empty line as a result, our

00:53:28

application works on this

00:53:30

principle, we enter the value in the input field

00:53:34

if imperial systems are selected then we see the

00:53:37

result in miles

00:53:38

if we enter a value with the

00:53:41

magic system checkbox selected, then

00:53:43

the result is displayed: kilometers we always

00:53:45

initially enter meters in this example

00:53:50

we will look at the filter from a performance point of view when

00:53:54

creating a filter we can

00:53:55

configure the filter and get two

00:53:57

two different categories dior 2 different

00:54:00

filters which

00:54:02

track the change in different ways and perform

00:54:05

data transformation in the user

00:54:07

interface depending on the parameter about

00:54:10

metro pierre that we specify in the

00:54:12

filter directive we can specify at

00:54:16

what point the filter should check for

00:54:18

changes have not yet passed the changes

00:54:21

start the data transformation process

00:54:24

in the user interface if we

00:54:27

mash the filter

00:54:29

then this means that this filter

00:54:30

will only work

00:54:32

if the value that was

00:54:36

passed here has changed its reference, then the

00:54:39

value has changed completely, let's say

00:54:41

this is good

00:54:43

to demonstrate with an example of

00:54:44

using a string or number if you

00:54:48

perform some kind of conversion on a

00:54:50

string in a java script then you get a

00:54:52

new line, you cannot change the

00:54:54

line that you have, any

00:54:55

operation on the line returns you a new

00:54:57

line, that is, if you changed the

00:55:00

line, then there will definitely be a new

00:55:02

value, new data because the line

00:55:04

is w java-script and

00:55:07

thanks to this

00:55:09

We can do this parameter about the morning parameter so that the

00:55:11

filters will work only when the

00:55:16

links that are included in it as

00:55:19

values have changed, if you use the

00:55:22

falls in puree parameter, this will mean that

00:55:26

this filter will always work

00:55:28

every time angular produces

00:55:31

checking for changes in the user

00:55:34

interface,

00:55:35

you are constantly executing the

00:55:37

transform method, which accordingly can

00:55:38

lead to a drop in

00:55:42

performance; this method will

00:55:43

only work when there

00:55:45

has been a change in or when it really

00:55:47

makes sense to perform the transformation,

00:55:50

but the problem is that in angular we

00:55:53

have and were data type such as

00:55:55

array objects and it turns out that if an

00:55:58

object came here, then changing some

00:56:01

separate property in the object and this

00:56:04

filter will not work for us because it will not

00:56:06

see the changes, it can

00:56:08

only work when the

00:56:10

reference to the object is completely changed because because of this,

00:56:12

problems may arise, there are a number of

00:56:15

different approaches that allow us to

00:56:18

organize the move in such a way that it

00:56:20

is productive and so that we do not

00:56:22

have problems associated with yuta was types

00:56:26

in lesson number four we will discuss this in more detail,

00:56:28

we will see how we can

00:56:31

use the library have and the budget

00:56:33

in order to increase the efficiency of the

00:56:35

component filters, in principle, does

00:56:39

not wait for an action;

00:56:40

tracking changes in general

00:56:42

means we have two filters, one pivo

00:56:45

2 m p and we are now that’s what they

00:56:47

’re called, by the way, we’ll still look at the difference in how

00:56:50

these filters work; the purpose of the filters is very

00:56:53

simple, they take an object as input and as a

00:56:56

result display in the user

00:56:58

interface first name and last name the

00:57:00

concatenation of two values that are

00:57:02

pulled from these objects,

00:57:05

they work exactly the same, let's

00:57:07

look at how these filters are

00:57:08

applied in the markup we have two

00:57:12

compartments in front two blocks in the first block

00:57:14

we display the results of the filter in the

00:57:17

second imperio of the filter in the first block we

00:57:20

display the initial data person one

00:57:23

first name and power

00:57:24

then on the third line we display

00:57:27

the filter that on person one applies

00:57:30

Pia pipe not a filter binding this

00:57:33

binding it should in theory

00:57:35

use the filter and it should be

00:57:37

updated only if

00:57:39

this person alone changes entirely, if

00:57:42

some of the properties of the person

00:57:44

gain change, nothing will happen if

00:57:46

Nadin just changes the whole thing, that is, the

00:57:48

link to this object changes,

00:57:50

then I drink and pipe processes and

00:57:52

outputs some changes to the

00:57:55

user from user

00:57:57

interface in order to get the

00:57:59

maximum benefit from this code we

00:58:01

need to make sure that the piercing

00:58:03

one is yuta is the type so that it is

00:58:06

impossible to change the first name and

00:58:09

forehead or love to and me while changing the

00:58:10

link to person 1 that is, this code is

00:58:13

actually not entirely correct from the point

00:58:16

of view of use in some large

00:58:17

project because

00:58:19

such situations may arise when someone takes and

00:58:22

changes only one property in psn, but

00:58:24

our code will not see this because it

00:58:27

uses a pi pipe that monitors

00:58:31

changes in the link

00:58:32

not separate values line 4 and 5

00:58:36

we have two buttons that change the

00:58:38

properties in person 1 and a button that

00:58:40

changes the link in just the leg let's

00:58:43

see how they are implemented if we

00:58:45

click on the first button then we simply

00:58:47

change

00:58:48

alcala dreams and three dots a if we

00:58:51

call click on the second button, then in

00:58:53

person one we write an entirely new

00:58:55

object and, in theory, now

00:58:58

our first pipe will not react to these changes; it will react to these

00:59:01

changes; it will react to what it sees

00:59:03

that the link has changed entirely, let's

00:59:06

check our seventh example and Now we

00:59:09

see that the filter worked, it displayed

00:59:11

person one, this is the first time we change

00:59:14

the property of person one, we see that

00:59:17

the properties where we were directly

00:59:19

linked have changed, but the filter did not see

00:59:21

these changes because the filter

00:59:23

has a command to monitor changes in the

00:59:25

entire link, only then execute

00:59:28

what - this transformation greatly increases

00:59:30

productivity, imagine that you have

00:59:32

a table of several thousand elements with

00:59:34

filters hanging in them,

00:59:36

if these filters work

00:59:37

constantly every time you fix detection,

00:59:39

we will be doing a lot of empty

00:59:41

operations, and if the filter works

00:59:43

only when changing

00:59:44

an object to replacing a link, then we

00:59:47

Let’s not once again call the filter for

00:59:49

unknown actions; if we

00:59:51

change the entire link, then the

00:59:53

normal binding works and the filter

00:59:56

sees the changes; we have exactly the same code

00:59:59

in the second block, the only thing is

01:00:02

that we use the person 2 object and

01:00:05

we are called differently methods, but the

01:00:07

principle of their operation is no different from the

01:00:09

first block,

01:00:10

also here on the back the

01:00:12

filter has changed, this

01:00:14

imperia guy this pipe is not a filter will

01:00:18

earn money with every detection

01:00:20

and every time we click on the

01:00:21

button, every time

01:00:23

this asynchronous operation ends, it constantly

01:00:26

starts x logic in this filter and the

01:00:28

data

01:00:30

that is displayed to the user is constantly filtered, while

01:00:32

this data is possible and has not changed,

01:00:34

but this pipe cannot know about it,

01:00:37

so it has to constantly run

01:00:39

and update the interface, and the same pipe

01:00:42

decided for itself that changes in data are

01:00:44

changes in the links that we passed

01:00:46

changed and the link converted

01:00:49

the values did not change to the link do nothing

01:00:51

look at the peat does the

01:00:54

second part of our example work changed the

01:00:56

properties and direct binding and the properties

01:01:00

changed changed the link and direct

01:01:02

binding the properties changed on large

01:01:05

volumes this second approach will give

01:01:07

quite large drawdowns

01:01:09

speed therefore it is advisable to use the

01:01:12

pipe period they will be more efficient the

01:01:17

first lesson was devoted to working with

01:01:19

directives and soldering as you saw

01:01:21

creating a directive or pipe is very simple

01:01:23

for this we define a class we add

01:01:26

metadata to this class and the moment

01:01:28

that we missed when looking at

01:01:30

examples the class must be indicated in

01:01:32

module, we indicate that this is part of the

01:01:34

module, then everything will work correctly with

01:01:38

directives and pipes and is a very

01:01:40

convenient toolkit when working with the

01:01:43

user interface. Using

01:01:45

directives, we can very quickly

01:01:46

add behavior or generate

01:01:50

elements in the user interface.

01:01:52

In fact, we constantly use

01:01:54

system directives when building

01:01:57

darling, and with our directives we can also

01:02:00

quickly modernize or

01:02:01

expand the functionality of something already

01:02:04

existing in the application. Insert you

01:02:06

need to make an input field that,

01:02:09

when entered into it, will show a

01:02:12

possible set of prompts, that is, as if

01:02:14

out of complete polyvoda, here is one of the

01:02:16

options on how to do it such an out

01:02:18

kit is to apply directives to everything,

01:02:20

we indicate that there, let’s say on input, the

01:02:23

out complete directive works with

01:02:26

such and such a data source, you simply

01:02:28

indicated a separate directive in the markup and

01:02:30

as a result you would get behavior

01:02:34

that otherwise would need to be

01:02:37

replaced there with several properties

01:02:39

methods that would processed only

01:02:42

one input and so all this is neatly packaged for you

01:02:44

in the pipe directive and or filters is

01:02:47

also a very important point in building an

01:02:49

interface, a very important point for

01:02:51

user convenience in components,

01:02:54

very often information is stored in a

01:02:56

form that is inconvenient for an ordinary person

01:02:58

to perceive and

01:03:00

or is simply incorrect for our application

01:03:02

show such data in this format

01:03:05

so as not to change anything in the

01:03:07

component but at the same time show beautiful

01:03:09

data do we use a filter and

01:03:11

use it as a system filter so we

01:03:14

develop it very well that

01:03:16

the filter is applied here and created

01:03:18

very simply very easily treasure with one

01:03:21

simple method on this our lesson is

01:03:25

over, thank you all for your attention, see you

01:03:27

next time

01:03:35

[music]

Description:

Промокод на скидку 15% на все курсы ITVDN- H94BCAB Полный видео курс- https://itvdn.com/ru/video/angular-advanced В этом уроке мы изучим принципы создания структурных и атрибутивных директив. Это поможет Вам понимать, как работают директивы в Angular приложении. Также в этот урок включены примеры создание пользовательских фильтров (Pipe). Вы не только научитесь создавать и использовать фильтры, но и узнаете какие настройки фильтров могут повысить производительность приложения. Благодарим всех за лайки, перепосты, добавление в избранное! Также подписывайтесь на нас в социальных сетях: https://vk.com/itvdn https://www.facebook.com/unsupportedbrowser https://twitter.com/ITVDN/ https://www.linkedin.com/company/itvdn https://workspaceupdates.googleblog.com/2023/04/new-community-features-for-google-chat-and-an-update-currents%20.html Свои предложения присылайте на почту: [email protected]

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "Angular Advanced. Урок 1. Пользовательские директивы и компоненты" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "Angular Advanced. Урок 1. Пользовательские директивы и компоненты" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "Angular Advanced. Урок 1. Пользовательские директивы и компоненты" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "Angular Advanced. Урок 1. Пользовательские директивы и компоненты" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "Angular Advanced. Урок 1. Пользовательские директивы и компоненты"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "Angular Advanced. Урок 1. Пользовательские директивы и компоненты"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.