Chuck and Lucas join this week's panelist episode discussing Angular Structural Directives and Their Microsyntax. They kick us off as Lucas explains the concept of Structural directives, and how developers might use them to their advantage.

Hey, welcome to Adventures in Angular, the podcast where we keep you up dated On all things Angular Related. This show is produced by two awesome companies, The first top and as, where we create top end As who get top and pay and recognition while working on interesting problems and making meaning Fo, community contributions and avoid the world Wide Best remote softer development company, Four Angular Bays Projects. In this episode we are going to talk about angular structural directives and their microscyntex, So just brief spoiler. This is that those directives where we have an asterisk in front of them, just like n, g, F and N four. So before

 

Hm.

 

we get into this, let's talk about who's with me here today. So here we have Charles Max Wood,

 

Hey,

 

And my name is Lucas Paganini, So you got the first class representatives of those two awesome companies that we mentioned before, Charles is the co and founder of Top and Dabs, and I am the co and founder of a void, So I think this is going to be a great episode. All right,

 

Yeah, should be good. so

 

All

 

yeah,

 

right,

 

let's let's let's direct some structures or something like that.

 

Let's get to it. Okay. So the go of this episode is to teach you how Like what that asterisk in front of Angular Directive means. Like what that does, Because it does have

 

Uh,

 

a meaning. A

 

huh,

 

Lot of people think that it's just something that indicates that it is an angular native directive is like h, n, g, f, h, n G. For have it so it's probably Because it's like any directive that was made by the angler team has disaster risk just so that we know that it was made by the angler team. Now, actually it does have a technical men like it does something. The as the risk is an operator, it is

 

Uh, huh.

 

centactic sugar and it allows you to write less code than you would have to write To have the entire thing Functional functioning the way that it does. so we're going to talk about what this does exactly and how you can use that to your benefit to create your own structural directors, So you can also create directives that use that asterisk syntax. You don't have to be in the Angular team to use that. So this is the go

 

Right.

 

today. All right,

 

So what does the star actually mean? I'm just curious. It just indicates that it's a different kind of directive.

 

Um, no, it doesn't. What it does is okay. That's that's a great question. so I think you're going to spoil a bit of the magic, but that's okay. That's okay, like the thing

 

Sorry,

 

is, not for the thing is, a structural directive is not then, but a regular directive, but applied to an Engtemplate, like it's just that, so you don't have to declare A different class with a different meaning in order to have a structural directive. Like a directive is simply a regular angular directive, and a structural directive is when you apply any angular directive into an engytemplate, instead of any other elements, So if you're applying your directive to a diff, then it's not a structural directive. If you're applying the directive to paragraph tack, Then it's not a structural directive. But if you apply that to an ngytemplate, then it is a structural directive. It's just that

 

Okay,

 

Now the cool thing is Okay, So before I say the good thing, let me explain something that may be the audiences is thinkin like look, but when I use Ngforngfore, I don't apply it in an Ngtemplate, So you're saying

 

Right,

 

that a structural directive is something that I apply in an Eng temple, But when I'm using Eng or any of those directors, I'm only applying them to a D or to a component like it's never R. at least not most times in an Eng. So what's going on there? The thing is you are applying them to an Engytemplate. You just probably don't know when you have an asterisk in front of the directive. This tells Angular that during compilation type Angular should replace that as the risk with an Engytemplate, and apply your directive to the Engytemplate and everything that your Element has. You should put that inside the enegytemplate that is dynamically created. So angular

 

Uh,

 

is creating

 

huh,

 

the engytemplate during compilation and applying your directive to it.

 

Oh, there's the magic.

 

Exactly That is the magic and the cool thing. And now now we get to the good thing is that, let's say that you have D with a directive that is like Ng, but we doubt the. Has the risk. Imagine that you

 

Uh,

 

write

 

huh,

 

