En realidad, hay una diferencia de rendimiento entre ellos:

ngIf comentará los datos si la expresión es falsa. De esta manera, los datos ni siquiera se cargan, lo que hace que HTML se cargue más rápido.

[oculto] cargará los datos y los marcará con el atributo HTML oculto . De esta manera, los datos se cargan incluso si no están visibles.

Por lo tanto , [oculto] se usa mejor cuando queremos que el estado de mostrar/ocultar cambie con frecuencia, por ejemplo, en un evento de clic de botón, por lo que no tenemos que cargar los datos cada vez que se hace clic en el botón, simplemente cambiar su atributo oculto sería suficiente.

Tenga en cuenta que la diferencia de rendimiento puede no ser visible con datos pequeños, solo con objetos más grandes.

ngIf es una directiva estructural , crea/destruye contenido dentro del DOM. La segunda declaración simplemente oculta/muestra el contenido con css, es decir, agrega/elimina display:none al estilo del elemento.

¿Qué son las directivas estructurales?

Las directivas estructurales son responsables del diseño HTML. Dan forma o remodelan la estructura del DOM, generalmente agregando, eliminando o manipulando elementos.

En el primer caso, si la expresión es false , entonces no se creará div ni su contenido. En el segundo caso, siempre se crean div y content, pero no son visibles si la expresión es false .

En realidad, hay otra diferencia entre ellos cuando intenta manipular elementos dentro de las estructuras que están envueltas dentro de una sección:

ngIf causará un error indefinido en su código si intenta hacer referencia a un elemento dentro de esa sección cuando es falso.

[oculto] no causará un error indefinido en su código si intenta hacer referencia a un elemento dentro de la sección, cuando esa sección está oculta.

Entonces [hidden] se usa mejor cuando queremos operar en elementos dentro de la sección envuelta.