Skip to main content


ngIf with OR condition

ngIf is commonly used in template part of the angular component, using ngIf we can satisfy single or multiple conditions. we use && operator to satisfy both the conditions. || operator to satisfy any of the conditions. Here are the examples

Using OR condition

Using AND condition

Using Boolean value

One way binding in Angular

One way binding in angular is used set or get the data from html controls, here lets see how to get the value from Textbox on button click and show the same in some span.

import { Component} from '@angular/core'; @Component({ selector: 'app-root', styleUrls: ['./app.component.css'], template: `` }) export class AppComponent { userEneteredText :string; showData(value :string){ this.userEneteredText=value; } }

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…