Eng, but we doubt as the risk. Um. that is telling Angular that you want to render. You want to declare a div that has the directive If, and you want to render that dip Okay, But when you apply your directive to a template to an engytemplate, this is telling Angler that you want to declare that element with that directive, but you do not want to render. When you have an energy temple, You are not rendering anything. You are just declaring the structure to angular, but you are not Not at that time. At least maybe you will later render, which is the case with n g F. You declare the structure, but you tell angler, don't render that now, but when this condition becomes true, then you render so with

 

Uh,

 

structural

 

huh,

 

directives, you declare the structure and you don't render.

 

Okay, so I think the implication here is then that I could create my own right, my own structural directives that have that structure that only renders in the way that I tell it with my directive When I tell it with my directive,

 

Yeah, Yeah, and for you to do that, the only thing that you have to do is you need to create a regular angular directive, but you need to assume that this directive won't be used in a dive or a paragraph, or any of that. It will instead be used in an energy ten plate tack. Always like every time that the temple is used by the consumers of it, it will always be applied into an nergytmeplte. So that's the only thing that you need to have If you're creating a directive which is supposed to be used as a structural directive. You need to know that your directive won't be applied to a concrete element such as a dive, but it will

 

Uh,

 

instead

 

huh,

 

be applied to an energy template, and that allows you to inject the Tem plate reference in the constructor of your directive, So for example, when you Apply your directive in a dive in your constructor, you can inject the element reference, so the

 

Uh,

 

element

 

huh,

 

reference will be a reference to the dip in which your directive is being injected. Now If you instead apply your directive to an engitemplate, instead of getting an element reference, you get a template reference, and the template reference is A class created inside Angular, which exposes to you the structural definition of that temple, so it allows you to replicate that temple and render that one or multiple times or not if you want them. So you can from that temple reference dynamically render your content. So

 

Awesome,

 

one one thing that I did with that functionality in the past was to create tabs like literally tabs functionality, for example, your invscoe. Every time that you open a vio, you have a new tub. right. So

 

Uh, huh,

 

what I did was, I created a tabs component

 

Uh,

 

and

 

huh,

 

this tabs component Would take a temp plate of how the content of the tab is supposed to be rendered, So imagine that like, I don't know how many tabs I am going to render, but I know that every tab will have the title, and then you will have this structure here in the body of it. And maybe there's like a foote. I don't know. like you, define the structure of how is your tab when it is open. And then I used a structural directive there so that I could declare the template structure of a tab without having to type Ngytemplate all the time, So I could just

 

Uh, huh,

 

go directly to the root element of the tub. So for example, let's say that the root element is a dip containing the entire thing. I would have the dip with Star Eng Tab, and When Angular compiles that, it will turn that into an energy template with the directive Ng Tab applied to it and inside the enrgytemplate, that will be the dip. So that's one way that I use that to create Uhtabfunctionality in one of the applications which I was working on in the last year, But you can really use that in any case where you need to grab the structure of your content and you need to be able to render that structure multiple times, or maybe like just either render or not render, which is the case with n g f. So with n g f, you're either rendering the thing or not rendering. So you need to have the ten plate, so that when you decide to render you, you have the necessary information to render it, and N G, four is When you want to render that multiple times, So you have an array of with three elements, and for each element you want to render a structure, then you can use an go for. and then you give it the tempplate, and you would. you will render the structure three times using the the data from each of the elements in your array. So these are the cases where you would use something like that. Can you think Any interesting case that you would use that Chuck?

 

Um, yeah, I'm just trying to think, Because the temples and the the way you're talking about things. it's it reminds me a little bit of some of the other things that I've used in other languages where I mean you talked about tabs. For example, I could see that as a know, menus or menu items, I could see you know, just just kind of any kind of list of things that you have. I could also see this put together as a Um. sort of a well. It's not a standard for components, but you could use it to render like specific sections of your page, depending on what you have or how many of something you have. Um, And so I'm thinking like reviews section or things like that. You know. So if there aren't any reviews that shows one thing, and if there are, then it shows something else. Um, which a lot of it kind of feels like it's a kind of a hyper specialized version of F or g four.

 

Hm.

 

but in my case right then the temple, it is actually the you know, more or less the component for whatever that is. Um, but yeah, those are kind of the directions My head is going at the moment

 

