Saltar al contenido

Condicional en representación angular utilizando * ngIf directiveJun, 3rdIn este tutorial, vamos a aprender acerca de cómo representar HTML …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo hacer que los elementos HTML condicionalmente en el DOM utilizando Directiva * ngIf.

condicional representación

Significa que sólo hacen los elementos en el DOM siempre que los datos siempre se hace realidad.

angular tiene una directiva especial denominada * ngIf que nos ayuda para hacer que los elementos de forma condicional

Veamos un ejemplo

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
isActive = false;}

You can't see me

En el código anterior, hemos añadido * ngIf = “isActive” al elemento h1 de modo que sólo hace que en el DOM siempre que los bienes isActive llega a ser verdad.

bloque else

También puede ampliar la Directiva * ngIf con el bloque más.

ejemplo:

You can't see me

You can see me

<
g-template>

En este ejemplo, hemos añadido un notActive otra cosa con la directiva * ngIf y lo utilizó en el interior ng-plantilla para que cada vez que la propiedad isActive es cierto que el primer elemento h1 hará que de lo contrario el bloque elemento h1 más va a hacer al dom.

Si usted está confundido al escribir este formato largo de código que también tienen una sintaxis alternativa de utilizar el bloque más.

You can't see me

You can see me