This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Sanitizing Input Data" Lesson
[00:00:01]
>> So checking the chat room here, don't be shy. We've kind of just been burning through a ton of stuff here. How about my,
>> A couple about sanitizing inputs and use cases for two way bindings.
>> Yeah, so I didn't answer the two way binding question that's typically on a template driven form.
[00:00:26] And now if you're sanitizing, so it depends on what you mean by sanitation. Now one thing that Angular does not like enabled by default is the ability to render raw HTML in the DOM. And so if you're going to do that, you have to explicitly enable that. And so going back to here, let me see if I can Find this real quick.
[00:01:14] So they have in the core they have the sanitizer class that essentially allows you to take HTML, sanitize it and then render it. So you definitely want to be careful about rendering just like raw HTML. There is a use case for that, but by default, for the sake of security that's turned off and so what you have to do is if you want to do that, you essentially have to enable that.
[00:01:45] And so that is, there is a sanitation service. And I did not have an example here. I occasionally I have had to use this typically when I do I need to go look that up. Let me see if I can find something real quick. Actually,let me see let's try something here.
[00:02:09] So typically if I'm looking for a working example of really anything the two techniques that I will use is I feel like everybody's sort of Stack Overflow driven development, sod or whatever, but you really kind of have, I would say you have Stack Overflow driven development which I'm not ashamed to admit that I use frequently.
[00:02:40] Where's like, what's up with this problem? Working example. I'm just going to copy this in. The other piece is document driven development, which we saw with angular material. Another one that I've started using that I found to be really helpful so you guys are getting all my tips and tricks here is if I need to see something I'll do like, in this case Angular sanitizer, stack Blitz.
[00:03:08] And, more often than not surprisingly, you'll find somebody so stacks Blitz is by default, our public is an example of, something where you can look and be like, this is being sanitized. And so I realized actually, there's a couple things I can actually talk about in the next thing.
[00:03:34] So we'll talk about kind of dependency injection and services in a little bit, but that's how you would do that is using essentially DOM sanitizer, and then you just sanitize that. Let me see. Yeah, a couple questions here. So, can I explain what ng template does. Really what ng template does is It's a way to take the DOM and then Angular will then go and insert those empty templates into the code to essentially manipulate the DOM under the hooded.
[00:04:18] So it's kind of how Angular hooks into the DOM for that. And so for instance ng4 is it's looping over is it's actually creating those entity template elements for Angular to manipulate the DOM. So it's just a kind of a holder for that. So that's what ng template does.
[00:04:44] To something like view dev tools, reactive tools exist, totally. And actually, when I'm doing state management that I actually use Redux dev tools. And so as well as there's another component called augury, which I don't use a ton. Typically I'll just kind of parse the DOM in or I can just do it right from the console.
[00:05:12] But there definitely is Redux dev tools which I use quite a bit.