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

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

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * 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>


===== *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>