Angular 5 - Implement Role-based security

Hi everyone, today I'll show how to create a role-based security in Angular 5 easily, just 
following some steps.
I was searching something to do this kind of job, but unfortunately found only old jobs and broken libs, then I found it in a Microsoft developers page, look this article: Angular How-to: Implement Role-based security.
Sounds good? sure! but, if you get deep in this solution you can see that we have a security lack, in this case I even made a solution that resolves the lack, but I'wont rediscover the wheel and remake the solution showed by Microsoft, in this case we need to do these simple steps: 

1.Implement the solution 

Get the link: Angular How-to: Implement Role-based security and follow the instructions

If you have any questions don't hesitate to get in touch in the comments area.

2.Houston we've a problem!

 I'll give a chance to you discover the lack:

@Directive({

selector: '[myHideIfUnauthorized]'

})

export class MyHideIfUnauthorizedDirective implements OnInit {

@Input('myHideIfUnauthorized') permission: AuthGroup; // Required 
permission passed in

constructor(private el: ElementRef,
private authorizationService: AuthorizationService) {
}

ngOnInit() {

if (!this.authorizationService.hasPermission(this.permission)) {

this.el.nativeElement.style.display = 'none';

}

}

}

Did you found it?
Not? really?
Not yet?
Put in the comments if you have found, by the way, look:

When we using this kind of solution:

   this.el.nativeElement.style.display = "none";

Users can use the browser developer tools and get some sensitive info, cause the elements still there,
them is only hidden, but if you key f11 + ctrl + f you'll found the data.

Some kind of users that can found your "secure"data.

3.SLAY!

To resolve this we just can change the behaviour of the nativeElement, I did discover these reading the documentation : Angular native element documentation. 

3.SOLUTION!

/*

There's the solution, remove the element from the screen.

*/

this.e.nativeElement.outerHTML = "";

/*

Note: If you want only hidden the data (using only not sensitive data)

*/

this.e.nativeElement.hidden = true;

That's all folks!!!