CODEWITHSUNDEEP
angularangularjs-ng-style
serenimus
serenimus

Reputation: 3

How can I display and hide a div with [ngStyle] after doing click on a <button>

I´m trying to display a div after doing a click on a button. this click calls a function from my component.ts.

I want to display the results on this , but I want that this remains hidden, before I call this function, I dont really get the solution,thats could be maybe easier with Jquery..but I dont use it with Angular yet.

I´d thank any help..thanks a lot :))

the code, first the view 

<div id="titulo-filme">
		<h2>{{ titulo }}</h2>
	</div>
	<div id="film-jahren">
		<ul>
			<li *ngFor="let dato of datos;let indice = index">
					{{ dato.year }}
			<button #btnInfo type="button" [disabled]="click[indice]" (click)="**verInfoPorIndice(indice)**; click[indice] = true "><img src="../assets/images/claqueta.png"></button>
			</li>	
		</ul> 	
	</div>
	

	<div id="filmContent" #filmContent [ngStyle]="{'display':infoFilm ? 'block' : 'none'}">		
		<ul *ngFor="let film of infoFilm; let indice = index">
			<li [ngStyle]="{'color':film.year == 1920 ? 'red' : 'white' }">{{ film.year }}</li>
			<li>Titel: {{ film.name }}</li>
			<li>Genre: {{ film.gender }}</li>
			<li> Hauptrolle: {{ film.mainrole }}</li>
			<li>Regisseur: {{ film.director }}</li>
			<li [ngStyle]="{'align-content':film.year > 1895 ? 'center' : 'center'}"><p><img src="../assets/images/{{ film.bild }}"></p></li>				
		</ul>
		<br>		
	</div>

and the function in filme.component.ts

verInfoPorIndice(indice){

  	if(this.films.indexOf(indice)){  		
     
  		this.infoFilm.push(this.films[indice]);
  	
  		return this.infoFilm;
  	}

  }

Upvotes: 1

Views: 823

Answers (1)

StepUp
StepUp

Reputation: 38104

Just use *ngIf and check whether the length of array contains elements *ngIf="infoFilm && infoFilm.length > 0":

<div id="titulo-filme">
    <h2>{{ titulo }}</h2>
</div>
<div id="film-jahren">
    <ul>
        <li *ngFor="let dato of datos;let indice = index">
                {{ dato.year }}
            <button #btnInfo type="button" [disabled]="click[indice]" 
                (click)="verInfoPorIndice(indice); click[indice] = true ">
            <img src="../assets/images/claqueta.png"></button>
        </li>   
    </ul>   
</div>


<div id="filmContent" #filmContent *ngIf="infoFilm && infoFilm.length > 0">     
    <ul *ngFor="let film of infoFilm; let indice = index">
        <li [ngStyle]="{'color':film.year == 1920 ? 'red' : 'white' }">{{ film.year }}</li>
        <li>Titel: {{ film.name }}</li>
        <li>Genre: {{ film.gender }}</li>
        <li> Hauptrolle: {{ film.mainrole }}</li>
        <li>Regisseur: {{ film.director }}</li>
        <li [ngStyle]="{'align-content':film.year > 1895 ? 'center' : 'center'}"><p> 
        <img src="../assets/images/{{ film.bild }}"></p></li>               
    </ul>
    <br>        
</div>

Upvotes: 1

Related Questions