Esconder não resolve 100%

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.