[[oktatas:web:angular|< Angular]]

====== Angular Elemek rejtése ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== [hidden] =====

<code html src/app/app.component.html>
<h1>Rejtés</h1>

<button (click)="showDiv()">Mutat</button>
<br>

<div [hidden]="!edited">Eredmény: {{result}}</div>
</code>


<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app23';
  result = 30;
  edited = false;
  showDiv() {
    this.edited = true;
  }
}

</code>

===== @if sablon szintaxis =====

Az Angular 17 verzióban alapértelmezés.

<code javascript>
isVisible = true;
</code>


<code html>
@if(isVisible) {
  <div>Bármi</div>
}
</code>

===== *ngIf =====

<note important>
Elavult az Angular 17-ben!
</note>


<code html src/app/app.component.html>
<h1>Rejtés</h1>

<button (click)="showDiv()">Mutat</button>
<br>

<div *ngIf="edited">Eredmény: {{result}}</div>
</code>


<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app23';
  result = 30;
  edited = false;
  showDiv() {
    this.edited = true;
  }
}

</code>