Got ya got. So let's go into the rules that you have to respect

 

Right.

 

if you want to use that. So there's only one major rule, which is you. can. You can only use one structural directive per element. And why is that it's because of the way that it works like. At the end of the day, you can literally write your entire application without ever using this Tar prefix. If you want it like you, could, you will

 

Uh,

 

have

 

huh.

 

to type more. You would have to explicitly declare the engytemplates and apply the directive to them. but you could like. there's nothing stopping you from doing that. Now the thing is, let's think about what that does you declare? a dive? And Angular turns that into two elements instead of just one element, which is the dive. It turns that into an engytemplate which contains the dip. So if you think What it does, it's pretty clear why you can only use one per element, Because if you use two, how do you expect angular to part? That should angular like, create two engitemplates like one engine template and another engine template inside and then the dive. Or should it just create one and apply the two directives to it like there's no Asy way for Angular to figure out which structure you're trying to create if you apply to structural directives to the same element, which is why you can only apply one.

 

See, I would apply the N G mind reader and

 

Yeah,

 

then it would just know.

 

that's didn't thought of that shot,

 

Yeah, right if somebody

 

M.

 

actually wrote a driver for my brain at that'd be scary anyway.

 

H, M. And then we have another thing which is extremely advanced now, and maybe you don't need to go into that that depth. But depending

 

Uh

 

on the

 

huh,

 

solution that you're creating, maybe you need to go into that depth, which is, there is an entire microscyntex, just for structural directors Like it's an

 

Okay,

 

entire. Small looks very small, but it's literally a language specification to parse the contents of a structural director. I was pretty mind blown when I figured that out. I thought that, for example, Have you ever seen any n g, four expressions which were super complex? For example, you have an n g for Ex expression which is Um, looping through an array of three elements. It is past A track by function so that it performantly knows which element needs to re, render or not. It is the clarin a variable to keep track of the index of the elements. It's also the clarin variable to keep track of whether this element is the last element of the array or not, And it's also the Clarion Note variable to keep track of whether this is the first element of the array or not, like I have seen that before, and it's a pretty low Expression, and all of this is contained within the quotes of N g four. so you would have star n G four and a very long expression declaring all these variables, all of them like, separated by semi columns, But it would all be there and I thought initially, I thought that this was specific. Twenty four. I thought that like the N G for directive, It somehow part that string and do something with it, but I thought that it was specific to the N G for directive, But it's not. It's

 

Oh, interesting.

 

Yeah, it works for any structural director. This is a micro context the Angular created to parse structural directors. So basically You would have different things being part of this expression. So

 

M,

 

for example you would have, for you would have expressions and expressions. Is when you declare a variable and you assign a value to it, So let's say that you are declaring a variable called item index, and you are assigning index to it. So this is an expression. The expression would be let. Right Index equals index. Now

 

Hm,

 

the question is where does index come from? Because you're declaring a variable called Item index, So

 

Hm,

 

item index didn't exist It anymore. You just declared it. Now it exists. Okay, perfect,

 

Right,

 

but you're assigning value to it and the value that you're assigning is called index. But where is index coming from? And index is coming from the Context object that the n G for directive passes when it renders the temple. Yeah,

 

Oh, wow, okay,

 

Now you got. now you got complex right. Okay, So remember that I said that when you have a structure directive, the directive is applied to a temp late, so the directive can get the template reference and decide when to render that template or not okay. So when you decide to render a temple in Angular, you can optionally pass an object with contexttual data to the temple, And what this does is basically in the Energy temp Plate tag. You can have attributes that declare variables for your template so you can have in your regular Engitemplate, I'm not even talking about structural directors here, but in a regular Engitemplate

 

Hm,

 

tag you could for example, say let dash item index equals index. And what this is saying is that inside your enegitemplate There will be a variable called item index that you can use. you can use to render this this value inside your engytemplate, and the value of item index is equal to the value of index. Now the value of index will only be passed when the engytemplate actually get rendered, So when you render the engytemplate, you can pass an argument which is an object,

 

