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 value and as it's a two-way bindable property, then parent will also bind their property to this property. now if child changes value of this property, it will reflect at parent's created property.

see below example for more details:

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

  styleUrl: './child.component.css'

})

export class ChildComponent {

  @Input() customValue!: string;

  @Output() customValueChange = new EventEmitter<string>();

  onValueChange(value: string) {

    this.customValueChange.emit(value);

  }

}

ChildComponent.html

<input type="text" name="txtchild" [(ngModel)]="customValue" (ngModelChange)="onValueChange($event)">

Parent component:

<input type="text" name="txtParent" [(ngModel)]="txtParent"/>

<app-child [(customValue)]="txtParent"></app-child>

Parent.component.ts:

@Component({

  selector: 'app-parent',

  templateUrl: './parent.component.html',

  styleUrl: './parent.component.css'

})

export class ParentComponent {

  txtParent: string="";

}

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'

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.

Angular setup in your machine

 

To Install Angular in your machine you need to follow below steps:

1. Install node.js (from https://nodejs.org/en/download/)

It' recommended to install latest stable release.

once you will get .msi (installer) It's similar to other software installation.(click next--> next-> finish.)

Now, Open command Prompt and type command : node --version 

It will display version of installed node in your machine.

2.Install Angular CLI

To install angular cli type  npm install -g @angular/cli on command prompt.

-g is used in above command to install angular globally i.e. machine wide, so it would be accessible for all other angular applications. 

you will see above screen once you'll run npm install -g @angular/cli command.

Now you can check version of installed angular cli by typing ng --version command.

You are done with angular setup.

3. Create first angular application

To create angular app, type ng new application-name on command prompt.(application-name may be any valid name you want to give to your application for example ng new HelloWorld).

I have created 'HelloWorld' application in RnD directory, and Opened it in Visual studio code editor.

you can use any editor you wish.

you will see, after running ng new HelloWorld command,  a new directory 'HelloWorld' with multiple files and sub directory created inside of directory where you ran 'ng new..' command.

Go to visual studio code : File --> Open Folder..--> Choose HelloWorld directory

you can run newly created application by typing command : ng serve on command prompt.

type http://localhost:4200/ in browser to see live running app.

Thank you.