How to hide a block and show in Angular 4?

Question

How to hide a block and show in Angular 4?

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

Please, I would like to have a input which when I clicked on it, the contents of a div appeared and I had a button that when pressing it, the div disappeared again. Example

<div class="fileContainer">
  <input type="file">
</div>

<div>
  <p> Ejemplo </p>
  <button> Ocultar </button>
</div>

javascript angular

asked by Enric 23.03.2018 в 14:14

source

2 answers

Make another of another kind by its constructor, error Error trying to find the first letter and the first vowel

score 3 · Answer 1

Javascript solution

In javascript you can do the job easily using the onclick attribute to make a call to the following function:

function visibilidad(selector, visible) {
  var elemento = document.querySelector(selector);
  if (elemento != null) {
    elemento.style.display = visible?'block':'none';
  }
}

As parameters you can use any selector (only the first one will be modified if there are several elements that match the same selector) and the visibility status (value that the CSS property will have visible ): true - > block and false - > none .

You can see more information about the CSS selectors in this link .

function visibilidad(selector, visible) {
  var elemento = document.querySelector(selector);
  console.log(elemento);
  if (elemento != null) {
    elemento.style.display = visible?'block':'none';
  }
}

#informacion {
  display: none;
}

<div class="fileContainer">
  <input type="file">
  <button onclick="visibilidad('#informacion', true)">Mostrar</button>
</div>

<div id="informacion">
  <p> Ejemplo </p>
  <button onclick="visibilidad('#informacion', false)">Ocultar</button>
</div>

Angular Solution.js 1.6

In this other solution we make use of the property ng-hide to determine when it should be hidden cap. In our case we use the value of variable ocultar as an expression.

To manage status changes we use ng-click to change the value of ocultar a false (show the layer) or true (hide it again) in each of the buttons:

angular.module('pruebasApp', [])
	.controller('pruebasCtrl', ['$scope', function($scope) {
    /* El estado inicial será ocultar el contenido */
		$scope.ocultar = true;
	}
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js" integrity="sha256-7ngBGhPctUEyXLD6ha53TFUaqhBCnXFOi712aqBq094=" crossorigin="anonymous"></script><div ng-app="pruebasApp" ng-controller="pruebasCtrl">
  <div class="fileContainer">
  <input type="file"><br/>
  <button ng-click="ocultar = false">Mostrar</button>
</div>

<div ng-hide="ocultar">
  <p> Ejemplo </p>
  <button ng-click="ocultar = true"> Ocultar </button>
</div>
</div>

score 1 · Answer 2

With angle, you can use *ngIf to show or not an element:

@Component({
  selector: 'my-app',
  template: '
    <div class="fileContainer">
        <button (click)="mostrar=true"> Mostrar </button>
        </div>

        <div *ngIf="mostrar">
        <p> Ejemplo </p>
        <button (click)="mostrar=false"> Ocultar </button>
        </div>
  ',
})
class HomeComponent {
        mostrar=false;
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);

Here you can see it working