Hm,

 

a key value object, and One of the keys will be called Index, and then you can give a value to it, And then when you render your template, your template will create a verbal called item index, and assign to that the value of index makes sense.

 

Hm,

 

Okay, So that's where the values from the expression comes from. So you have the cructual directive Microcyntex, inside of that you have expressions, Which is when you declare variables inside your structural directive, and those values can be assigned a value, and the value will have to come from the context object that is passed to the ten plates. Refer When we decide to render the template, Okay, Jesus, that was a lot. By the way,

 

Uh,

 

For whoever is

 

uh,

 

listening to this, I do have a video with a bunch of animations, which makes

 

Right,

 

it so much easier. so just check out the the episode description. I put the length to my video and then maybe by watching the video, the things that I am saying will click. Um, but yeah, otherwise I feel sorry because it's really To keep up with this. just listening to us.

 

Right,

 

Um. Now we also have Functions. Sorry, not functions. We also have key expressions. Key expressions. They are a bit different because key expressions they are mapped out to other directives. Oh man,

 

Okay,

 

uh, yeah, yeah, this is going to

 

Uh,

 

get wild

 

uh,

 

again. So for example, you have Eng. Maybe I think, I think that the audience will recognize this. Have you ever used the owls condition in n G? So you have like n g of condition semi column owls, and then you point to another template reference. So basically what you're saying is if the condition is true, you render this template. If the condition is false, then you render this other template. Okay.

 

Right,

 

Now the thing is, the S is not an expression because an expression. It is an expression. but it's not a declaration Because a declaration is when you actually declare a variable and you assign a value to it, such as when we were

 

Hm,

 

saying, Let item in Xequosethat's a declaration.

 

Right,

 

This is also an expression, but it's not a declaration. This is like key expression. The difference is that it doesn't create a variable in the template. Instead it creates a different directive and assigns that directive to the temple. So what this

 

Uh,

 

is going?

 

uh,

 

Yes, I'm telling

 

I mean,

 

it this is crazy.

 

I watched your video so it makes sense in my head right because I can follow along. but yeah, I mean, and you showed this for like n g four. Right, You had another

 

Yeah,

 

expression like this and Yeah, effectively what it did as it just said. Use this other directive and then it renders that

 

It is so complex, right, Um, but basically let's use that example from n g f. because I think that's a simpler example

 

Yeah,

 

than n g

 

it is.

 

four. So n g F. and then you have this as condition which points to other temple. when angular part is that Angular is going to create. Not create a new directive like you will have to create this directive, but angular well up Ply to the engytemplate, a directive called N G, If all together like, Imagine that you have

 

Uh,

 

a directive

 

huh,

 

called N g, F. Else, when you have other template, when angular partes that it will apply to the generated Engytemplate directive called Eng, if Els, and the E from L will be capitalized, Because Angular will also do Uh, the correct form for format for the the name of the directive, So it will be n g f Els with the E capitalized and

 

Uh,

 

this will

 

huh,

 

be pointing to other template, So other template will be the value passed to a directive called n g f S.

 

Right,

 

That's that's the same thing that happens for. For so An for has track by and track by is a key expression which allows you to pass to N G. for a function that tells Angular when it should re, render an element from the array, or when it should not re render that element because it hasn't changed in order to deserve a Re render, And this is a key expression. When you use Track by You pass it. A function

 

Hm,

 

Angular generates angular Part Is that, and it turns that into a directive called Energy for Track By With, And the value given to this directive is the function that you passed.

 

Right,

 

So it's an entirely different directive, but the prefix is Eng or Eng. for For

 

Right,

 

whatever directive, whatever structural directive you're creating,

 

Right,

 

Oh

 

Cool stuff,

 

yeah, we got to the last point now, and the last thing that you can have in the structure directive, microcentex is a local binding, So we talked about declarations, we talked about key expressions, and the last thing that you can have inside Um. an Angular structural directive is a local binding. A local binding is when you use as So. it declares a Temp late variable and maps the result of the expression to that. So for example, energy f condition as value. I think most of us have, in some point use the Ask word inside Eng F, so that we could create

 

