Skip to main content

Posts

UnSubscribe() in Angular with example

Unsubscribe used to remove the subscription from from subscribed observable. this is usually implemented on OnDestry() method. Its always best practice to unsubscribe once the use of subscription is no more used.

Here is the sample code for implementation of unsubscribe()

import { Component, OnInit, OnDestroy } from '@angular/core'; import {PreviewService} from '../services/preview-service.service'; import { Subscription } from '../../../node_modules/rxjs'; @Component({ selector: 'second-component', templateUrl: './second-component.component.html', styleUrls: ['./second-component.component.css'] }) export class SecondComponentComponent implements OnInit,OnDestroy { public previewText:string; public sub:Subscription; constructor(private previewService :PreviewService) { } ngOnInit() { this.sub= this.previewService.userTextObservable$.subscribe( x=>this.previewText=x ); } ngOnDestroy():void{ th…

Subscribe() in Angular

Subscribe is a method that comes from rxjs library which Angular is using behind the scene.
If you can imagine yourself when subscribing to a news letter and after the subscribing, every time that there is a new news letter, they will send it to your home

All the AJAX calls in Angular is using this library behind the scene and in order to use any of them, you've got to use the method name, e.g get, and then call subscribe on it, because get returns and Observable.

Also, when you're doing this <button click="dosomething()"></button>  Angular is using Observable's behind the scene and subscribes you to that source of thing, which in this case is a click event.

Here subscribe is used along with observable to get the latest updates of the observable data.

Angular Service with Observable : In the below code we are creating a Observable as Observable's are usually denoted as suffix $, in the below code userTextObservable$

import { Injectable } from '…

Create Angular Service to Communicate between Components

In previous articles we have seen how to communicate within components using @input and @output. Creating the Angular service to communicate with components are the best method compared to other. Angular service can be consumed by multiple components by subscribing to the service.
Here is the Example of Angular service:
In the below example I will be creating a service that will show the text entered in another component. From the below image,



Component 1 has a textboxPreviewService is the service used to get the latest value in Component1 textbox.Component 2 shows the value from PreviewService.Component 3 shows the length of the value from PreviewService.Preview-Service.Service.ts :
                       PreviewService is created with onUserEnters function that gets the input for the service and userTextObservable$ for exposing the same as a service. Here we have used BehaviouSubject that can hold the current value and previous value, where Subject can hold only current value. impo…

Output with EventEmitter in Angular

Output and EventEmitter used together to pass data from Child component to Parent component. EventEmitter emits the data that can be received by parent component. In the below example We have two components appComponent(parent component) and childComponent(child components) child component contains textbox and parent component shows the data when user enters in the child component. Here we have used Two-way binding, we can also use ngModelChange event.

Example:

child-component.component.html <divstyle="border:1px solid chocolate; width:300px; height: 120px; padding: 10px 10px"><b> Child component</b><br><br>    Type here : <inputtype="text" [(ngModel)]='inputValue' /> </div>
child-component.component.ts

import { Component, OnInit, Output, EventEmitter } from'@angular/core'; @Component({   selector: 'child-component',   templateUrl: './child-component.component.html',   styleUrls: ['./child-component…

Detect changes in parent component using @Input and ngModelChange in Angular

Here we are going to see how the data will be communicated from parent component to child component using @Input() method. @input() can be used in two ways. ·Two way binding with @Input() ·One way binding using ngOnChange() event and @input() Here we gonna look at one way binding with ngModelChange with @Input(). Technical implementation: Here we have two component AppComponent (parent component) ChildComponent ( child component). App component contains Textbox, When user enters any of the data, it will be passed to Child component and display as a span there.

app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public inputValue : string; onChange(UpdatedValue : string) :void { this.inputValue = UpdatedValue; } }
app.component.html child-component.component.ts import { Component, OnInit, Input } from &…