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

====== Angular - Observable ======

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

===== Az observable =====

Az obseravble objektumokkal valamilyen eseményre szoktunk feliratkozni.
Ügyelnünk kell arra, ha már nem kívánatos a feliratkozás le kell az eseményről
iratkozni.

Ha van egy komponens ami létrehoz egy figyelőt, a komponens megszűnésétől a figyelő
tovább működik. Ez memória szivárgáshoz vezet.

Vannak az Angularban az implicit létrejött Observable megfigyelők, mint a HttpClient, ami az Angular része; ezeknél a megfigyelőknél nem szükséges a leiratkozás, mert az automatikusan megtörténik.


A következő példa a GitHubon:

  * https://github.com/oktat/angular_unsubscribe.git
===== A memóriaszivárgás szemlétetése =====

<code javascript src/app/app.module.ts>
@NgModule({

  imports: [
    FormsModule
  ],

})
</code>

<code html src/app/app.component.html>
Gyermek mutatása

<input type="checkbox" id="showChild"
name="showChild" [(ngModel)]="showChild">

<app-child *ngIf="showChild"></app-child>
</code>



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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  src = interval(2000);
  id = Date.now();
  
  constructor() { }

  ngOnInit(): void {
    console.log('Az alkalmazás indul' + this.id)

    this.src.subscribe(() => {
      console.log('Érkezett: ' + this.id)
    })
  }


  ngOnDestroy() {
    console.log('Komponens vége' + this.id);
  }

}
</code>


<code html src/app/child/child.component.html>
<p>child works!</p>
</code>

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  src = interval(2000);
  id = Date.now();
  
  constructor() { }

  ngOnInit(): void {
    console.log('Az alkalmazás indul' + this.id)

    this.src.subscribe(() => {
      console.log('Érkezett: ' + this.id)
    })
  }


  ngOnDestroy() {
    console.log('Komponens vége' + this.id);
  }

}

</code>


===== Leiratkozás =====

A gyermek komponenseben, ahol feliratkoztunk tároljuk a feliratkozást,  majd
leiratkozunk a komponense megszűnésekor.

Létrehozunk egy obs objektumot a **child.component.ts** fájlban:

<code javascript>
obs !: Subscription;
</code>


A feliratkozás eredményét tároljuk az obs objektumban:
<code javascript>
    this.obs = this.src.subscribe(() => {
      console.log('Érkezett: ' + this.id)
    })
</code>


A komponens megszűnésekor leiratkozunk:
<code javascript>
  ngOnDestroy() {
    console.log('Komponens vége' + this.id);
    this.obs.unsubscribe();
  }
</code>


Teljes kód:
<code javascript src/app/child/child.component.ts>
import { Component, OnInit } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  src = interval(2000);
  id = Date.now();
  
  obs !: Subscription;
  
  constructor() { }

  ngOnInit(): void {
    console.log('Az alkalmazás indul' + this.id)

    this.obs = this.src.subscribe(() => {
      console.log('Érkezett: ' + this.id)
    })
  }


  ngOnDestroy() {
    console.log('Komponens vége' + this.id);
    this.obs.unsubscribe();
  }

}
</code>

===== Linkek =====

  * https://www.tektutorialshub.com/angular/unsubscribing-from-an-observable-in-angular/ (2023)
  * https://www.lucaspaganini.com/academy/angular-automatically-unsubscribe-observables-on-destroy (2023)
  * https://levelup.gitconnected.com/unsubscribing-in-angular-the-right-way-6ed82be43ccc (2023)