A solução aplicada no vídeo para esconder o elemento com display: block não é muito eficiente.
Isso porque o elemento ainda está lá, e inspecionando a página ainda conseguimos exibi-lo.
Como alternativa melhor e ainda mantendo a mesma regra de utilização do Renderer, fiz da seguinte forma:
<div #nodePai class="text-left mb-4">
<i class="fa fa-comment-o fa-2x mr-2 ml-2"></i>{{ photo.comments }}
<i photoOwnerOnly [ownedPhoto]="photo" [nodePai]="nodePai" (click)="remove()" class="fa fa-trash-o fa-2x pull-right"></i>
</div>
Na div que é pai dos ícones, adicionei uma variável de template e passei ela como parâmetro para diretiva.
E na diretiva:
@Input() ownedPhoto: Photo;
@Input() nodePai;
constructor(
private element: ElementRef<any>,
private renderer: Renderer2,
private userService: UserService
) { }
ngOnInit(): void {
this.userService.getUser().subscribe(user => {
if (!user || user.id !== this.ownedPhoto.userId){
this.renderer.removeChild(this.nodePai, this.element.nativeElement);
}
});
}
Assim, a partir do elemento pai apago o botão de excluir diretamente no DOM, eliminando a possibilidade do usuário habilita-la de alguma forma.
Considero essa solução mais eficiente.