In this section, we will continue from the last section, where we have seen Event Binding via @Output decorator. Like @Input decorator, we can also assign alias to @Output decorators like shown below. In that case, you need to listen to this alias as well.
And,
Now, we will look at View encapsulation property. Therefore, if you inspect any angular 4 content on page, you can see something like below content.
Here, we have not written anything to emit the content like this. This is default behavior where views are encapsulated in emulated mode. Now, in order to disable this thing, we can set encapsulation to none property like shown below in the snippet.
With that change in place, you can see the markup like normal HTML while inspecting the same in console.
Another option is native, where in it uses DOM shadow. Since, all the browsers don’t have DOM Shadow feature, hence its good to stick to default mode which is Emulated. For this, we don’t need to specifically set the value, this is automatically taken care. None option usually helps to inspect the DOM in the same traditional way. In the next section, we will delve further and see more around Angular 4. Till then stay tuned and Happy Coding.
Thanks,
Rahul Sahay
Happy Coding