Hm,

 

a variable from the result of the condition. So when you use energy of condition as value, that becomes an energy temp plate, With the N G F directive pointing to condition, and a variable declaration in the Ngtemplate called La Value, pointing to the value of n g F.

 

Right,

 

So it points to the name of the directive itself. So let value equals n g, F. And then in your inn, g f, you will have to. When you pass the context object, you will have to pass in the context object, something which the key is n, g f, so that it maps to the value that the person is using with the ass word.

 

Hm.

 

Oh man,

 

Interesting. Yeah,

 

Yeah, and that's how you can type less and have directors which automatically create energy. Ten plates,

 

Awesome. Well, we're kind of at the end of our time.

 

Uh,

 

I mean,

 

uh,

 

I would love to just dive in a little bit deeper, and just you know, clarify some of this stuff. I really encourage people to go watch the video because it really is awesome. Um, but yeah, I don't have time. I have a very firm stop in ten minutes, so I'm going to just move us from this into self promos and picks, But yeah, we'll put the link to the video in the show notes. I think you also said you had a blog post about it so we can push that in Two. And yeah, this is. this is cool stuff. So

 

Yeah, okay,

 

So what are you working on that people should know about

 

Okay, just two quick things. Web animation scores still in the works looking super good, and I am releasing a lot of free outubevideos. So if you just want to see how that's going, I just get a popular web animation and I do it from scratch without using any libraries. Just pure Mlsssinscript, so you can check that out in my outubechannel. Lucas Paganini, I did mature design Rep. Fact, I did cool transitions for Burger Mine animation, So there's a lot Nice free content there. But if you want to learn even more about webanimations than you want to create your own custom web animations from scratch and performance animations accessible animations, then you should consider checking out my course on Lucas began, dot com slash Web animations, and my second quick Prome is just my company avoid. So I am the co of a softer development company, and as you might imagine, we are extremely specialized in angular Elopment, so I am not the only person that knows Angular quite the opposite. I have excellent co workers that in many cases they know even more than me. So if for some reason you want to out source a project or maybe do staff augmentation, and you need experts in Angular development, go to avoid dot com and fill out the contact form and we can have a chat about it.

 

Awesome? I'm gonna keep mind brief as well. so, um, a couple of things that I'm working on. First of all, we're doing the book club. we're reading, pragmatic programmer, Um. Dave Thomas has agreed to come the last Tuesday of March and be part of the book club, So he's one of the two authors of the book. I haven't heard back from Andy yet. Um, I know he's busy. So you know who knows? Maybe he's busy at that time, or maybe he'll make it. But anyway, Um excited for that. The book We're reading after that is actually the compound Effect by Darin Hardy. It's a personal improvement book. It's not actually a development book, but I want to throw those in. probably once or twice a year. books that I think are going to teach people how to just do better be better, you know, level up. And so that's what I'm looking at there and then after that we're doing seven languages in seven weeks, and I'm going to reach out to Bruce and see if we get him to come and be part of our book club. there. Um, the other thing I'm working on is I am Working on, Um, basically free Mum video series. Um, So I'm doing Ruby and Rails. I'm doing Java script. I'm doing Deve tools, and I'm doing career stuff, and so um, I'm spinning those up one at a time. I imagine that I'm probably going to. do. you know, I'll get the Ruby and Rails one up here over the next week or so, and then I'll have the careers ends up next. Um, but that that's the big focus, And so if you're Interested in those, go to top end dot com and you can just look under the series and you'll see what we've got out there. Probably create landing pages for all of them, and then you can just be notified when they're ready to go. Um, And then the other thing is, is I currently? So last week I was informed that my contract is ending with my current client. And so if you're looking for somebody to do some work for you, I am not as expert in Angular as probably end void. But if you're looking for some, You can do rails, or you know some of the other front and stuff, that's a little less directly angular involved. I guess that's kind of my experts. I'm also open to doing career coaching and things like that, so if you want me to come and teach your team how to level up right, regardless of the technology, that's kind of been my my stick the last while. So uh, yeah, that's what I'm working on, Lucas. What are your picks?

 

