Friday, 25 June 2021

How to create a function which return observable | Create our own observable


There are multiple inbuild methods provided by 'rxjs' which return observable (like Interval) but if we want to create our own function which return Observable then we can use Create method of observable.

Observable in rxjs is implementation of Observer design pattern, There are two main parts of this pattern

1.Observable 
2.Observer.

We can subscribe/unsubscribe to observable, Observer exposes 3 methods next, error and complete.
we will try to understand all this things by an example. as mentioned in title, we want to create our own observable i.e. we have a funciton/method which will return observable<T>.

suppose I have a function will return a string , but instead of string you want to return Observable<string> from this method/function.

GetObseravleByCreate_simple(): Observable<string>
    {       
        let obs=new Observable<string>(subscriber=>{
            
                subscriber.next("Hello");
                subscriber.error();
                subscriber.complete();           
           
        })
        return obs;

    }

Above operation is very simple when you subscribe this method you will get simple string.
below example simulates a long running operation with the help of setTimeOut function of JS.

 GetObseravleByCreate(): Observable<string>
    {
        let obs=new Observable<string>(subscriber=>{
           
            setTimeout(function() {
                subscriber.next("Hello after 1 second");
                console.log("Observable:create");
                subscriber.complete();

              }, 1000);
            
           // subscriber.error();
        })
        return obs;

    }

Summary : we need to create a instance of Observable<T> ,in constructor we will pass a callback which gives us subscriber instance, on this instance we can call next() method, in other word when we are done with our operation we need to call next() by passing result into it. similarly we can call error() or complete to notify subscriber about error in operation or completion of operation respectively.

At client end: 

           this.service.GetObseravleByCreate_simple().subscribe(x=>{this.obsStr=x;},err=>{});
      //or 
    this.service.GetObseravleByCreate_simple().subscribe(x=>{this.obsStr=x;});

How to create component in a specific module in Angular


Use below cli command to create component in a specific module :

ng g c SubscriberComponent --module= app.module.ts

SunscriberComponent  would be added to module 'AppModule'

Wednesday, 2 June 2021

Error while binding property of a Html element 'Can't bind to.. since it isn't a known property of ..'

 

May be you are getting error message while binding an attribute of html element to a property like 'Can't bind to 'colspan' since it isn't a known property of 'td'. I got this error when I tried to bind a component property 'colspan' property to 'colspan' attribute of <td> element of  a html table, It's possible you will get similar issue for any other HTML element and attribute. 

To know the root cause of this issue, first you need to know that DOM Object and HTML elements different.

DOM allows you to access HTML element programmatically, it provides you an object which is correspond to the HTML element, so, when we are binding property in angular( in components html template) we are actually binding Angular property to the HTML DOM object's property not to the HTML elements attribute. In my case 'error message says that 'colspan' is not known property of td, i.e. colspan property is not present in DOM object created for td while we know that It's attribute of td element. 

you can easily solve this issue by appending 'attr.' in binding like

<...[attr.colspan]="angularPropertyName".../>

My Sample code:










Thank you.


Parent child component communication in Angular. (Approach-1)

  If we will make a property in Child component and somehow if it's a two-way bindable property, then Child would be able to set its val...