Assign a Structual Directive a Dynamic Context in Angular

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.

[00:00] Now, you probably don't want to hard code these values into your directive. You'd probably rather pass them in just like Angu 4 does. If I say let in messages from messages here, what this is going to expand to now is on the template.

[00:15] There's going to be an input called three from a combination of the name of the directive, and the separator here which is going to take this as the input. Remember, this was used to declare a variable, and any word you put here is going to be an input which combines this and this. It'd be three from messages like so.

[00:41] What that means is we need to change our input from three to three from. Then this value can come from messages which we'll create down here. We'll say messages one, one is awesome, two, two is better, three, three is best.

[01:09] Now, this object is going to be past into my three from. In here, I'm going to destructure this where I have a one, two and three, and take the one, and I'll put it here, a two here, three here. Now when I save, we'll have one is awesome, two is better, and three is best.

[01:34] This object coming in is this messages coming in here. This past into here, past into three from which is an input being assigned to this, and rendered here through this destructuring, and then assignment to the implicit.

[01:52] The one thing you do need to look out for is if the data changes. Say for example in the constructor, you have a set interval, and we'll say every one second, change these messages to...Scrub this, and change some of it.

[02:09] I'll just save bad, worse, worst. Then when I hit save now, you'll see that every second, it's just creating more of them. That's not what I really wanted. I wanted it to replace. The way you replace is just by saying this view.clear. Hit save.

[02:33] Now, each time that data changes, it will clear out, and just replace what's currently there essentially recreating all these views from the templates. Just to really prove that, I just want paste in some mathed out randoms here.

[02:46] Here. Clean this up from my pasting skills, hit save, and you should see this update with random values every second. It's no longer creating values underneath it.

egghead
egghead
~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today