Introduction to Init Observables

In Angular, observables are used to represent asynchronous data streams or events. The init observable is a special observable that is used to emit a single value when a component is first initialized.

Using the Init Observable

To create an init observable, you can import OnInit from @angular/core and implement the ngOnInit() method in your component class. This method will be called by Angular when the component is first initialized.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

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

  init$: Observable<void>;

  ngOnInit(): void {
    this.init$ = new Observable<void>((observer) => {
      observer.next();
      observer.complete();
    });
  }

}

In the above example, we import the Component and OnInit decorators from @angular/core, as well as the Observable class from rxjs. We also declare an init$ property of type Observable<void> in our component class.

Inside the ngOnInit() method, we create a new observable and pass it an observer function. The observer function emits a single value using the next() method and then completes using the complete() method. This means that our init$ observable will emit a single void value when the component is first initialized.

Using the Init Observable in Templates

Once we have created our init$ observable, we can use it in our templates to perform any necessary initialization tasks. For example, we might use it to fetch data from a server or to initialize a component property.

<ng-container *ngIf="(init$ | async)">
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
</ng-container>

In the above example, we use the async pipe to subscribe to the init$ observable and wait for it to emit its single value. Once the value has been emitted, we display our component data using the *ngIf directive.

Conclusion

The init observable is a powerful tool for performing initialization tasks in Angular components. By creating an init$ observable and using it in our templates, we can ensure that our components are fully initialized before displaying any data to the user.