Write an Angular Directive

Add Inputs to Angular Directives

Handle Events with Angular Directives

Build a Directive that Tracks User Events in a Service in Angular

Combine HostBinding with Services in Angular Directives

Use Template Elements in Angular

Create Elements from Template Elements with ngTemplateOutlet in Angular

Write a Structural Directive in Angular

Implement Structural Directive Data Binding with Context in Angular

Assign a Structual Directive a Dynamic Context in Angular

Create a Template Storage Service in Angular

Understand Angular Directives in Depth

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.

Course

Understand Angular Directives in Depth

Assign a Structual Directive a Dynamic Context in Angular

Share this video with your friends