Awesome. I didn't have a pick, but now I have my pick Is going to be an awesome Ruby on Rails developer. So if you're looking for one, then check out Charles Max Wood on Twitter C, max, w. Yeah,

 

I've heard of that guy.

 

highly recommend that guy.

 

Yeah, I see that guy like every day. All right, I'm going to throw in a couple of picks real quick. The first one is, I always do a board game. pick. This one is between two castles of mad King Ludwig, Um me, and like four of my friends, we played it on Monday, and it's super fun so effectively And this is the thing that's interesting most of the time when you're playing a game you're working on just whatever board is in front of you Right So you know you think if you're building it Castle, you're building the castle in front of you. Not the case here. What you're doing is is you're actually that you're between two castles. That's wat. It's called between two castles, and you're working on the castle on your right with the person on your right, and you're working on the castle on your left with the person on your left, And so as you build different rooms, they score different ways, and so what happens is is you build up these two castles, and the way that you win is Tally up the scores of both the castles you worked on and your score at the end of the game is the lower of the two scores, not the higher of the two scores, the lower the two scores. So what winds up happening is is in the case that I played, one of the castles was worth seventy three points, and the other was worth fifty nine points. So my score was fifty nine points. I didn't get any bonus points or any extra anything. for having the other castle built up that much further. Okay and everybody scores that way So effectively. What you want to do is you want to have the two highest scoring castles next to you, right? And if

 

Hm,

 

not, then if if you don't have the two highest scoring castles, you want the second highest scoring castle to be one of the ones next to you, because the other one will get ruled out. So, and in fact, there was only one winner instead of two, even though two people worked on the winning castle, because the other castle on the other side of the other player was lower And score than the castle that one, And so it got ruled out for him, but then ruled out for the other guy. Because the castle next, the other castle next to him was the highest scoring one. So you play this game where you're trying to build up both castles as high as you can get them, so that you have ultimately the highest score and uh, yeah, it also made me think a little bit harder. about Okay, you know how do I get a good field for? if this one's way ahead of this other one, you know. Okay, I need to focus on this one a little bit more and stuff like that, so There's quite a git a bit of game play. Um, you're also playing the game of trying to, because you can't talk about the tiles. You have, you know, but you take two tiles and pass them And so am I going to pass these to the pass, The tile that I want my partner on one side or the other to pick up and play next. So anyway it was it was really really fun. Um, and so yeah, I'm going to shout out about that and then M.

 

And we also

 

yeah,

 

have a surprise right for who, stick to the end of the podcast, which is you can now tell us what you want is to cover in the podcast episodes.

 

Oh yeah. I should. I should shout out about that. Yes, so we set up it's It's a system called Feed Bear. It's just a sass product. but yeah, you can recommend topics for people, so we'll put a link to that in the show Notes Is a little long for just reading it on the air. I should probably set up like Adventures in Angular Dot com. Slash recommend. In fact, I'll go ahead and do that today, And so it will be out by the time you all listen to this, but yeah, go ahead and put him in. You can also upfoatand down. vote what's there, And so

 

M.

 

if you See somebody's name and you're like, Oh, I love listening to them every time they speak, or um, you see a topic and you're like I wanted to learn more about that. then,

 

Yeah, and also help us with engagement, because we're not just posting this on just Spotify and Apple podcasts, and like all these podcast platforms, we're not just posting on these platforms anymore. We're now also posting our content on Linked In and you tube. And quite frankly you guys are being too slow there Like you

 

Uh

 

gotta

 

uh,

 

get

 

We're also

 

into

 

posting

 

the

 

short clips out of the shows on Twitter, Facebook and other stuff, But anyway, I've

 

Yeah,

 

got to jump off right now, so

 

Okay, awesome and yeah, Go check out these other platforms. Make a comment of what you want is to cover and also go to adventures in Angular Dot com. Slash recommend to give us your recommendation. Take you so much and I'll see you next week.

 

All right, Max out everybody.